【脱初心者】CSSの擬似要素・擬似クラスを理解して表現の幅を広げるためのはじめの一歩

【脱初心者】CSSの擬似要素・擬似クラスを理解して表現の幅を広げるためのはじめの一歩

こちらの記事では、かけだしのWebデザイナー向けに「CSSの擬似要素・擬似クラスを理解して表現の幅を広げるためのはじめの一歩」をWebデザイナーSAYOKO.JPが説明しています。

SAYOKO.JP

この記事は以下のようなひとに向けて書いています。

 二重コロン (::) が出てくるとテンパる

 不明点をググるとしょっちゅう擬似要素・擬似クラスがでてくる

 そもそも擬似要素・擬似クラスってなんなのかよくわからない

擬似要素・擬似クラスが使えるようになるとデザインの幅がグッと広がるので、頑張って習得していきましょう

気になるところまでジャンプ

擬似要素とは

擬似要素とは、選択された要素の特定の部分に対してスタイルを適用できるようにするものです。

HTMLの要素を擬似的にCSSで設定するので、HTMLに手を加えることなく装飾を適用することができます。

疑似要素を使うメリット

HTMLが乱雑にならない

擬似要素は、HTMLの要素を擬似的にCSSで設定できるので、HTMLコードを汚すことなく様々な表現ができます。

SEOを気にせず自由な表現ができる

擬似要素で挿入した文字は検索エンジンにインデックスされないので、SEOを気にせずにユーザーのための自由な表現ができます。

コロン(:)の数はいくつ?

CSS3では擬似要素と擬似クラスを区別するために、原則擬似要素は二重コロン (::) を使用することが推奨されています。

しかし、CSS3に対応していないブラウザは単一コロン (:) を使用しているので、単一コロン (:)でも多くのブラウザで動作するようになっています。

MEMO
CSS3は2011年から段階的に公開されています。

よく使う擬似要素

::before(要素の直前にコンテンツを追加)

p::before { content: 追加するコンテンツ ;}を指定すると、要素の直前にコンテンツを追加できます。

contentの中身に文字列を指定する場合は、ダブルコーテーションもしくはシングルコーテーションで囲みます。

例えば、pタグの直前に疑似要素を使って「Hello!」という文字列を入れると以下のようになります。

■HTML


<p>いい天気ですね。</p>

■CSS


p::before {
    content: 'Hello!' ;
}

リスちゃん

ブラウザでは「Hello!いい天気ですね。」と表示されます!

::after(要素の直後にコンテンツを追加)

p::after { content: 追加するコンテンツ ;}を指定すると、要素の直後にコンテンツを追加できます。

::before::afterともにcontentプロパティに画像を指定すると、テキストだけでなく画像も追加することができます。

例えば、pタグの直後に疑似要素を使って画像を入れるとこうなります。

■HTML


<p>いい天気ですね。</p>

■CSS


p::after {
    content: url( "../image/sunny.jpg");
}

clearfixの使い方(floatプロパティの解除)

擬似要素::afterにおいて、よく使われるものとしてclearfixがあります。

clearfixとは、floatプロパティによって浮いた要素にほかの要素が回り込むのを防ぐことができるCSSコードです。

以下のコードをCSSファイルに追加して、clearfixというクラス名をfloatプロパティを使用する箇所の親要素に適応させます。


.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

floatプロパティによって浮いたcontentsセレクタにfooter要素が回り込むのを防ぐと以下のようになります。

■HTML


<div id="contents" class="clearfix">
  <article>
    本文
  </article>
</div>
<footer>
  フッター
</footer>

■CSS


div#contents {
  float: left;
}
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

clearfixはとても便利なので覚えておきましょう!

リスちゃん

::first-letter(要素の一文字目を指定)

::first-letterは、最初の行の最初の要素にスタイルを適用します。

ただし、最初の文字より前にほかのコンテンツ(画像など)がないときに限ります。

例えば、以下の場合だと「こんにちは。」の「こ」にだけcolor: red;が適応されます。

■HTML


<p>
こんにちは。<br>
いい天気ですね。
</p>

■CSS


p::first-letter {
  color: red;
}

::first-line(要素の一行目を指定)

::first-lineは、最初の行の要素にスタイルを適用します。

例えば、以下の場合だと「こんにちは。」にだけcolor: red;が適応されます。

■HTML


<p>
こんにちは。<br>
いい天気ですね。
</p>

