序章

このチュートリアルでは、CSS IDセレクターを作成し、CSSとHTMLを使用してWebサイトを構築するときにそれらを使用する方法と理由を学習します。

CSS IDセレクターは、CSSクラスセレクターと同様に機能します。 これらを使用すると、一意のID属性を持つHTML要素に適用できるCSSルールを作成できます。 クラスと同様に、ID名は、開発者がIDセレクターを使用してCSSルールを作成するときに選択されます。 ただし、IDは、HTMLドキュメントで個別のID onceしか使用できないという点でクラスとは異なります。 したがって、トップロゴ、サイトタイトル、ナビゲーションバーなど、ページに1回だけ表示されるアイテムのIDのみを定義します。 一般に、CSSIDは控えめに使用されます。

前提条件

このチュートリアルに従うには、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトのセットアップ方法の指示に従って必要なファイルとフォルダーをセットアップしたことを確認してください。

CSSIDセレクターの作成

IDのルールを作成する場合、IDの名前の前に#が付加されます。

#my-first-id {
  color: blue;
}

このCSSルールは、「my-first-id」という名前のIDを作成し、このIDが割り当てられたHTMLテキスト要素が青色になることを宣言します。

IDが実際にどのように機能するかを見てみましょう。 まず、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトの設定方法の説明に従って必要なファイルとフォルダーを設定していることを確認してください。

styles.cssファイルのすべてを消去し(このシリーズをフォローしている場合)、上記の「#my-first-id」のCSSルールをstyles.cssファイルに追加してファイルを保存します。

次に、index.htmlファイルに戻り、すべてを消去します(コードの最初の行:<link rel="stylesheet" href="css/styles.css">を除く)。 次に、次のコードスニペットを追加します。

index.html
<p id="my-first-id">This text is styled using a CSS ID.</p> 

ファイルを保存して、ブラウザにリロードします。 (HTMLファイルをロードする手順については、チュートリアルセクションブラウザでオフラインHTMLファイルを表示する方法を参照してください)。

次のようなものを受け取るはずです。

Webpage with text styled with a CSS ID

この演習では、styles.cssファイルにCSSID “my-first-id”を作成し、強調表示されたID属性を使用してindex.htmlファイルのテキストコンテンツに適用しました。 画像や画像など、あらゆる種類のHTMLコンテンツのIDを作成して適用できることに注意してください。

要素

結論

Webページに1回だけ表示されるスタイリング要素のIDを作成して使用する方法を検討しました。 次のチュートリアルでは、CSS pseudo-classes について学習します。これは、ユーザーの動作によってトリガーされる可能性のある特定の状態によってアクティブ化される特殊なタイプのクラスです。