HTMLでよく出るCSS用語(セレクタ・プロパティ・単位)

セレクタは「どのHTML要素にスタイルを当てるか」、プロパティは「何を変えるか」、値は「どう変えるか」を指定するCSSの基本部品です。この3つと単位の意味が分かると、CSSの解説をそのまま読み進められます。

セレクタとは

セレクタとは、CSSのルールを「どのHTML要素に適用するか」を指定する部分です。p { color: red; }と書いたときの先頭のpがセレクタで、この場合は全てのp要素が対象になります。

次のコードは、クラスセレクタで特定の段落だけ文字色を変える例です。

<style>
  .notice { color: red; }
</style>
<p class="notice">クラスが一致するので赤くなる段落</p>
<p>セレクタに一致しない通常の段落</p>

最初に覚えるセレクタは、次の3種類です。

• 要素セレクタ(p) — タグ名で指定
• クラスセレクタ(.notice) — class属性で指定
• idセレクタ(#header) — id属性で指定

なお「セレクター」と伸ばして書かれることもありますが、英語のselectorを指す同じ用語です。

プロパティと値とは

プロパティは「何を変えるか」を表す設定項目で、値は「どう変えるか」を表す具体的な内容です。プロパティと値をコロンで区切ったひとまとまりを宣言と呼びます。

p {
  color: red;      /* プロパティ: color(文字色) 値: red */
  font-size: 16px; /* プロパティ: font-size(文字サイズ) 値: 16px */
}

CSSの解説で「colorプロパティにredを指定する」とあれば、「文字色という項目を、赤という内容に設定する」という意味です。プロパティ名は決められた英単語から選び、自作はできません。

よく出る単位(px・%・vh・em・rem)

サイズの値に付ける単位で、意味がよく問われるものを以下にまとめました。

remはルート要素(html)のフォントサイズを基準にする相対単位です。その場のフォントサイズ基準で入れ子の影響を受けるemと違い、どこで使っても基準が変わりません。

迷ったら「固定はpx、画面や親に連動させたいときは%やvh、文字基準はrem」と覚えておくと、解説記事の指定を読み解けます。多くのブラウザでルートのフォントサイズは初期値16pxのため、1remは16pxに相当します。

gap・nowrapなどの頻出プロパティ

gapは、フレックスボックスやグリッドで並べた子要素どうしの間隔を、まとめて指定するプロパティです。次のコードは、横並びにした3つの項目の間に16pxの隙間を作る例です。

<style>
  .row { display: flex; gap: 16px; }
</style>
<div class="row">
  <p>項目1</p>
  <p>項目2</p>
  <p>項目3</p>
</div>

marginと違い、要素の外側ではなく「要素と要素の間」だけに隙間が入るため、両端に余計な空きが出ません。

nowrapはプロパティではなく値で、主に2つの場面で登場します。white-space: nowrapはテキストの自動折り返しを禁止し、flex-wrap: nowrapはフレックスボックスの子要素を折り返さず1行に収めます。