[CSS] clearfixの使い方を考える
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
現在のclearfix
以前は、IE6に対応させるためにソースがちょっと多かったですが、現在はかなりシンプルです。
.clearfix:after { content: ""; clear: both; display: block; }
これだけです。
これで、IE7以上の全てのブラウザに有効です。
clearfixの使い方
たまに、依頼先のソースが変だから修正してって依頼が舞い込んできたりします。
そういうときによくみかけるのが、floatさせた要素の下に空のdivでclass=”clearfix”っていうのがあります。
僕は個人的にこういうソースは大嫌いです。
floatを解除するために空のdivを置く意味がわかりません。
こういうことをすると、ソースが見にくくなり、修正もしにくくなります。
例えば下記のような感じです。
<div class="ul_left"> <ul class="float ns redarrow padl30"> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> </ul> <ul class="float ns redarrow padl30"> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> </ul> </div> <div class="clear"> clear both </div>
いかがですか?違和感がありませんか?
これは、実際にあった案件のソースです。
この場合、<div class=”clear”>の中にあるclear bothという文字はtext-indentで隠していました。
これを見た時は、さすがにがっくしきました。
全くサイトに関係ない文言を勝手に置き、それを見えなくしているのは制作サイドの手前勝手な都合でしかありません。
こういう場合、最悪のソースとしては下記の様になります。
<ul class="float ns redarrow padl30 clearfix"> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> </ul> <ul class="float ns redarrow padl30 clearfix"> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> </ul>
これでfloatは解除されています。
最悪、これで十分です。
もっとスマートに!
僕は基本的にclassをたくさんつけるのが好きではありません。
多くても、2〜3個です。
書籍などでは、パーツとして部品化して、それを組み合わせることで、目的のレイアウトにすることを推奨もしていますが、あまりなじめません。
大体使うパーツが決まっているわけだから、最初からそれに合わせて作ってしまう方が理にかなっていると思います。
部品化してしまうと、個別に対応するのにどんどんclassが増えていきます。
さて、先ほどのソース、僕のやり方だとこうなります。
<ul class="float_list"> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> <li><a href="#">横並びリンク</a> </li> </ul>
シンプルでしょ?
これだけで十分だと思っています。
必要なpaddingだとか、marginだとかは、このclassにしっかり設定してしまえばいいんです。
そして、clearfixは僕の場合、一個一個clearfixのところに追加していってます。
だから、clearfix部分だけは、ソースがごちゃごちゃになっている印象です。
実際、下記のようになっています。
.clearfix:after, .float_list:after { content: ""; clear: both; display: block; }
これは、例えなので2個しかありませんが、実際の案件では20近くはあります。
各classで改行しているので、そこまでぐちゃぐちゃというわけではありませんが、それぞれに:afterが付いているので、見にくいといえば見にくいです。
そのかわり、htmlのソースがシンプルになっているので、実際の修正とかは全然ラクです。
まとめ
マークアップは個人の自由なので、どのような方法でもいいですが、なるべく余計なものはなくしたいですね。
あまり人のものを批判したくないですが、たまーに、ほんとにたまーに、なんでこんなことしてんの?っていうソースに出会っちゃうんです。
そういう時は、シンプルにしているのも悪くないなと思いながら、修正してますw
clearfixなんて取り上げても、既にいろんなところで紹介されていますし、誰も見ないだろうけど、こうやるとclassを追加しなくてもいいんだよっていう事も覚えておいて損はないです。
ad
関連記事
-
[HTML] 初心者を脱却するためのHTMLの心構え!
デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ
-
[HTML]デザインは、やはり大切だった!
デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ
-
[CSS] animationを使ってみる!
色の変化をCSSのみで実装できる! CSS3のキーフレームアニメーションでは、JSで出来る、背景色
-
[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ
CSSセレクタとは? CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C
-
[WordPress] 管理画面にテーブル(WP_List_Table)を表示する
WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを
-
[CSS] フォームや登録の進み具合をCSSだけで表現する方法
フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います
-
[Dreamweaver] オプション領域を極める!テンプレート上級編
オプション領域は、難しい! これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹
-
[jQuery]背景画像にぼかしを入れるプラグイン
Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画
-
[jQuery] FlickerPlateを紹介します。
かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第3回]
ブログの存在すら忘れてました、僕です。 完全放置プレイだったこの連載?を再開しなきゃと思い、重