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

[CSS] clearfixの使い方を考える

公開日: : 最終更新日:2014/08/09 CSS, Web制作 , ,


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

関連記事

[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する

カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_

記事を読む

[CSS]印刷用CSSの設定方法

印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま

記事を読む

[CSS] CSSで作るリストのアイコン

CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現

記事を読む

[javascript] Google Maps javascript API v3の使い方(基本編)

Google Maps javaScript API v3とは Google Maps API V

記事を読む

[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)

いろんなことが出来るようになったv3 昨日、基本編を書きましたが、今回は応用編です。 v3に

記事を読む

[Dreamweaver] 便利な検索&置換

Dreamweaverの検索&置換は、便利な機能が満載! サイトを制作する上で厄介になってくるのが

記事を読む

[CSS] フォームや登録の進み具合をCSSだけで表現する方法

フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います

記事を読む

[HTML]デザインは、やはり大切だった!

デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ

記事を読む

[jQuery] 背景画像を画面いっぱいにするプラグイン

背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため

記事を読む

[jQuery] 実際の案件でよく使っていたプラグイン4選!

1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常

記事を読む

ad

Message

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

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。

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
PAGE TOP ↑

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