サイト制作において重要となるのが「デザイン」と「使いやすさ」の2つです。
今回はその中でもデザインに大きく関わるCCSのセレクタの使い方についてまとめました。
CSSはプログラミングの中でも比較的に簡単で、初心者でもすぐに覚えることができますが、デザインにおいて幅広く使うことができとても奥が深いのが特徴です。
「CSSのセレクタは種類がたくさんあってどれを覚えたらいいのかわからない。」というお悩みをお持ちの方もいると思います。
本記事で紹介するのは、サイト制作の現場で使われているセレクタだけを厳選しました。
セレクタを上手く使うことができれば、スキルがワンランクアップします。
セレクタとは
セレクタとは、スタイルを適用させるために、HTMLの要素を指定することです。
これだけではわかりづらいと思いますので、例を用いて説明すると以下のようになります。
セレクタ{プロパティ:値}
p{
color:red;
}
セレクタ・・スタイルを適用させる要素を選択（p要素を選択）
プロパティ・・どのような変化を適用させるのか（colorプロパティで色の変化を適用）
値・・具体的な変化を指定（redで文字色を赤色に変化）
セレクタの使い方
実際に使用されているセレクタとその使い方について説明します。
全称セレクタ
全称セレクタセレクタは、全ての要素を対象に指定できるセレクタです。
ユニバーサルセレクタとよばれることもあります。
* {
margin: 0;
padding: 0;
}
使用するブラウザによってデフォルトで設定されている空間やスペースは若干の違いがあるので、「margin: 0;」と「padding:0;」を指定してスタイルをリセットすることで、ブラウザによる見え方の違いを防ぐことができます。
全称セレクタはこのような使い方をされることが多いです。
要素セレクタ
要素を直接指定するセレクタになり、指定した要素すべてが対象になります。
p{
color:red;
}
全てのp要素が赤くなります。
idセレクタ
id属性で指定した値（名前）をセレクタで指定することで、スタイルを適用させます。
idセレクタで指定するときは、名前の前に「#（シャープ）」をつける必要があります。
<p id="sample">テスト</p>
#sample{
color:red;
}
id属性はすべての要素で使用できますが、同じWebページ内では同じid名は1度しか使えませので注意が必要です。
ページが違えば使用することはできます。
同じスタイルを適用させたい要素が複数存在する場合は、class属性で指定するようにしましょう。
classセレクタ
class属性で指定した値（名前）をセレクタで指定することで、スタイルを適用させます。
セレクタで指定するときは、名前の前に「 . （ピリオド）」をつける必要があります。
<p class="sample">赤色の文字色を適用する</p> <p>スタイルを適用しない</p> <p class="sample">赤色の文字色を適用する</p>
.sample{
color:red;
}
class=”sample”で指定した部分だけが赤色に変わります。
idは一度しか使えませんでしたが、classは何度でも使うことができます。
同じスタイルを適用させたい要素が複数存在する場合は、id属性ではなくclass属性で指定します。
idとclassのメリット・デメリット
idとclassの違いについてはご理解いただけたと思います。
次は「id」と「class」それぞれのメリット・デメリットについて説明します。
idのメリット
・HTMLのソースを見たときにidが使われていたら1つしかないとすぐにわかる
idのデメリット
・重複して使用することができない（非効率）
idを使う例として、「header（ヘッダー）」「footer（フッター）」「global-navi（グローバルナビ）」などがあります。
1ページに1つしか存在しないためこのような場合ではidを使用します。
idを多用するとソースコードが読みにくくなるため、必要な箇所だけに使用しましょう。
classのメリット
・使いまわすことができる（効率が良い）
classのデメリット
・一意の存在ではないため、要素が1つしかないのか、複数あるのかわからない
効率的にコーディングするためにはheader、footer、global-naviなど同じページ内に一つだけしか存在しない要素はidを使用、その他はclassを使用することをオススメします。
メンテナンスなどでコーダー以外の人がソースコードを見る可能性があるので、誰が見てもわかりやすく書くのが鉄則です。
複数セレクタ
セレクタを複数指定するときは、要素の間を「,(コンマ)」で区切る必要があります。
<h1>スタイルが適用される</h1> <h2>スタイルが適用される</h2> <h3>スタイルが適用される</h3>
h1,h2,h3{
color:red;
}
子孫セレクタ
子孫セレクタとは親セレクタの下の階層にあるセレクタのことです。
孫要素までスタイルが適用され、親要素直下になくても(子要素でなくても)対象となるので注意が必要です。
<div id="sample"> <p>スタイルが適用される</p> <div id="sample2"> <p>スタイルが適用される</p> </div> </div>
#sample p{
color: red;
}
子セレクタ
子セレクタとは親セレクタ直下のセレクタ（孫要素は含まない）のことです。
親セレクタの直下のセレクタだけスタイルを適用させる場合に使用します。
<div id="sample"> <p>スタイルが適用される</p> <div id="sample2"> <p>スタイルが適用されない</p> </div> </div>
#sample > p{
color: red;
}
子孫セレクタの例ではsample要素の下にあるp要素全てがスタイルが適用される対象となりますが、子セレクタの例では
sample要素の直下にあるp要素しかスタイルが適用されていません。
子孫セレクタと子セレクタはどちらとも使用する頻度が高いので2つの違いを覚えておく必要があります。
隣接セレクタ
隣接セレクタとは同じ階層にある要素（兄弟要素）で、指定した要素の直後にある要素にスタイルを適用します。
なので、指定した要素より前にある要素や隣あっていない要素にはスタイルが適用されません。
<p>h2の要素と隣あっているが、h2より前にあるためスタイルは適用されない</p> <h2>テスト</h2> <p>h2の要素と隣あっており、h2の直後にあるためスタイルが適用される</p> <p>h2の要素と隣あってないため、スタイルは適用されない</p> </div>
h2 + p{
color: red;
}
「+」を連続して使用することで、隣の隣までスタイルを適用させることができます。
<p>h2の要素と隣あっているが、h2より前にあるためスタイルは適用されない</p> <h2>テスト</h2> <p>h2の要素と隣あっており、h2の直後にあるためスタイルが適用される</p> <p>h2の要素の隣の隣にあるためスタイルが適用される</p> </div>
h2 ++ p{
color: red;
}
「~」を使用することで、指定した要素の後ろにある要素全てにデザインを適用させることができます。
<p>h2のより前にあるためスタイルは適用されない</p> <h2>テスト</h2> <p>h2の後ろにあるためスタイルが適用される</p> <p>h2の後ろにあるためスタイルが適用される</p> <p>h2の後ろにあるためスタイルが適用される</p> </div>
h2 ~ p{
color: red;
}
疑似要素
疑似要素とは、要素内の特定した部分に対してスタイルを適用することです。
特に使用頻度が高いのは以下のようになります。
・::before・・指定した要素の前に指定した内容を追加する
・::after・・指定した要素の後に指定した内容を追加する
・::first-letter・・最初の1文字だけにスタイルを適用する
・::first-line・・最初の行だけにスタイルを適用する
・::selection・・テキストが選択されたときスタイルを適用する
::beforeと::afterの使い方
<p id="example">テスト</p>
#example::before{
content: '「';
color: red;
}
#example::after{
content: '」';
color: red;
}
contentプロパティはテキストだけでなく、画像のURLも指定することができます。
#example::before{
content: url("img/sample.png");
}
::first-letterの使い方
最初の文字だけにスタイルが適用されるので、「テスト」の「テ」だけが赤くなります。
<p id="example">テスト</p>
#example::first-letter{
color:red;
}
::first-lineの使い方
最初の行だけにスタイルが適用されるので、「テスト」だけが赤くなり、「例文」にはスタイルが適用されません。
<p>テスト</p> <p>例文です</p>
p::first-line{
color:red;
}
::selectionの使い方
要素内のテキストが選択されたとき文字色や背景色を変更することができます。
<p id="example">この部分を選択すると文字色と背景色が変わります</p>
#example::selection{
background-color:white;
color:red;
}
疑似クラス
疑似クラスとは指定した箇所に対して全体的にスタイルを適用することです。
特に使用頻度が高いのは以下のものになります。
・:link・・未訪問のリンクにスタイルを適用する
・:visited・・訪問済みのリンクにスタイルを適用する
・:hover・・リンクの上にカーソルがあるときにスタイルを適用する
・:active・・クリックを始めたときとクリックが終わるまでの間だけスタイルを適用する
・:focus・・要素がフォーカスされたときにスタイルを適用する
・:nth-child()・・子要素（n番目）を指定してスタイルを適用する
・:first-child・・指定した要素内で最初の子要素にスタイルを適用する
・:last-child・・指定した要素内で最後の子要素にスタイルを適用する
・:only-child・・親要素内で子要素が1つだけの場合のみ、スタイルを適用する
:linkと:visitedの使い方
一度もクリックされていないリンクは「:link」で指定したスタイルが適用され、クリック済みのリンクには「:visited」で指定したスタイルが適用されます。
<a href="https://kumaweb-d.com/">クリックする前は文字色は黒になり、クリックした後は赤色の文字色になります</a>
a:link {
color:black;
}
a:visited {
color:red;
}
:hoverの使い方
<a href="https://kumaweb-d.com/">マウスを上にのせると、スタイルが適用されます</a>
a:hover {
color:red;
}
:activeの使い方
<a href="https://kumaweb-d.com/">クリック開始からクリック終了まで、スタイルが適用されます</a>
a:active {
color:red;
}
:link、:visited、:hover、:activeの注意点
この4つの疑似クラスには記載する順番が決められています。
記載する順番は以下のようになります。
1.:link
↓
2.:visited
↓
3.:hover
↓
4.:active
この順番通りに記載しないと、スタイルが適用されないので注意が必要です。
:focusの使い方
主にフォームのスタイルに使用されます。
お名前<br><input type="text" name="namae" size="20"> メール<br><input type="text" name="mail" size="40">
input[type=text]:focus {
background-color: gray;
}
:nth-child()の使い方
主に「li（リストタグ）」と併用されることが多いです。
特徴として偶数、奇数、項目の順番などを指定してスタイルを適用させることができます。
偶数のみにスタイルを適用する。
<ul> <li>テスト1</li> <li>テスト2</li> <li>テスト3</li> <li>テスト4</li> <li>テスト5</li> <li>テスト6</li> </ul>
li:nth-child(even){
background-color:red;
}
奇数のみにスタイルを適用する。
<ul> <li>テスト1</li> <li>テスト2</li> <li>テスト3</li> <li>テスト4</li> <li>テスト5</li> <li>テスト6</li> </ul>
li:nth-child(odd){
background-color:red;
}
特定の項目のみにスタイルを適用する。
この例では4番目の項目にスタイルを適用します。
<ul> <li>テスト1</li> <li>テスト2</li> <li>テスト3</li> <li>テスト4</li> <li>テスト5</li> <li>テスト6</li> </ul>
li:nth-child(4){
background-color:red;
}
特定の項目以降全てにスタイルを適用する。
この例では4番目の項目以降全てにスタイルを適用します。
<ul> <li>テスト1</li> <li>テスト2</li> <li>テスト3</li> <li>テスト4</li> <li>テスト5</li> <li>テスト6</li> </ul>
li:nth-child(n+4){
background-color:red;
}
:first-childの使い方
要素内の最初の要素だけにスタイルが適用されるので、「テスト1」だけが赤くなります。
<ul> <li>テスト1</li> <li>テスト2</li> <li>テスト3</li> <li>テスト4</li> <li>テスト5</li> <li>テスト6</li> </ul>
li:first-child{
color:red;
}
「:first-child」を用いてグローバルメニューのような表示をつくることができます。
<ul> <li>テスト1</li> <li>テスト2</li> <li>テスト3</li> <li>テスト4</li> <li>テスト5</li> <li>テスト6</li> </ul>
li {
padding-left: 10px;
padding-right: 10px;
float:left;
list-style-type:none;
display:block;
border-left:1px solid black;
}
li:first-child{
border-left:none;
}
「border-left:none;」で一番左に表示される区切りの線を消しています。
:last-childの使い方
要素内の最後の要素だけにスタイルが適用されるので、「テスト6」だけが赤くなります。
<ul> <li>テスト1</li> <li>テスト2</li> <li>テスト3</li> <li>テスト4</li> <li>テスト5</li> <li>テスト6</li> </ul>
li:last-child{
color:red;
}
「:first-child」と同じように「:last-child」を用いてグローバルメニューのような表示をつくることができます。
<ul> <li>テスト1</li> <li>テスト2</li> <li>テスト3</li> <li>テスト4</li> <li>テスト5</li> <li>テスト6</li> </ul>
li {
padding-left: 10px;
padding-right: 10px;
float:left;
list-style-type:none;
display:block;
border-right:1px solid black;
}
li:last-child{
border-right:none;
}
「border-left:none;」で一番右に表示される区切りの線を消しています。
:only-childの使い方
親要素内に子要素が1つだけの場合のみ、スタイルが適用されます。
<div> <p>子要素が1つだけなので、スタイルが適用される</p> </div> <div> <p>子要素が複数あるので、スタイルは適用されない</p> <p>子要素が複数あるので、スタイルは適用されない</p> </div> <div> <p>子要素が複数あるので、スタイルは適用されない</p> <p>子要素が複数あるので、スタイルは適用されない</p> <p>子要素が複数あるので、スタイルは適用されない</p> </div>
p:only-child{
color:red;
}
否定疑似クラス
否定疑似クラスとは指定した要素以外にスタイルが適用されます。
具体的な使い方は以下のようになります。
<p class="sample">スタイルが適用されない</p> <div>スタイルが適用される</div> <p class="sample">スタイルが適用されない</p>
:not(.sample) {
color:red;
}
セレクタの優先度
セレクタには優先順位があり、優先度の高い設定が適用される。
優先を左右する要因は2つあります。
・記載する順番
・要素指定
記載する順番
スタイルシートは上から順番に読み込まれますので、同じ要素を指定してスタイルを適用していた場合、下に記載されているスタイルが適用されます。
<p>テスト</p>
p{
color:green;
}
p{
color:red;
}
要素指定
指定した要素によって優先順位が変動します。
優先度の高い要素を上から順番に並べると以下のようになります。
1.「id」
↓
2.「class」
↓
3.「ul」
↓
4.「*」
例を挙げると以下のようになります。
<p class="sample" id="test">テスト</p>
#test{
color:red;
}
.sample{
color:blue;
}
記載する順番の優先度から考えると文字色は青色になりますが、「id」の要素が優先されるため文字色は赤色になります。
まとめ
サイト制作に欠かせないのが「HTML」と「CSS」です。
Webサイトのデザインの役割を担っているのがCSSになり、ユーザーに与える影響はとても大きく、デザイン1つでPV数やユーザーの滞在時間が変化します。
CSSはプログラミングの中でも比較的理解しやすい内容ですが、必要となる知識の幅は広く、完璧に使えるようになるまでには時間がかかります。
「idセレクタ」「classセレクタ」「セレクタの優先度」はとくに必要となる知識なので覚えておくようにしましょう。