CSS脱初心者への道！疑似クラスと疑似要素を理解すると表現が広がるよ！

ほんと、便利なんですよ。

ぶっちゃけCSS3って最高やな！と思うんですが、ある意味それ以上に疑似クラスって奴を理解して使えるようになると、今までイライラしてたこととか、やりたかったコトとかが可能になるんですよね。

次回のブロネクがブログの見た目デザインについてなので、それに引っかけて、疑似クラス・疑似要素を理解しちゃうと、かなり捗るし、いろいろ表現が増えますので、ちこっと紹介したいと思います。

とにかく、疑似クラス・疑似要素ってなんだろうか？？

CSSまったくわからん！という方にはさっぱり難しいかも知れませんが。個人的に一番有名な疑似クラスは

リンクタグのa

a:hover
a:visited

この:hoverや:visitedの部分が疑似クラスです。

aタグ（アンカー要素）はリンクの色や見た目を修飾するためのモノですが、リンクの中でもホバー状態のとき、訪問済みリンクの時と、同じaタグでも条件によって別々のCSSを当てるコトが出来るんです。

a 要素 – HTML | MDN

a {color:red;}
a:hover {color:green;}
a:visited {color:blue;}

注：コメントにて指摘していただきました。

正しくはこちらです。

a {color:red;}
a:visited {color:blue;}
a:hover {color:green;}

CSSは順番が後に書かれているモノほど優先順位が高い（先に書かれたモノから読み込まれ、後のモノに上書きされる）ので、visitedよりもhoverを後に書く必要があります。

こういう風にCSSを描けば、まだ訪問してないリンクは赤。マウスカーソルを乗せると緑に、そして、一度訪問したリンクに関しては青に、同じaタグですが、条件によって違うCSSを当てるコトが可能になるんです。

もちろん、ホバーしたときだけに下線をだす。とか、訪問済みの時だけ背景色を付ける等の細かい調整も行えるので、とにかく知らないと困るんですよね疑似クラス。

ざっくりとまとめますと

条件によって違うCSSを当てるコトが可能になるモノ、それが疑似クラス

ちなみに、疑似クラス・疑似要素に関しては、サポートしてない（上手く表示されない）ブラウザもありますので、その点は自己責任でお願いします。

疑似クラス・疑似要素なら出来てしまうこと

• 前後に何かくっつける
• リストの装飾で特定行だけ指定できる
• floatの解除

これだけ知っていればかなり助かります。

前後に何かくっつける

疑似クラスや疑似要素でググれば、疑似クラス・疑似要素自体はいっぱいあるのですが、デザインで使えそうなモノは、まずは

:beforeと:after

ではないでしょうか。

大抵この「:beforeと:after」を使うときにセットになるのが「content」というプロパティです。このさいしっかりとここら辺をおさらいしておきましょう。

:before、:after擬似要素 – 擬似クラスと擬似要素 – スタイルシート入門

content－スタイルシートリファレンス

:beforeと:afterで具体的にデザインできること

いろいろありますが、代表的なのは吹き出しデザインや、擬似的立体デザインでしょう。

よく見るこういうような吹き出しデザインも、疑似クラスの:afterを使って修飾されているモノが多いと思います。

CSSだけで吹き出しを作ってみる 三角の作り方｜mattintosh note

僕の理解では、「四角いもの」の後に「三角」を付け足してるという理解です。三角を付け足すのに:afterの疑似要素を使ってるんですね。

三角をつくるのはborderプロパティーが使われています。

.fukidashi {
  background:#8bcdba;/*四角部分の色*/
  position:relative;/*三角部分の位置制御のため*/
  padding:.3em;/*四角内側の空白部分制御*/
  height:1em;/*四角の高さ*/
  display:table;/*四角の横幅を成り行きに*/
}
.fukidashi:after {
  content:"";/*空の要素を挿入*/
  border:8px solid transparent;/*三角部分の大きさを制御。まずはボーダーすべてを透明に*/
  border-top-color:#8bcdba;/*ボーダーの上にだけ色を付けて三角を出現*/
  position:absolute;/*三角部分の位置を絶対値で指定*/
  bottom:-.8em;/*三角の上下の位置*/
  left:.2em;/*三角の左右の位置*/
}

<div class="fukidashi">吹き出し！</div>

僕がざっくり描く場合はこんな感じです。四角の後に三角を描画して、三角の位置をいい感じの場所に持って行っているイメージ。

もちろん:afterを使わなくても出来るのですが、:afterを使って、positonで三角を制御した方が分かりやすいと思ってます。

「content」というプロパティに空の要素を放り込むのが最初は意味がわからないかも知れませんが、空のdivなんかを作っているイメージで最初はいいのではないでしょうか。厳密に言うと違いますし、空のdivは基本NG（後述）です。

ボーダーで三角を作るを応用すると、擬似的に立体感を演出することも可能です。

アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン :. SQUEEZE .:

憶えておくといろいろ出来ますね。リボン風デザインとか、めくれ風デザインとかよく見かけますよね。

frasmでもこの「:beforeと:after」を使って見出しを装飾してます。

よく「ｈ２」が見えてますよ！と言われるｈ２タグ風の文字も

h2:before {
  content:"<h2>";
}
h2:after {
  content:"</h2>";
}

こうやってむりくり出現させてます。わざわざ。

ｈ3の前の吹き出しも

.post-entry h3:before {
  font-family: 'webフォント';
  content: "c";
  padding: 0;
  color: #8bcdba;
  margin: 0;
  font-size: 1em;
  position: relative;
  top: -13px;
}

webフォントで描画して、位置を調整してます。

