CSS セレクターの紹介

このレッスンでは、カスケード スタイル シート (CSS) を使用して HTML ビジュアルを強化する方法について詳しく説明します。 まずは、特定の HTML 要素をターゲットにするためのツールである CSS セレクターから始めます。

カスケード スタイル シート (CSS)

CSS は、HTML コンポーネントの外観 (色、間隔、サイズなど) を決定します。インライン style 属性 (<p style="color:red;"></p> など) を使用して個々の要素のスタイルを設定できますが、これは大規模な Web サイトでは非効率的です。

より効果的なアプローチには、HTML の <style></style> セクション内で 要素を使用するか、style.css:<link> を使用して HTML にリンクされた別の CSS ファイル (

など) を使用します。

  <style>
    p {
      color: red;
      text-decoration: underline;
    }
  </style>

または

<!-- index.html -->
<link href="style.css" rel="stylesheet">

/* style.css */
p {
  color: red;
  text-decoration: underline;
}

これは、すべての <p></p> 要素に同じスタイルを適用します。 ブラウザ開発者ツール (例: Chrome の右クリック、[検査]) を使用すると、適用されたスタイルを調べて変更し、トラブルシューティングを行うことができます。

HTML 要素の選択

p の p { color: red; } は、すべての <p></p> 要素を選択します。 より複雑な構造の場合、id 属性と class 属性を使用すると、より詳細な制御が可能になります。

クラスと ID セレクター

各要素は一意の id を持つことができます。 ID セレクター (#idName) は、id によって要素をターゲットにします。 ただし、id は一意である必要があり、柔軟性が制限されます。

クラスはより多用途性を提供します。 複数の要素が同じクラスを共有できます。クラス セレクター (.className) は、そのクラスを持つ要素を対象とします。 要素は複数のクラスを持つことができます (例: <p class="red-text bold"></p>)。

.red-text { color: red; } は、red-text クラスのすべての要素をスタイルします。 p.red-text は、<p></p> を持つ red-text 要素のみを具体的にスタイルします。

コンビネータセレクター

ドキュメント オブジェクト モデル (DOM) は、ページの構造をツリーとして表します。 コンビネータ セレクタはこの階層を利用します。

• div p: <p></p> 要素 (子孫) 内のすべての <div> 要素を選択します。 <li> <code>div > p: <p></p> 要素の直接の子 <div> 要素のみを選択します。 <li> <code>p span: <span></span> の直後の <p></p> を選択します。
• p ~ span: <span></span> に続くすべての <p></p> 兄弟を選択します。


過度に複雑なコンビネータの組み合わせは推奨されません。 これらをクラス セレクター (例: .intro p) と組み合わせることができます。

擬似セレクター

疑似クラスセレクターは、状態に基づいて要素のスタイルを設定します (例: a:hover、a:active、a:visited)。 疑似要素セレクターは、要素の一部をターゲットとします (例: ::first-letter)。

その他のセレクター

• *: すべての要素を選択するユニバーサル セレクター。
• グループ セレクター (例: h1, h2, p): 複数の要素タイプを選択します。
• 属性セレクター (例: p[lang]、p[lang="en"]): 属性に基づいて要素を選択します。

さらに読む:

• レスポンシブデザイン
• レスポンシブ画像
• CSS アニメーション

この投稿は元々 TheDevSpace に掲載されたものです。