CSSでスタイルを設定するHTML要素を選択する方法

著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

CSSのコア機能は、カスケードと特異性の2つの機能によって実行されます。カスケードは、CSSプロパティがどのように読み取られて要素に適用されるかを扱います。特異性は、ブラウザに正しい要素を見つけてスタイルを適用するように指示します。特異性の出発点はセレクターで、これはブラウザーに検索する要素を指示します。スタイリングに関しては、WebページまたはWebサイトが大きいほど、より具体的な、またはより高い特異性のセレクターの必要性が高まります。

適切な要素を選択し、適切な視覚スタイルを提供することが、CSSコードを作成するための基本です。 Webページの要素の外観を調整する必要がある場合は常に、セレクターを使用することが重要です。

このチュートリアルでは、スキルセットを構築し、特定のシナリオで適切な要素を選択する方法を示すことで、視覚的に豊かなWebサイトを開発するのに役立ちます。まず、タイプセレクターを使用して、スタイルを設定するHTML要素を選択します。次に、セレクターを組み合わせて、スタイルをより正確に識別して適用します。最後に、いくつかのセレクターをグループ化して、同じスタイルを異なる要素に適用します。

前提条件

CSSに適用されるカスケードと特異性の概念に精通していること。
ローカルマシンにindex.htmlとして保存された空のHTMLファイルで、選択したテキストエディタとWebブラウザからアクセスできます。開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズでWebサイトを構築する方法全体を試してください。
ローカルマシンのindex.htmlと同じディレクトリに保存されているstyles.cssという空のCSSファイル。

HTMLの設定

この最初のステップでは、チュートリアルの残りの部分でスタイルを設定するHTMLを設定します。このチュートリアルのHTMLの目的は、スタイルを設定するためのさまざまな要素と状況を提供することです。

エディタでindex.htmlファイルを開き、次のボイラープレートHTMLを追加して、ファイルに必要なベースラインコードを指定します。

index.html

<!doctype html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
  </body>
</html>

<link />要素はすでにstyles.cssファイルにロードされているので、そのファイルも準備しておいてください。

今、あなたはいくつかのコンテンツが必要です。 <body>要素内に<header>および<article>要素を追加することから始めます。次のコードブロックでは、強調表示されたセクションが、何が新しく、何が変更されたかを識別するのに役立ちます。

index.html

<!doctype html>
<html>
  ...
  <body>
    <header></header>
    <article></article>
  </body>
</html>

<body>要素と<header>要素の関係は、<header>要素が[ <body>タグ内にX151X]nested。これは、<header>タグと<article>タグが兄弟の関係にあることも意味します。これは、これらが親[内で同じネストレベルにあるためです。 X161X]タグ。

次に、<header>内に子要素を追加して、ページにタイトルを付けます。

index.html

...
<header>
  <h1>About Coral Reefs</h1>
</header>
...

<article>内に、4つの子を追加します。1つは<header>要素、3つは<section>要素です。 <article>要素は、ランドマークと呼ばれるものを提供します。これは、支援技術を使用するユーザーを支援するブラウザーの指定です。ランドマーク内には<header>が1つだけ存在する必要があります。この場合、<header>には、ページのこの記事のタイトルが含まれます。 <section>要素には、さまざまな情報ブロックが含まれます。

index.html

...
<article>
  <header></header>
  <section></section>
  <section></section>
  <section></section>
</article>
...

次に、<article>の<header>にタイトルを付けます。ここでは<h2>を使用します。これは、<body>の<header>の下にある、最上位の見出しを持つ2番目のレベルの見出しとして論理的に機能するためです。「生物多様性」という単語の周りに<strong>タグを追加して、テキストを強く強調します。ブラウザにindex.htmlをロードすると、ブラウザのデフォルトにより、このテキストの外観に違いはありません。見出しと<strong>テキストを区別するために、後でこれをスタイル設定します。

index.html

...
<article>
  <header>
    <h2>Coral Reef <strong>Biodiversity</strong></h2>
  </header>
  ...
</article>
...

次に、最初のセクションのコンテンツを追加します。これは2つの段落になり、<p>タグに含まれ、サンゴ礁に関する詳細が示されます。最初の段落で、<em>タグと<strong>タグをいくつかのフレーズの周りに追加して、その内容を強調します。

index.html

