CSS（Cascading Style Sheets）は、ウェブページの見た目やレイアウトを指定するための言語です。HTMLがウェブページの構造を定義するのに対して、CSSはそのスタイルやデザインをコントロールします。この記事では、初心者向けにCSSの基本的な書き方を紹介します。
【PR】
1. CSSの基本構造
CSSの基本的な構造は「セレクタ」と「宣言ブロック」から成り立っています。
セレクタ {
プロパティ: 値;
}各要素の説明
- セレクタ: スタイルを適用するHTML要素を指定します。
- プロパティ: どのようなスタイルを適用するかを指定します（例:
color、font-size）。 - 値: プロパティに対して具体的なスタイルの値を指定します（例:
red、16px）。
2. CSSの適用方法
CSSをHTMLに適用する方法はいくつかあります。
【PR】
インラインスタイル
各HTML要素に直接スタイルを指定します。通常、推奨される方法ではありませんが、特定の要素にのみスタイルを適用する際に便利です。
<p style="color: red;">このテキストは赤色で表示されます。</p>内部スタイルシート
HTMLドキュメントの<head>内にスタイルを記述します。
<head>
<style>
p {
color: blue;
}
</style>
</head>外部スタイルシート
スタイルを外部ファイルに分離し、HTMLファイルでリンクします。最も一般的な方法で、複数のページに一貫したスタイルを適用できます。
<head>
<link rel="stylesheet" href="styles.css">
</head>【PR】
3. 基本的なCSSプロパティ
CSSには数多くのプロパティがありますが、ここでは最も基本的なものを紹介します。
カラー指定
- 色の指定: テキストや背景の色を指定します。
p {
color: green; /* テキストの色を緑にする */
background-color: yellow; /* 背景色を黄色にする */
}
フォント指定
- フォントサイズ: テキストの大きさを指定します。
h1 {
font-size: 24px; /* 見出しのフォントサイズを24ピクセルにする */
}
- フォントファミリー: テキストのフォントを指定します。
body {
font-family: Arial, sans-serif; /* テキストにArialフォントを適用 */
}
【PR】
余白とパディング
- マージン: 要素の外側の余白を指定します。
div {
margin: 20px; /* 要素の外側に20ピクセルの余白を追加 */
}- パディング: 要素の内側の余白を指定します。
div {
padding: 10px; /* 要素の内側に10ピクセルの余白を追加 */
}4. セレクタの種類
CSSでは、特定のHTML要素にスタイルを適用するためにさまざまなセレクタを使用できます。
- 要素セレクタ: HTML要素全体にスタイルを適用します。
h2 {
color: navy;
}- クラスセレクタ: 同じクラス名を持つ複数の要素にスタイルを適用します。クラスは
.で指定します。
.intro {
font-weight: bold;
}- IDセレクタ: 特定のIDを持つ要素にのみスタイルを適用します。IDは
#で指定します。
#main-header {
text-align: center;
}5. CSSの役割
CSSはウェブページの視覚的なデザインを決定するために不可欠なツールです。HTMLで定義された構造にスタイルを適用することで、ページの外観を美しく整え、ユーザーエクスペリエンスを向上させます。