CSSで絵を描く！？今日から作れる達人のコツをご紹介 | KAYAC DESIGNER’S BLOG – デザインやマークアップの話

カヤックさんのブログなんかでもなかなか愉快な見出しを使って他と差別化を図ってますね。

もちろんこれも「:beforeと:after」をつかって、前後にくっつける技の応用です。

リストの装飾で特定行だけ指定できる

これはもう図で見てもらった方が早いのですが

こんな感じで、リストを使ってメニューとかを作る場合、最後とか、最初のボーダーが邪魔になるコトがよくあります。

こんな時、たとえば最後の行だけborder:noneを指定できたら、一撃で問題が解決するよね！

:nth-child()疑似クラス (E:nth-child(n))｜セレクタ｜CSS HappyLife ZERO

そうです、可能なんです。

たとえば一番最後のliに対して条件を設定したい場合

li:last-child

こんな感じで、:last-childを使えば最後のliに対してだけ別のスタイルシートを当てるコトが出来ます。

他にも

:first-child　一番最初の行だけ
:nth-child(n)　n番目の行だけ
:nth-child(2n)　奇数行だけ

等の特定行を指定する疑似クラスが存在します。

奇数行だけ背景色を付けるとか、listが長い場合見やすくてイイデスヨね。

もちろんリスト以外にもpにも連続する他のタグにも当てるコトが出来ます。

応用して

他にも、リストを使ってメニューにアイコンを出したいときとかもあると思います。

こういう装飾にも、疑似クラスは役に立ちます。

<ul id="menu">
    <li class="icon_a list"></li>
    <li class="icon_b list"></li>
    <li class="icon_c list"></li>
    <li class="icon_d list"></li>
</ul>

こんな感じで、リストにクラスを振り分けて対応するのが基本というか、正道だと思うのですが、クラスを振り分けなくとも

ul#menu li:nth-child(1) {}
ul#menu li:nth-child(2) {}
ul#menu li:nth-child(3) {}
ul#menu li:nth-child(4) {}
ul#menu li:nth-child(5) {}

特定の行だけ狙い撃ちで指定することも出来ます。どちらが優れているとは言えないのですが、こういう方法もあると憶えておくと、捗ります。

floatの解除、もしくは高さの成り行き

最後に、CSSでブログやサイトの形を形成するときに避けては通れないチップスです。これも知っておかなければ不用意な見た目の崩れを防げませんね。

floatを解除する方法のまとめ: 小粋空間

＜div＞の中に＜div＞をいれる状況ってかなりあると思うのですが、この中にいれた＜div＞に対してfloatをかけたとき、親＜div＞が高さを算出してくれなくて泣いた経験、おそらく誰にでもあるよね！あるよね！

仕方なく<div style="clear:both;"></div>的な空divを放り込んで何とかするみたいな人、多いと思います。
まあこれで解決するので、それでいいじゃん！という人には説明しても無駄かも知れませんが、綺麗なソースを保つためには、空要素（追記有り）は基本NGとされています。そんなのこだわらない人はまあ、一応問題は解決するのでいいんじゃないですかね。

追記：空要素という表現では閉じタグのないimgやbrをさしてしまいます。ココで言っているのは（ <div></div>とか<p></p>等の ）閉じタグのあるもののなかが空になっている要素のことを指してます。

どのみち理屈がわからない方は、空要素はダメと盲目的に憶えてしまった方がいい気がしています。当然<p></p>こういう空のpとかもダメです。

どうして空の div は使わない方がいいのですか？ – Yahoo!知恵袋

まあ、なんていうか、そういうモノで、そういうルールでブラウザや検索エンジンがソースを見ているから、ルールに則ろうね！という話しです。無視するのは勝手だけど、イエローカードとか出されても仕方ないよ！と、そういう話しです。

じゃあどうすればいいのか！というと

フロートを解除して、高さを成り行きで算出したい親divに対して、class="clearfix"を付けます。

そして、CSSはこう書きます。

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}
.clearfix {
  zoom: 1; /* for IE6/7 */
}

これで空のdivを使わずにフロートを解除して、親divの高さを成り行きで算出できます。

まとめ

そもそもこれからCSSを勉強したいという方には、かなりの勢いで意味がわからないコトがほとんどだと思います。

CSS超初心者にむけて書いた記事もありますので、よければ参照を。そして、ごりごりブラウザの要素を検証等を使って弄ってみることをオススメします。こればっかりは手を動かし必要なタグを憶えていくしかないので。

ブログやサイトの見た目を改造しようとするとどうしてもCSSに行き着いてしまうので、怖がることなくとにかくソースを見ながら格闘するコトが重要だと思ってます。もちろんコードの書き換えは慎重に。いつでも元に戻せるようにバックアップを取ってからお試し下さい。

CSSでいろいろ変更をかけたいんだけど、昔上手くいかなかった。等の苦い経験をお持ちの方は以下の記事をしっかりと読んでみることをオススメします。

少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス

CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ

なんとなく動くからという理解では、同じ事を再現するために、同じだけ試行錯誤をしなければいけなくなります。
しっかりとCSSのルールや挙動を把握すれば、頭の中でデザインを組み立てるコトも出来るようになります。

疑似要素、疑似クラスに関しては知らなくても同じようなことは力業や手間をかければ出来ます。

同じ結果を得るのなら、簡単に、そして保守のしやすい方法を知っておくことは、ウェブマスターなら必要な要件だなぁと僕は考えます。

とりあえず上に書いてあるモノだけでも憶えて実装してみると、今までのイライラとか、こうなればなあが実現して、CSS自体も取っつきやすくなればいいなと思っております。

よ。

文：シンタロヲフレッシュ

はてブ

pocket

twitter