...
<article>
  <header>
    ...
  </header>
  <section>
    <p>Coral reefs are teeming with life. They are known as the <em>rainforests of the sea</em> with how many various speieces live within their waters. The defining feature of these ecosystems are the plant-like coral, which are really colonies of tiny invertabrates called <strong>polyps</strong>.</p>
    <p>Sadly, many reefs around the world are in danger due to rising ocean temperatures, pollution, and overfishing.</p>
  </section>
  ...
</article>
...

2番目のセクションで、記事のこのセクションの見出しに<h3>タグを追加します。以前の<h2>と同様に、これはコンテンツのサブセットであるため、<h3>として設定されます。 <h3>で、<h2>のように、見出しのフレーズの前後に<strong>タグを追加します。次に、<ul>タグを使用してリストを定義し、<li>を使用してリスト内の各アイテムを定義して、順序付けされていないリストを書き出します。リストアイテムの1つで、コンテンツを<strong>タグでラップします。

index.html

...
<article>
  <header>
    ...
  </header>
  <section>
    ...
  </section>
  <section>
    <h3><strong>Animal Life</strong> in a Coral Reef</h3>
    <ul>
      <li>Angelfish</li>
      <li>Clownfish</li>
      <li>Octopus</li>
      <li><strong>Sharks</strong></li>
      <li>Barracuda</li>
    </ul>
  </section>
  ...
</article>
...

最後のセクションで、<h3>セクションのタイトルと、タイトル内の単語の前後に<strong>要素を使用して、2番目のセクションと同様のコンテンツを設定します。順序付けされていないリストの代わりに、<ol>タグを使用して順序付きリストを作成し、リストを定義しますが、各アイテムは<li>タグを使用して定義します。もう一度、リストアイテムの1つで、コンテンツの周りに<strong>要素を追加します。

index.html

...
<article>
  <header>
    ...
  </header>
  <section>
    ...
  </section>
  <section>
    ...
  </section>
  <section>
    <h3>Sammy's <strong>Favorite</strong> Reef Food</h3>
    <ol>
      <li>Sea Grass</li>
      <li><strong>Kelp</strong></li>
      <li>Sea Grapes</li>
      <li>Sea Lettuce</li>
    </ol>
  </section>
</article>
...

ファイルを保存します。

これは、このチュートリアルのHTMLをカバーし、スタイルの作成を開始できる要素を提供します。 index.htmlの使用が終了したので、必要に応じて参照できるようにエディターで開いたままにしておきます。次に、ブラウザでindex.htmlを開いて、ブラウザのデフォルトのスタイルを確認します。これは次の画像のように表示されます。

次に、作成したHTMLページにスタイルを適用します。

タイプセレクタを使用した要素の選択

このセクションでは、タイプセレクター（より一般的には要素セレクターと呼ばれます）を使用します。タイプセレクターは、タグ名でページ上の要素を検索し、特異性の点で最も広いものにします。 index.htmlページ全体でこのセレクターの幅を学ぶために、いくつかのセレクターを作成します。

まず、ブラウザのindex.htmlを見てください。これは、ブラウザのデフォルトを使用したページの外観です。これらは、ページのコンテンツに視覚的な情報を提供するためにブラウザによって提供される事前定義されたスタイルです。これは、スタイルの開始点として役立ちます。上記の例では、ページの外観をカスタマイズするためにいくつかのプロパティのみを変更します。

次に、エディタでstyles.cssファイルを開きます。デフォルトのブラウザフォントは通常、 serifフォントです。これは、 Times New Roman に見られるような、文字の装飾的な端を指すタイポグラフィ用語です。ページ全体でフォントを変更するには、1か所で変更を加えることができます。

タグbodyに単語を入力し、続いて中括弧を開いたり閉じたりして、HTML<body>要素のタイプセレクターを作成します。中括弧内に新しい行を追加してから、CSSプロパティfont-familyに値sans-serifを追加します。このfont-familyの追加により、ドキュメント全体のフォントがサンセリフフォントに変更されます。セリフフォントとは異なり、サンセリフフォントには、HelveticaやArialのように、文字に装飾的な端がありません。

styles.css

body {
  font-family: sans-serif;
}

これらの変更を行ったら、styles.cssを保存し、ブラウザを更新して、テキストがすべてブラウザのデフォルトのsans-serifフォントに変更されたことを確認します。ページ全体でフォントが変更された理由は、継承と呼ばれるCSSの機能によるものです。継承とは、特に指定がない限り、子要素が親要素からプロパティ値を継承する場合です。この機能は、すべてのCSSプロパティまたは要素に影響を与えるわけではありませんが、テキストに影響を与えるプロパティの中で最も注目に値します。

