CSSの仕組みを理解しよう！セレクタ・プロパティ・値の基本

CSSを使うと、HTMLで作ったページの見た目を自由に変更できます。

この時CSSでは「HTMLのどこに」「どんな指示を」「どんな内容」で指定するかを決める必要があります。

それぞれ、セレクタ・プロパティ・値 という仕組みを使うのですが、今回はこれらを解説します！

今回の記事は書き方の基本を見ていく記事です。

次の記事から具体的なものを覚えていくため、今回は書き方を確認していきましょう。

HTMLのどこに？（セレクタの基本）

CSSでは、デザインを適用する要素を指定するためにセレクタを使います。

セレクタには大きく分けて次の3種類があります。

要素（タグ）セレクタ

要素の種類（タグ名）を指定することで、ページ内のすべての同じタグに対してスタイルを適用できます。

h1という記載部分がセレクタです。
他の部分はこの後解説していきます。

h1 {
    color: blue;
}

クラスセレクタ

クラスセレクタを使うと、特定の要素グループにスタイルを適用できます。クラス名の前に「.」（ドット）をつけるのがポイントです。

html側にも、classを振っておく必要があります。

.highlight {
    color: red;
}

<p class="highlight">これは強調された段落です。</p>

IDセレクタ

IDセレクタは、ページ内の特定の1つの要素にスタイルを適用したいときに使います。

html側にも、idを振っておく必要があります。

#special {
    background-color: yellow;
}

<p id="special">これは特別な段落です。</p>

どんな指示を？（プロパティの基本）

セレクタを使ってどの要素にスタイルを適用するかを決めたら、次に「何を変えるのか」を指定します。これをプロパティと呼びます。

文字に関するプロパティ

• color：文字の色を指定
• font-size：文字の大きさを指定
• text-align：文字の位置を指定

pタグの文字色とフォントサイズを変えるというCSSのイメージをお見せします。

p {
    color: red;
    font-size: 20px;
}

背景に関するプロパティ

• background-color：背景の色を指定

これはbodyタグの背景色を変えるというCSSの指示です。

body {
    background-color: yellow;
}

余白に関するプロパティ

• margin：要素の外側の余白を指定
• padding：要素の内側の余白を指定

pタグの余白を変えようという指示になります。

p {
    margin: 20px;
}

どんな内容で？（値）

プロパティには、どのようにスタイルを適用するのかを示す値を指定します。

色の指定

色の指定には、色名、16進数コード、RGBなどの方法があります。

• 色名（英語）: red, blue, green
• 16進数コード: #ff0000（赤）, #0000ff（青）
• RGB表記: rgb(255, 0, 0)（赤）, rgb(0, 0, 255)（青）

h1を#ff0000（赤）に変更するという指示になります。

h1 {
    color: #ff0000; /* 赤 */
}

数値の指定

フォントサイズや余白など、数値を使って指定するプロパティもあります。

• ピクセル（px）: 絶対的な大きさを指定（例: 20px）
• パーセント（%）: 親要素に対する割合を指定（例: 50%）
• em/rem: フォントサイズを基準に指定（例: 1.5em）

pタグの文字サイズを20pxに変える指示になります。

p {
    font-size: 20px; /* 文字サイズを20pxに */
}

位置や配置の指定

位置や配置を指定する場合、left/right/center などのキーワードや、数値を使うことができます。

divタグで囲ったテキストを中横揃えにする値です。

div {
    text-align: center; /* テキストを中央揃え */
}

まとめ

• CSSは「セレクタ」「プロパティ」「値」の組み合わせでスタイルを適用する
• セレクタで「どこに」適用するかを決める
• プロパティで「どんな指示を」出すかを決める
• 値で「どんな内容」にするかを指定する