Web Design - MID [MS-K's Irresponsible Diary]

2007年05月27日(日)

clearfixハックは本当に必要なのか

いわゆるclearfixハックネタなのですが、あるブロック内にfloatさせた要素を並べると、状況によってレイアウトが崩れるわけです。こいつを綺麗に整えるためにはfloatさせた要素の後でclear:leftなどで一旦解除させる、というのがclearfixの原点のように思います。
最近またこの手のネタがはてブで盛り上がっているようです。

floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。

少し遡って

解決法は2つある。ひとつは、「原因」で指摘している回り込みの解除を用いる方法（→サンプル2）。ただ、「HTMLは論理構造を記述し、見栄えはスタイルシートで定義する」という本来のあり方からすると、HTMLの中にレイアウトを制御する以外まったく意味を持たない要素が入り込んでくるのはやや気になる。もうひとつは、全体を囲むボックスに高さを与える方法（→サンプル3）。ただし、コンテンツがテキスト主体で、高さを特定できない場合はこの方法を使えないのが難点である。

私といえばclearfixは実は一度も使ったことがなく、全て以下の方法で回避しています。

floatを内包する親ブロックにwidthとoverflow:autoを指定する。
詳細は「http://ms-k.serveblog.net/archives/152-CSS.html」に書いてあります。

HTMLソースとCSSは上記サイトから拝借しました。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<link rel="stylesheet" href="test.css" type="text/css" />
<title>クリアフィックスの実験</title>
</head>

<body>

<div class="column">
<div class="box-A"> </div>
<div class="box-B"> </div>
</div>
<div class="column">
<div class="box-A"> </div>
<div class="box-B"> </div>
</div>

</body>
</html>

body {
	background-color: #ffffff;
}
.column {
	width: 125px;
	margin-bottom: 5px;
	/* ↓これ */
	overflow: auto;
}
.box-A {
	width: 60px;
	height: 60px;
	background-color: #ff0000;
	float: left;
}
.box-B {
	width: 60px;
	height: 30px;
	background-color: #00ff00;
	float: right;
}

以下、レンダリング結果

Firefox2

Opera9

Safari1.3.2

IE6

IE7

Mac IE5

あまりにもclearfixが有名なので若干自信がないのですが、
それって要らないんじゃない？
と思っているのって私だけ？
でも、Lucky Bagさんの突っ込みも無いようだし、ここまで書いてさらに自信が…
他に何か盲点があるのかなぁ。

20:45 追記
うわっ。3ping.orgのwuさんからコメントいただきました。
MacIEがポイントですか。やっぱ。
以前、身内から指摘されたこともありまして、うすら予想はしていました。
上記の例に限っては問題無い（スクリーンショット追加しました）ようですが、状況によってはスクロールバーが出ることがあるようですね（シカトモードに入ってますけど）。

それを踏まえても今のところ自分的にはclearfixは不要かと判断しています。
今さらMacIEとつきあうにはさらなるとんでもない泥沼が待ち受けていますから

投稿者 MS-K in Web Design at 11:06 | コメント (9) | トラックバック (0)

このエントリーに定義されたタグ: css, Firefox, IE6, IE7, Opera, Safari

2007年04月19日(木)

画像の使用を極力控えてかっこいいCSSデザインをやってみようにエントリ

画像の使用を（略）CSS大会についてはてブで盛り上がっているのですが、私もちょこっとエントリしてみました「画像を一切使用しない部門」です。

それにしても、ベースとなるHTMLファイルが公開されたのが4/11ですから、エントリ数を見るとやはり結構な盛り上がりですね
管理人さんのテストエントリを除いて既に22エントリも集まってます。

誰か知り合いで参加する人いたら報告よろしく。

投稿者 MS-K in Web Design at 11:02 | コメント (0) | トラックバック (0)

このエントリーに定義されたタグ: css, fun, テンプレート

2007年03月24日(土)

大藤幹さんのCSSセミナー行って来ました

昨日、アップルストア札幌で行われた「CSSのハードルとその越え方」セミナーに参加しました。
大藤さんの事前の話では「20人程度で行う小規模なものなので気軽に来てください」とのことでしたが、期待している人はやはり多かったようです。ぱっと見、5～60人くらいは参加していました！

内容はこれも大藤さんが事前に「どちらかというと初心者向けの内容になると思います」とおっしゃっていた通りのもので、私にとってはほとんどのことが知っている話でしたが（って大藤さんの著書で勉強しているので当たり前ですね）、説明がわかりやすく、理解しやすいものだったので、復習になりました。
いいセミナーだったと思います。
これが無料ですから、アップルストアも捨てたもんじゃあありませんね。

ところでclearfixハックの件、私の質問がわけわからん方もいたかもしれませんので、実験したいと思います。

height指定のないブロック（parentblock）内にfloatした画像を配置すると、parentblockの高さは内容のテキストの高さしかなく、画像ははみ出します。
この状態はparentblockがoverflow: visible（初期値＝無指定）になっているため、正常な状態です。

<div id="parentblock" style="border: 1px solid #ff0000;">
<img width='200' height='150' src="/uploads/img/sample.jpg"
alt="float:leftのサンプル画像"  style="float: left; /">
あいうえおかきくけこ
</div>

あいうえおかきくけこ

parentblockにoverflow: auto;width: 100%;を指定してやります。
widthについては指定すればなんでもいいはず。
IDがかぶるため、以下ではparentblock2とします。

<div id="parentblock2" style="border: 1px solid #00ff00; overflow: auto;width: 100%;">
<img width='200' height='150' src="/uploads/img/sample.jpg"
alt="float:leftのサンプル画像"  style="float: left; /">
あいうえおかきくけこ
</div>

あいうえおかきくけこ

過去に「float させた要素を内包したボックスの高さ」で書いていますが、実はこれLucky bagさんで知った方法だったりします。
IE7は未検証。

あと、所持している大藤さんの書籍2冊を密かに持っていって、最後にサインしてもらいました
改めてお礼申し上げます。

投稿者 MS-K in Web Design at 12:08 | コメント (3) | トラックバック (0)

このエントリーに定義されたタグ: css

2007年03月03日(土)

IE7、ひどすぎるなあ

しかしあれですね、本日ようやく決心してIE7をインストールしましたが、CSSの解釈ダメダメです。
このサイトもかなり横広がりになっているわけでして、近いうちにIE7だけCSSを別途用意しようと思います。　

ググるといろいろCSSハックが存在していますし、それもいいとは思うのですが、
私としては根本的に切り分けする方が見通しがいいし、将来的な修正もしやすいと思うので、別途CSSを用意する派です。
ここの場合、

<link rel="stylesheet" type="text/css" href="http://ms-k.serveblog.net/serendipity.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="/templates/nm/msie.css"><![endif]-->

として、IE全般を切り分けていますが、ここにIE7を追加するわけです。

<link rel="stylesheet" type="text/css" href="http://ms-k.serveblog.net/serendipity.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="/templates/nm/msie.css"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="/templates/nm/msie7.css"><![endif]-->

で、関係無いですけど、ここではソース表示の際はいつも < と > を変換面倒くさいので全角の＜と＞にしていましたが、今日は気が向いたので実態参照してみました。やっぱその方がコピペはしやすいですよね。わかってたけど

投稿者 MS-K in Web Design at 20:32 | コメント (0) | トラックバック (0)

このエントリーに定義されたタグ: css, IE7

2007年03月01日(木)

北海道旅行に出かける前に

ひとまず抜け出しました（笑）
← 結果。
後送りにした作業の続きがまだ今月一杯ありますが、まずは安心。

で、今はまだ旅行シーズンではありませんが、これから北海道に来ようと目論んでいる方は「北海道旅行ナビ」が役に立つはず。
観、食、買のカテゴリごとに各地の情報が登録されており、これからも進化していくはず。

サブコンテンツの「北海道ルートマップ」では、ものがものなのでほとんどフルFlash状態ですけれど、北海道の主要都市間の国道などの移動距離と移動時間がわかりやすく表示されるので、レンタカーでの観光ドライブ（結構多いそうです）の際にきっと役に立つと思います。
もちろん北海道に住んでいる人がドライブの際の参考にしてもGOOD
環境によっては少し重いかもしれません…

こちらもこれから進化する予定。

投稿者 MS-K in PHP, Web Design at 11:39 | コメント (2) | トラックバック (0)

このエントリーに定義されたタグ: fun, Internet, MySQL, PHP, 仕事, 北海道

» 次のページ

(ページ 2/5, 合計 25 エントリ)

« 前のページ