次に、ページ上の<h2>および<h3>要素のfont-weightを調整します。デフォルトでは、ブラウザはスタイルを適用してこれらの要素を太字フォントにします。 h2とh3タイプセレクターを作成し、それぞれにnormalの値を持つfont-weightプロパティを追加します。これにより、デフォルトが太字から通常の太さに変更されます。

styles.css

body {
  font-family: sans-serif;
}

h2 {
  font-weight: normal;
}

h3 {
  font-weight: normal;
}

保存してブラウザに戻り、index.htmlページを更新します。 <h2>および<h3>要素の内容は、<strong>要素のテキストを除いて、太字から通常のフォントの太さに変更されました。これは、ブラウザのデフォルトでfont-weightに明示的な値が設定されているため、<strong>要素はその親要素への変更を継承しない場合です。

デザインの主な目的は、コミュニケーションを支援することです。この場合、デザインはフォントの太さのコントラストを通じてコンテンツの特定の部分を強調するように機能しています。次に、このコントラストを促進するために色を適用します。 emタイプセレクターから始めて、yellowのbackground-colorを適用して、蛍光ペン効果を与えます。次に、<strong>コンテンツにさらに注意を引くために、[X102X]プロパティをredに設定してstrongタイプセレクターを作成します。

styles.css

...
h3 {
  font-weight: normal;
}

em {
  background-color: yellow;
}

strong {
  color: red;
}

styles.cssを保存し、ブラウザでindex.htmlを更新して、Webサイトのデザインに加えた変更を見つけます。次の画像に示すように、ページのテキスト全体がサンセリフフォントに変更され、<h2>および<h3>のコンテンツ見出しは太字ではなくなり、すべての<strong>要素のコンテンツが赤になり、<em>要素のコンテンツの背景が黄色になりました。

このステップでは、複数のタイプセレクターを使用して、セレクターごとに特定のスタイルを作成しました。タイプセレクターは、要素の名前で要素を検索するようにブラウザーに指示し、最も広い特異性を備えています。次に、セレクターグループを使用してCSSを単純化する方法について学習します。

コンビネーターセレクターで要素を選択する

このセクションでは、コンビネーターセレクターを使用して、より具体的な要素を選択します。このセレクターは、HTML要素のネストされた関係を使用して、適切な要素を選択します。このセレクターを使用して、同じ要素タイプが他の要素タイプに含まれている場合に異なって見えるようにします。

ブラウザでindex.htmlを開きます。スタイルを見ると、ページ上の<strong>のすべてのインスタンスにcolor: red;を適用しているstrongセレクターが原因で、赤のポップが頻繁に発生します。このステップでは、一連の親子要素の関係である祖先に基づいて、<strong>要素が特定の基準を満たしたときにcolor値を変更します。。

コンビネーターセレクターは、セレクター間のスペース文字によって定義され、HTMLの祖先は左から右に読み取られます。右端のセレクターが目的のターゲットです。これは、スコープに必要なだけ複雑または単純にするか、目的の要素に十分な特異性を提供することができます。コンビネーターセレクターの動作を理解するには、styles.cssを開き、ファイルの下部にpタイプセレクターの後にスペースを追加し、次にstrongタイプセレクターの後にオープンを追加します。カーリーブラケットを閉じます。

styles.css

...
p strong {
}

これは、<p>要素の祖先の子孫である<strong>要素を対象とするコンビネーターセレクターです。つまり、このコンビネーターセレクターをtrueにするために、<p>要素が<strong>要素の直接の親である必要はありません。次に、コンビネーターセレクター内にcolorプロパティを配置して、この基準を満たす<strong>要素の色を変更します。

styles.css

...
p strong {
  color: coral;
}

変更を保存し、ブラウザに戻ってindex.htmlを更新します。

次に、ファイル全体の<strong>要素にさまざまな色を追加します。 <h3>の子孫である<strong>要素から始めて、それらのblueを回します。

styles.css

...
p strong {
  color: coral;
}

h3 strong {
  color: blue;
}

最後に、さらに色を追加するには、順序付けされていないリストの<strong>要素の色をdodgerblueに変更します。これは濃い水色で、<strong>要素の色はgreenへの順序付きリスト。ここで、コンビネーターセレクターの祖先の要件を理解することが役立ちます。これらの要素を正しくターゲットにするには、ul li strongとol li strongを書き出す必要があると思うかもしれません。ただし、ulとolは十分に具体的であるため、これはul strongとol strongに簡略化できます。

