私がCSSを学び始めたのは比較的最近であり、同時にjQueryの学習も行っていた。
CSSもjQueryも似たようなセレクタを使えるため、この2つを同時に学習することはとても効率的だと思っていたし、それは今でも変わらない。
しかし、この二つにはやはり細かな違いがあり、それに気づかずに頭を悩ませてしまったことがあった。
それはCSSにおけるafter擬似要素だ。
この機能について大きな勘違いをしていたせいで、CSSにおけるとても重要なテクニックであるクリアフィックスを正しく理解するのに多少の時間を要してしまった。
after擬似要素はクリアフィックスに(絶対ではないが、ほぼ)必要であるため、まずはここから考えてみよう。
CSSもjQueryも似たようなセレクタを使えるため、この2つを同時に学習することはとても効率的だと思っていたし、それは今でも変わらない。
しかし、この二つにはやはり細かな違いがあり、それに気づかずに頭を悩ませてしまったことがあった。
それはCSSにおけるafter擬似要素だ。
この機能について大きな勘違いをしていたせいで、CSSにおけるとても重要なテクニックであるクリアフィックスを正しく理解するのに多少の時間を要してしまった。
after擬似要素はクリアフィックスに(絶対ではないが、ほぼ)必要であるため、まずはここから考えてみよう。
after擬似要素の仕様を理解する
リスト1のようなHTMLがあったとする。
リスト2のようにCSSを定義する。
これは期待通りの結果だ。
ただし、ここで注意しなければならないことがある。
それは"(追加)"がどこに追加されているかということだ。
#inner要素はブロックレベル要素であるため、この後に追加されたのであれば、ブラウザ上では改行表示されるはずである。
しかし、上記の結果では改行されていない。
つまり、"(追加)"は#innerの中の後に追加されたということだ。
擬似的にHTML表記するならばリスト3のようになる。
しかし、同時にjQueryを学んでいた私はここで大きな勘違いを犯した。
jQueryのafter()の仕様を理解する
jQueryのafter()は指定した要素の、文字通り後に要素を追加する。
例えば、リスト4のような記述をしたとしよう。
つまり#inner要素の後に追加されたということだ。
この結果をHTMLで表すとリスト5のようになる。
afterという言葉のニュアンスから、私はCSSのafter擬似要素の場合もリスト5のようになると勝手に思い込んでしまった。
身から出た錆ではあるが、紛らわしい名前のCSS仕様に対して若干の不満を持ってしまったのはしょうがないと言えるだろう。
結論はこうだ。
CSSのafter擬似要素はjQueryのafter()と同等ではない。
append()と同等である。
クリアフィックスを考える
上記のことを踏まえた上で、クリアフィックスへの応用を考えてみよう。
クリアフィックスが必要となるのは要素にfloatを指定した場合である。
それらはナビゲーションメニュー等でよく使われる。
具体的な例を上げてみよう。
リスト6とリスト7のようなHTMLとCSSを用意する。
よって、最後の項目である"投資家情報"の後でfloatを解除しなければならない。
手っ取り早いのはリスト8のようにHTML上にfloatを解除するための要素を追加してやることだ。
そこでクリアフィックスの登場だ。
floatを解除するための要素(リスト8で言うところの5行目)に相当するものをCSSのafter擬似要素で追加してやると言うものだ。
リスト9のようなCSSを用意しよう。
ただし、ここで一つ問題が出てくる。
.clearfixをどこに追加するかということだ。
この記事の最初を思い出して欲しい。
私は大きな勘違いをしていたため、リスト10のようにしてしまった。
afterという紛らわしい名前に惑わされてしまったが故だ。
リスト11のように、floatしている要素の親要素に.clearfixを追加するのが正解だ。
リスト1のようなHTMLがあったとする。
<div id="outer"> <div id="inner"> サンプル </div> </div>これに対し、"サンプル"というテキストの後に"(追加)"というテキストが表示されるようにしてみよう。
リスト2のようにCSSを定義する。
#inner::after { content: "(追加)" }ブラウザで見てみよう。
サンプル (追加)
と表示された。これは期待通りの結果だ。
ただし、ここで注意しなければならないことがある。
それは"(追加)"がどこに追加されているかということだ。
#inner要素はブロックレベル要素であるため、この後に追加されたのであれば、ブラウザ上では改行表示されるはずである。
しかし、上記の結果では改行されていない。
つまり、"(追加)"は#innerの中の後に追加されたということだ。
擬似的にHTML表記するならばリスト3のようになる。
<div id="outer"> <div id="inner"> サンプル (追加) </div> </div>CSSだけを学んでいたならば特に問題は無かったかもしれない。
しかし、同時にjQueryを学んでいた私はここで大きな勘違いを犯した。
jQueryのafter()の仕様を理解する
jQueryのafter()は指定した要素の、文字通り後に要素を追加する。
例えば、リスト4のような記述をしたとしよう。
$(function() { $("#inner").after("(追加)"); });ブラウザで見てみると以下の様な結果が得られる。
サンプル (追加)"サンプル"の後に改行が入っているのがわかる。
つまり#inner要素の後に追加されたということだ。
この結果をHTMLで表すとリスト5のようになる。
<div id="outer"> <div id="inner"> サンプル </div> (追加) </div>私が犯した勘違いとはまさにこの部分だ。
afterという言葉のニュアンスから、私はCSSのafter擬似要素の場合もリスト5のようになると勝手に思い込んでしまった。
身から出た錆ではあるが、紛らわしい名前のCSS仕様に対して若干の不満を持ってしまったのはしょうがないと言えるだろう。
結論はこうだ。
CSSのafter擬似要素はjQueryのafter()と同等ではない。
append()と同等である。
クリアフィックスを考える
上記のことを踏まえた上で、クリアフィックスへの応用を考えてみよう。
クリアフィックスが必要となるのは要素にfloatを指定した場合である。
それらはナビゲーションメニュー等でよく使われる。
具体的な例を上げてみよう。
リスト6とリスト7のようなHTMLとCSSを用意する。
<div id="nav"> <div class="menu-item">HOME</div> <div class="menu-item">会社概要</div> <div class="menu-item">投資家情報</div> </div>
.menu-item { border-right: 3px solid #c55; float: left; margin: 5px; padding-right: 5px; }これらをブラウザで見ると以下の様な結果が得られる。
このメニュー単体で見ると、これだけで問題が無いのだが、実際にはこのメニューの後に要素が続くことがほとんどだ。
よって、最後の項目である"投資家情報"の後でfloatを解除しなければならない。
手っ取り早いのはリスト8のようにHTML上にfloatを解除するための要素を追加してやることだ。
<div id="nav"> <div class="menu-item">HOME</div> <div class="menu-item">会社概要</div> <div class="menu-item">投資家情報</div> <div style="clear: both;"></div> </div>しかしこれでは無駄な要素がソース上に存在するので美しくない。
そこでクリアフィックスの登場だ。
floatを解除するための要素(リスト8で言うところの5行目)に相当するものをCSSのafter擬似要素で追加してやると言うものだ。
リスト9のようなCSSを用意しよう。
.clearfix::after { clear: both; content: ""; display: block; }これを使えばいつでもどこでもfloatを解除するのは自由自在だ。
ただし、ここで一つ問題が出てくる。
.clearfixをどこに追加するかということだ。
この記事の最初を思い出して欲しい。
私は大きな勘違いをしていたため、リスト10のようにしてしまった。
<div id="nav"> <div class="menu-item">HOME</div> <div class="menu-item">会社概要</div> <div class="menu-item clearfix">投資家情報</div> </div>もちろんこれではfloatは解除されない。
afterという紛らわしい名前に惑わされてしまったが故だ。
リスト11のように、floatしている要素の親要素に.clearfixを追加するのが正解だ。
<div id="nav" class="clearfix"> <div class="menu-item">HOME</div> <div class="menu-item">会社概要</div> <div class="menu-item">投資家情報</div> </div>これにより、"投資家情報"の後にfloatを解除するための要素が追加され、期待通りの結果を得ることが出来る。
コメント