セレクターには、「パターン」と呼ばれる条件が多数定義されています。セレクターの種類をいくつかご紹介しましょう。
| * | ユニバーサルセレクタ (全称セレクター) |
すべての要素が対象 |
|---|---|---|
| タグセレクタ タイプセレクター |
タグを直接指定する | 特定のタグ名を指定 |
| IDセレクター | id属性要素 | シャープ(#)を付けて命名する。 1ページ内一度しか使用できない。 【例】#containerなど冒頭にシャープを付けて命名 |
| クラスセレクター | class属性要素 | ドット(.)を付けて命名する。 ページ内何度でも使用できる。 【例】.priceなど冒頭にドットを付けて命名 |
| リンク疑似クラス | :link | リンク(未訪問) |
| :hover | マウスがロールオーバーしている時 | |
| :visited | 訪問済みリンク | |
| :focus | フォーカスされている時 (テキストフィールドなど) |
|
| :active | マウスが押されている時 | |
| 子孫コンビネータ 子孫セレクター(E F) |
ある特定の要素の子孫（入れ子構造）にあたる要素に適用されます。 | スペースを挟んで記述することで指定できます。Eの中にあるFという把握をすると分かりやすいでしょう。【例】nav li(nav要素の中のli) |
| セレクターのグループ化 | セレクター,セレクター2,セレクター3 | 同じスタイルを「カンマ(,)」で仕切ることで、複数のセレクタをまとめて記述することができます。 |
※CSS3になってからは、セレクターの種類が非常に増えています。ウェブデザイン基本講座(前編)では、まず上記の基本セレクターを使いこなせるよう学習します。
タグセレクタ・タイプセレクター
直接タグをセレクタに指定する
h1{color:red;}と記述すると、そのページ内のすべての<h1>要素は、文字の色が赤くなります。さらに、h1,h2{color:red;}とセレクタをカンマで仕切り複数指定すると、<h1><h2>一度に両方の要素の文字色が、赤くなります。タグセレクタは、<p>や<table>など、あらゆる「タグ」を直指定することができます。
id属性とclass属性
id属性とは
範囲指定（グループ化）された範囲や、特定の位置に「命名する（名前をつける）」ことで、その範囲を指定することができます。id属性は、1つのHTMLドキュメントにつき一度しか使用できないのが特徴です。
id属性名の注意点
id名は、基本的には自由に命名する（好きな名前をつけることが可能）ことができます。但し、スペースを含めたり、数字一桁やアルファベット1つなど適当すぎるid名などエラーの元になりますので注意しましょう。また、共同作業をすることを視野に入れ、あまり適当なid名をつけてしまうと、後で分からなくなってしまったり理解しづらいCSSになってしまうので、ある程度、推測されやすいid名をつけることが好ましいと考えます。idセレクタは、頭文字に「#(シャープ)」を付けてCSSで記述します。HTMLには「#」は含めません。
<div id=”wrap”> この中にコンテンツ</div>
別々に記述してもCSSとHTMLは連動し合っています。連動することで、レイアウトやデザインを整えることが可能となるのです。HTMLとCSSを操る場面で混乱しがちになりますが、反映する楽しさを味わいながら練習しましょう。
/* コンテンツ全体の横幅を800pxにする */
#contents{width:800px;}
<!--- HTML------>
<div id="contents">
この中に要素(内容)を入れる
</div>class属性とは
id属性と同じく範囲指定（グループ化）された範囲や、特定の位置に「命名する（名前をつける）」ことで、その範囲を指定することができます。id属性との違いは、1つのHTMLドキュメントにつき何度でも使用することができます。また、半角スペースで区切ることで複数のclassスタイルを幾つも充てることが可能な点が大きな特徴です。
class属性名の注意点
大まかに、命名に関する注意点はid属性と同じです。classセレクタは、頭文字に「.(ドット)」を付けてCSSで記述します。HTMLには「ドット」は含めません。
/*------文字の色を赤くするクラスセレクタ
あらゆる要素に充てることできる----*/
.red{color:red;}<!--- HTML------>
<div class="red">
(範囲指定)
この中の要素(内容)の文字は、すべて赤色になります。
</div>
<!-- h1要素に、直接クラスを充てるパターン
h1要素の文字色が、赤くなる。--->
<h1 class="red">
おはよう
</h1>
<!-- ３つの果物がすべてred --->
<ul class="red">
<li>バナナ</li>
<li>みかん</li>
<li>りんご</li>
</ul>
<!-- みかんだけがred --->
<ul>
<li>バナナ</li>
<li class="red">みかん</li>
<li>りんご</li>
</ul>セレクタを使いこなす！
idセレクタに、classセレクタを充てることもできる
<!--idセレクタとclassセレクタは、同時に使うことができる-->
<div id="contents" class="red">
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
</div>classセレクタは、複数指定できる
<!-- 半角スペースで区切る --->
<div class="flex red bold">
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
</div>様々な子孫(入れ子)によるセレクター
/*------wrap内にあるh1を指定------------*/
.wrap h1{color:red;}
/*-------h1に直接.redを適合する---------*/
h1.red{color:red;}
/*-------contents内で最も最初に出現するh1--*/
.contents > h1{color:red;}01.練習してみましょう。
わくわくパン屋さんのテキスト素材を使って、それぞれのタグにスタイルを記述してみましょう。
<h1>わくわくパン屋さん</h1>
<p>当店の人気のメニューを紹介します。</p>
<h2>ふわふわ食パン</h2>
<p>ふんわりもっちりとした柔らかい生地がたまらなく美味しい食パンは、
モーニングやサンドイッチなどに大活躍です。</p>
<h2>クロワッサン</h2>
<p>バターをパン生地に練りこんで焼き上げるパン。
サクサクした食感と甘みが特徴的で朝食やおやつにも人気です。
フランス発祥であり、「三日月」を意味しています。</p>
<h2>バゲット</h2>
<p>生地が細長く伸ばされていることから、パリッとした焼き上がりが特徴です。
フランス語で「棒」や「杖」を意味しています。</p>
<h2>メロンパン</h2>
<p>日本発祥の人気菓子パン。パン生地の上に
甘いビスケット生地をのせて焼いたパンです。
ビスケット生地による表面のすじや格子状の模様が
マスクメロンに似ているからと言われています。</p>
<p>お店のホームページはこちらです。</p>
<small>Copyright ©わくわくパン屋さん All Rights Reserved.</small>問題01
- 見出しh1の文字の色を、#ff0000(赤)にしてみましょう。
- 各パンを、種類別にdivで囲ってみましょう。
- メロンパンの見出し(h2)だけ、文字の色をグリーンにしてみましょう。
- 食パンを焦がしてしまいました。範囲指定を使って、ふわふわ食パンだけ黒いボックスにしてみよう。
- ページ全体の背景に、ベージュ色(#f5deb3)を指定しましょう。
- パンの写真を入れてみましょう。
- ▶︎ パンの写真素材をDLする