styles.css

...
h3 strong {
  color: blue;
}

ul strong {
  color: dodgerblue;
}

ol strong {
  color: green;
}

ブラウザに戻り、更新を押します。次の画像に示すように、順序なしリストの<strong>要素は濃い水色になり、順序付きリストの<strong>要素は緑色になります。

このセクションでは、コンビネーターセレクターについて学習しました。 <strong>要素のさまざまなインスタンスのカスタムカラーを作成するために、2つのタイプセレクターでセレクターを複数回使用しました。次のセクションでは、セレクターグループを使用して複数の要素タイプに同様のスタイルを適用することにより、CSSを簡素化する方法を見ていきます。

セレクターグループで複数の要素を選択する

このセクションでは、セレクターグループを使用してHTML要素を選択します。 Do n't Repeat Yourself 、またはDRYと呼ばれるプログラミングの原則があります。 DRYコードの目的は、より保守しやすいコードを作成することです。セレクターグループの使用は、CSSを作成するときにDRYの原則を実践するための最も簡単な方法の1つです。

エディターでstyles.cssを開きます。チュートリアルの前半で、ブラウザのデフォルトの重みをboldからnormalに変更する2つのスタイルを書きました。

styles.css

...
h2 {
  font-weight: normal;
}

h3 {
  font-weight: normal;
}
...

h2およびh3タイプのセレクターは、セレクターブロックで同じプロパティと値を持っているため、これをセレクターグループと統合できます。セレクターグループは、セレクターの間にコンマを入れることによって行われます。この場合、h3セレクターブロックを削除し、h2タイプセレクターの後にコンマを追加してからh3タイプセレクターを追加できます。リストを読みやすくするために、各セレクターを新しい行に配置すると便利な場合があります。

styles.css

...
h2,
h3 {
  font-weight: normal;
}
...

ブラウザを開き、index.htmlをリロードして、何も変更されていないことを確認します。 h2とh3の両方が、セレクターブロックのおかげで同じスタイルを共有するようになりました。ただし、スタイルを同じに保つことに限定されません。個別のh2およびh3タイプセレクターを使用して、各要素に特定のスタイルを提供することもできます。これらのタイプセレクターをそれぞれ作成してから、各セレクターブロックに異なる色を追加します。

styles.css

...
h2,
h3 {
  font-weight: normal;
}

h2 {
  color: maroon;
}

h3 {
  color: navy
}
...

ブラウザでindex.htmlを更新して、h2とh3がnormal font-weightと同じ共有スタイルを持っていることを確認しますが、それらの個々のcolorプロパティ。

セレクターグループは特定の種類のセレクターに限定されず、さまざまな種類のセレクターをまとめて同じスタイルにすることができます。グループ化のこの機能は、さまざまな方法で使用できます。すでに説明したセレクターを取り込むには、コンビネーターセレクターの1つをh2, h3セレクターグループに追加します。

styles.css

...
h2,
h3,
ol strong {
  font-weight: normal;
}
...

ブラウザでindex.htmlを更新すると、順序付きリストの<strong>要素は太字ではなくなり、代わりにnormalfont-weightになります。次の画像：

注セレクターグループを使用すると、さまざまなスタイルを1つのセレクターブロックにまとめることができます。ただし、DRY CSSと人間が読める形式のCSSの間にはバランスが必要であり、人間が読める形式のCSSの側で誤りを犯すベストプラクティスがあります。極端な例として、単一のプロパティが繰り返されないように複数の大きなグループセレクターを作成することは可能ですが、それは開発者にとって理解しにくいでしょう。この場合、開発者の読みやすさが優先されます。

このセクションでは、グループセレクターを使用して、繰り返しのCSSプロパティを単一のセレクターブロックに変換しました。また、セレクターグループを備えたコンビネーターセレクターを追加して、高い特異性で再利用可能なプロパティを記述しました。

結論

このチュートリアルでは、CSSを作成するために必要なベースラインセレクターについて学習しました。 HTMLの奥深くにネストされたCSSを使用してページ上の要素を効果的に検索し、特定のスタイルを与えることができるようになりました。また、簡潔で管理しやすいCSSを作成するのに役立つDRYプログラミングの原則についても学びました。これらのセレクターは、他の多くのCSSセレクターと組み合わせて、スタイルを設定したい正確な要素と状況に到達することができます。

CSSチュートリアルをもっと読みたい場合は、CSSトピックページを確認してください。