Lucky bag::blog: 2007年05月アーカイブ

月別アーカイブ 2007年05月

前後の月

俗に言う clearfix と言われるコードのバリエーション色々

この記事が属するカテゴリー: CSS

clearfix ネタに乗っかってみる。

.clearfix:after {
  height: 0;
  visibility: hidden;
  content: ".";
  display: block;
  clear: both;
}
.clearfix {
  _height: 1px;
  min-height: 1px;
  /*￥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

ホップ本でもうーたんが解説してるんだけど、構造に手を加えずに float を clear させるためのいわゆる clearfix ってやつ。結構色々なサイトで紹介されているのを目にすると思うけど、最初の content 生成して clear させる部分の規則集合はほぼ一緒だったりする。だけど、その後（上記コードの強調部分）ってのは結構色々とバリエーションがあったりするんで、自分が知っているパターンをいくつか紹介してみる。

それぞれの説明やどれが良いとかは省略。そのコードを説明しているサイトにリンクしておくんで、興味があるようでしたらそちらを参照してください。ちなみにリンクしたそのサイトがそのコードの orgin ではないかもしれません。以下の全てのコードは :after 擬似要素使って content 生成する規則集合部分は省略（つまり、上記コードの強調部分のみという事です）。あと、あくまで便宜上セレクタを .clearfix としているけど、使う場合は対象セレクタに適宜置き換えて適用させるのが吉。

xmlns 属性を使ったパターン

属性セレクタを使って IE6 以下に display:block 読み込ませないようにしている。

CSS clearfix

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

IE7 向けハックを使ったパターン

*:first-child+html が IE7 しか読み込まないことを利用している

ClearFix - CSS - Snipplr


/* WinIE7 only */
*:first-child+html .clearfix{
  height:1%;
}

/* WinIE6 and below */
/*\*/
* html .clearfix{
  height:1%;
}
/**/

/* MacIE only */
/*\*//*/
.clearfix{
  display:inline-table;
}
/**/

inline-table を使ったパターン

inline-table の指定はマック IE 向け。ひとつ前のやつは inline-table をマックにのみ読み込ませているけど、こっちは逆で最初に inline-table の指定を読み込ませて、その後にマック以外に block としている。

IE7 display fix | drupal.org

.clearfix {
  display: inline-table;
  min-height:1%;
 }
/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%;
 }
.clearfix {
  display: block;
 }
/* End hide from IE-mac *//

zoom を使ったパターン

ちょっと番外っぽいけど、IE 向けに zoom プロパティを利用する。valid じゃなくなるんで、それが嫌ならコンディショナルコメントとかで別にリンクした方が良いかもしれない。

Clearing floats without structural markup in IE7 | And all that Malarkey

.clearfix {
  zoom: 1
}

いくつか書き出してみて気づいたけど、結構きりがない。とりあえずここまで。

2007-05-27T01:39:02+09:00 | コメント (1) | トラックバック (1) |

第二子が誕生

この記事が属するカテゴリー: Misc

非常に私事なご報告なんですけれども、第二子が誕生しました。「俺のベイビー」（by 真木蔵人）は 21日の朝に予定日より一週間遅れて無事に生まれました。やっぱりと言うか何というか、第一子の時ほどの大きい感動があったかと問われれば、まあそこは、ほら、あれでしょ？的に濁したくなる感じではあるのですけれども、とりあえずは無事に生まれて良かったです、はい。後は、明らかにワーキングプアに僕まっしぐらな現実をどうにかしなければいけないという命題が残っています。

そうそう、今回とても不思議だったことは、最初に子供が出来たことを感じ取ったのが、当時4歳になったばかりだった長女だったってこと。母親の絵を描いて、お腹の所にぐるぐるっと黒い丸を描いて「これ赤ちゃん」って。カミさんと二人してのけぞって、調べてみたら本当だったってゆう。ほんと子供は不思議だなあ。

2007-05-22T23:28:58+09:00 | コメント (18) | トラックバック (0) |

Hop or die! @ 六本木

この記事が属するカテゴリー: Misc

もう参加された方々からレポートなんかも書かれてたりしますが、5 月 3 日に iwaim さんの馴染みのお店である六本木のベルギービール専門店「BELG AUBE（ベル･オーブ）」にて行われたホップ本出版記念にかこつけた飲み会に参加しました。参加というか誘っているいる方ですが。

参加者

そもそもは、ホップ本も無事出版できたんで次はやっぱ出版記念パーティーっしょ？っていう流れから、どうせならお会いしてお話したい webdev 方面の方々も誘おうってな感じで、モリモリと盛り上がってゴールデンウィークに開催！ってなった訳で。当然ながら参加者全員のブログは購読させて頂いているんで、お会いするのが非常に楽しみでした。

当日の流れ

新宿にて著者 3 人で 0 次会。感慨深げに語り合う。（エロ話あり）
六本木に向かうべく大江戸線に乗るが、何故か新宿駅に舞い戻る（謎）
著者 3 人が遅れるという大失態。ごめんなさい。
いやー、まあビールがウマス。マジで。
何故かみんなでサイン会。
kotarok さん遅れて登場。
ここには書けない毒 Talk。楽しい。
川島さんと木達さんがお互い頼んだビールを間違って飲んでいたことを飲み終わった頃に気づく。
数々の名言が発せられる。（ケツは飾れない etc）
ドメイン名由来のお話。オチは当然木達さん。
恥ずかしい自分の過去を無駄にバラす。
名残惜しいけど時間が来たので解散。
katsuo さんから「声がいいっすね」と言われて妙に照れる。
goya さんが寝過ごして東武動物公園まで行ってないか心配しながら帰途につく。

やっぱ、リアルに会ってお話するってのはすんげぇ刺激になった。さて次は巣鴨か！？（謎）

2007-05-06T22:05:24+09:00 | コメント (6) | トラックバック (0) |

Lucky bag::blog