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

投稿日: 2022-04-20 2022-10-13
タグ: css, Development

序章

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

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

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

前提条件

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

HTMLの設定

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

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

index.html

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

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

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

index.html

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

との関係 <body> そしてその <header> 要素は、親および子と呼ばれます。 <header> 要素はネストされた内部にあります <body> タグ。これはまた、 <header> と <article> タグは兄弟の関係にあります。これは、タグが親内で同じネストレベルにあるためです。 <body> タグ。

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

index.html

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

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

index.html

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

今、タイトルを提供します <header> のために <article>. を使用する <h2> ここでは、論理的には下の第2レベルの見出しとして機能するためです。 <body>の <header> トップレベルの見出しが付いています。加える <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>、を追加します <strong> のように見出しのフレーズの周りにタグを付ける <h2>. 次に、を使用して順序付けられていないリストを書き出します。 <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>
...

最後のセクションで、2番目のセクションと同様のコンテンツを設定します。 <h3> セクションタイトルと <strong> タイトルの単語の周りの要素。順序付けされていないリストの代わりに、 <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か所で変更を加えることができます。

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

styles.css

body {
  font-family: sans-serif;
}

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

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

styles.css

body {
  font-family: sans-serif;
}

h2 {
  font-weight: normal;
}

h3 {
  font-weight: normal;
}

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

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

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> ページ上。このステップでは、を変更するために作業します color の値 <strong> 祖先、一連の親要素と子要素の関係に基づいて、特定の基準を満たす要素。

コンビネーターセレクターは、セレクター間のスペース文字によって定義され、HTMLの祖先は左から右に読み取られます。右端のセレクターが目的のターゲットです。これは、スコープに必要なだけ複雑または単純にするか、目的の要素に十分な特異性を提供することができます。コンビネータセレクターがどのように機能するかを理解するには、 styles.css ファイルの最後にaを追加します p タイプセレクター、スペース、そして strong タイプセレクタの後に、中括弧を開いたり閉じたりします。

styles.css

...
p strong {
}

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

styles.css

...
p strong {
  color: coral;
}

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

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

styles.css

...
p strong {
  color: coral;
}

h3 strong {
  color: blue;
}

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

styles.css

...
h3 strong {
  color: blue;
}

ul strong {
  color: dodgerblue;
}

ol strong {
  color: green;
}

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

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

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

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

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

styles.css

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

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

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

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> 順序付きリストの要素は太字ではなくなり、代わりに normal font-weight、次の画像のように：

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

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

結論

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

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

getdocs

13036