■CSS


p::first-line {
  color: red;
}

擬似クラスとは

擬似クラスとは、指定された要素が特定の状態である場合にスタイルを適用させるセレクタです。

文章構造の範囲外にある外的要因との関係によって、スタイルを変化させることができます。

例えば、リンク文字色の定義における未訪問リンク(:link)、リンクテキストにロールオーバーした状態(:hover) 、訪問済み(:visited)といったスタイルが適用されます。

疑似クラスを使うメリット

感覚的にレイアウトを実装できる

擬似クラスを使うとプロパティの上書き回数を少なくすることができるので、感覚的にレイアウトすることができます。

リスちゃん

擬似クラスを使うと作業効率もアップします!

よく使う擬似クラス

a:link(未訪問リンクの文字色)

a:linkは、aタグに対してそのリンクが未訪問の状態である場合を指定してスタイルを適用します。

■HTML


<a href="#">リンクテキスト</a>

■CSS


a:link {
    color: blue;
}

a:visited(訪問済みリンクの文字色)

a:visitedは、aタグに対してそのリンクが訪問済みの状態である場合を指定してスタイルを適用します。

■HTML


<a href="#">リンクテキスト</a>

■CSS


a:visited {
    color: navy;
}

a:hover(リンクにマウスを合わせた状態の文字色)

a:hoverは、aタグに対して要素に対してマウスがホバーした状態を指定してスタイルを適用します。

■HTML


<a href="#">リンクテキスト</a>

■CSS


a:hover {
    color: yellow;
}

a:active(リンクをクリックして離すまでの文字色)

a:activeは、aタグに対して要素がアクティブの状態の場合を指定してスタイルを適用させます。

MEMO
aタグでは、マウスを左クリックしてから離すまでがアクティブ状態となります。

■HTML


<a href="#">リンクテキスト</a>

■CSS


a:active {
    color: lime;
}

:nth-child(n)(親要素内のn番目の要素の指定)

:nth-child(n)は、親要素内のn番目の要素を指定してスタイルを適用させます。

例えば、以下の場合だと「1番目のpタグ」にだけcolor: red;が適応されます。

■HTML


<div>
<h1>見出し</h1>
<p>1番目のpタグ</p>
<p>2番目のpタグ</p>
<p>3番目のpタグ</p>
</div>

■CSS


p:nth-child(2) {
color: red;
}

:nth-of-type(n)(親要素内の同じ種類の要素の中のn番目の要素)

:nth-of-type(n)は、親要素内の同じ種類のn番目の要素を指定してスタイルを適用させます。

例えば、以下の場合だと「3番目のpタグ」にだけcolor: red;が適応されます。

■HTML


<div>
<h1>見出し</h1>
<p>1番目のpタグ</p>
<p>2番目のpタグ</p>
<p>3番目のpタグ</p>
</div>

■CSS


div p:nth-of-type(3) {
    color: red;
}

注意
:nth-of-type(n)は、親要素(divタグ)内にあるあくまでもpタグの中の3番目に対してスタイルを適用させるので、:nth-childとは違いh1タグは数えません。

:not(B)(B以外の要素の指定)

:not(B)は、親要素内の指定の要素(B)以外にスタイルを適用させます。

例えば、以下の場合だとpタグ以外の「h1タグとspanタグ」にcolor: red;が適応されます。

■HTML


<div>
<h1>見出し</h1>
<p>1番目のpタグ</p>
<p>2番目のpタグ</p>
<p>3番目のpタグ</p>
<span>spanタグ</span>
</div>

■CSS


div :not(p) {
    color: red;
}

:nth-child(n):nth-of-type(n):not(B)は、混乱しやすいのでしっかり整理しておきましょう!

リスちゃん

【脱初心者】CSSの擬似要素・擬似クラスを理解して表現の幅を広げるためのはじめの一歩|まとめ

本記事では、かけだしのWebデザイナー向けに「CSSの擬似要素・擬似クラスを理解して表現の幅を広げるためのはじめの一歩」を説明してきました。

擬似要素・擬似クラスが使えるようになるとデザインの幅がグッと広がり、コーディングの作業効率もアップさせることができます。

初心者が混乱しやすいところをピックアップしたので、わからなくなったときに参考にしてもらえると幸いです。

擬似要素・擬似クラスを理解して、Webデザイナーとしてレベルアップしていきましょう

SAYOKO.JP

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA