CSSのタイプセレクターとは？基本構文と使い分けのポイントを解説

CSSのタイプセレクター(要素型セレクターとも呼ばれます)は、HTML要素をその種類(タイプ)によって指定するためのセレクターです。指定できるのは <h2>、<p>、<button> といった組み込みHTML要素です。

タイプセレクターの基本構文

タイプセレクターで要素にスタイルを適用するには、次のような構文を使用します。

element-name {
    property-name: value;
}

例として、button要素をタイプセレクターでスタイリングしてみましょう。

<button>クリックしてください！</button>

CSS:

button {
    font-size: 32px;
    padding: 1rem;
    color: red;
}

タイプセレクターを使うと、サイト内の該当要素に対して広範囲にスタイルが適用されます。

たとえばサイト内に10個のbutton要素があり、上記のCSSを適用した場合、すべてのボタンに同じスタイルがかかります。これが意図した結果になる場合もあれば、そうでない場合もあるため、状況に応じた判断が必要です。

ベーススタイルとして活用する

HTML要素に直接、汎用的な基礎スタイル(ベーススタイル)を設定しておくのは有効な手法です。ただし、ベーススタイルはできる限り限定度の低いものにすべきです。UI全体で視覚的な一貫性を保ち、不要なコードの重複を防ぐための土台として機能させます。

特に一貫性を持たせておきたい項目は以下の通りです。

• フォント(書体)
• フォントサイズ
• 行間(line-height)
• 色
• 余白(スペーシング)

たとえば、UI内で使用するフォントファミリーは統一しておくのが良い習慣です。5種類ものフォントを使うと、UI全体の見た目がちぐはぐになり、一貫性が失われてしまいます。多くのWebサイトでは、1〜最大3種類程度のフォントファミリーに収めるのがおすすめです。

ここで、サイトで2種類のフォントを使いたいと仮定しましょう。

1. 段落やリストにはセリフ体(Serif)
2. それ以外の要素にはサンセリフ体(Sans Serif)

このような場合、タイプセレクターで広くフォントを指定するのが理にかなっています。

/* Roboto はサンセリフ体 */
html, body {
  font-family: roboto;  
}

/* Merriweather はセリフ体 */
p, li {
  font-family: merriweather;
}

このCSSにより、すべてのHTML要素はRobotoを使用し、段落とリストのみMerriweatherが適用されるようになります。

タイプセレクターを使うべきでない場面

一般的に、ある要素に対して広範囲に詳細なスタイルを大量に適用するのは避けるべきです。ページ上のその要素すべてに影響してしまうためです。

たとえば、次のようなCSSの書き方は推奨されません。

button {
  font-size: 1.125rem;
  padding: 1.5rem;
  margin-top: 1rem;
  border-radius: 8px;
  border: 1px solid #444444;
  color: green; 
  background-color: black; 
  transition: all 1s ease-in;
}

上記のコードは、サイト内のすべてのbutton要素に多数のスタイルを適用します。実際のサイトでは、役割の異なる複数のボタンが存在するのが普通です。ベースとなるUIデザイン(特にタイポグラフィ)の一貫性は保ちつつも、すべてのボタンの見た目や挙動が完全に同じになるのは望ましくないでしょう。特にmarginなどの余白の値を特定の要素タイプ全般に広く適用するのはリスクが高いと言えます。

もちろん、クラスセレクターを使えばベーススタイルを上書きすることは常に可能です。しかし、クラスを使う本来の目的は、要素セレクターから継承されたベーススタイルを打ち消したり上書きしたりすることに時間を費やすことではありません。

クラスを使用する本来の目的は以下の2点です。

• 必要とされる場面でベーススタイルを拡張する。たとえば、ヒーローセクションのCTAボタンだけ他の場所より少し大きくしたい、といったケースが該当します。
• 再利用性の確保。クラスは無限に再利用でき、柔軟かつ効率的です。単一目的のユーティリティクラス(いわゆる「関数型CSS」)を基盤とするTailwind CSSフレームワークは、その代表的な成功例といえます。

まとめ

• タイプセレクターは、ブランドのビジュアルアイデンティティを一貫性によって強化する、汎用的なベーススタイルの土台づくりに活用しましょう。
• クラス(場合によってはID)は、ベーススタイルの上に積み重ねる形で、各要素の役割や配置されている環境に応じたスタイリングを行うために使用しましょう。