web.londoner25.net

今まで自分はfloatのクリアをする場合、一般的なclearfixのコードの冗長さが嫌いで、overflow: hiddenすることが多かったのですが、それでは印刷する場合に不具合が出たり、要素をボックスの外にはみ出させたい場合にはみ出した部分が表示されなくなってしまう不都合が生じるので、最適な方法は何かと考えていました。

以前から知ってはいましたが、冗長なコードとそもそもclass=”clearfix”自体が好みではなかったので、知識として把握していただけだった現在のブラウザ事情に最適化されたclearfixを採用することにしました。

一般的な前時代的なclearfixは以下のように冗長でちょっと気持ちの悪いコードです。
（注：下記以外にも違う書き方はあります）

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

前時代的なclearfixは古すぎるブラウザ（ネスケやIE6未満のもの）も対象にしているせいでこんなに冗長になっています。IE6以降とモダンブラウザのみに対象を絞れば以下の簡潔なコード（ハック含む）で済むようです。

詳しい解説は引用元を参照してください。引用なので原文のままにしており、前時代的なものとはクラス名が違うことにご注意ください。
上記のコードでIE6以降のブラウザやモダンブラウザはカバー出来ていますのでこのコードで十分です。
現時点では一番リスクが少ない方法と言えるかなと思います。

とはいえ、モダンなclearfixでもハックを使っているように、完璧なclearfixの仕方というのは現状存在しないので、clearfixを使うか、overflow:hiddenを使うかは好みの問題と言えそうです。
overflow:hiddenはclearfix以外にもコーディングのディティールに関する問題で使い勝手のいい働きをしてくれるので、割と好みですし、使い時さえ間違わなければclearfixの代替方法として使えると思っています。

clearfixの方法の一つとしてメモを残しておきます。

このサイトをWordPress 3.0にアップグレードし、このブログを作って以来悩み続けていた問題がようやく解決しました。
解決したので、今後この情報を探すことはないでしょうが、念のため備忘録として残します。

参考サイトと大まかな手順は以下の通りです。

• http://blog.dembowski.net/2010/06/09/google-xml-sitemaps-and-wordpress-multisite/

1. プラグインを編集
2. .htaccessにrewrite ruleを記述
3. プラグインを有効にして、xmlファイルのありかを指定

//Check for 3.0 multisite, NOT supported yet!
//if((defined('WP_ALLOW_MULTISITE') && WP_ALLOW_MULTISITE) || (function_exists('is_multisite') && is_multisite())) {
//if(function_exists('is_super_admin') && is_super_admin()) {
//add_action('admin_notices',  array('GoogleSitemapGeneratorLoader', 'AddMultisiteWarning'));
//}
//return;
//}

RewriteRule ^sitemap.xml sitemap-%{SERVER_NAME}.xml [L]
RewriteRule ^sitemap.xml.gz sitemap-%{SERVER_NAME}.xml.gz [L]

後はブラウザで表示されるか確認し、Googleウェブマスターツールに登録すれば全て完了です。

オライリーのJavaScript: The Good Partsをみんなで読んで勉強する、JS読書会に参加してきました。
続きを読む

先月参加したドットコーダーのHTML5のワークショップで自分たちのグループがマークアップしたものを解説（？）します…。

3〜4人で1グループを構成し、全6グループがグループコーディングを行い、自分たちはFグループでした。（サンプルはCSSも組まれているのでwebkit系のブラウザで合わせてご覧下さい）
自分たちのグループはまず一通りざっとマークアップしてから見直して最適化していこうとしていたのですが、1時間少々の制限時間では思った通りのフローで作業を行うことができませんでした。。。

続きを読む

大阪のコーダー（じゃない人も歓迎の）勉強のドットコーダーに参加してきました！
今回は、HTML5についてワークショップ形式で開催されました。 続きを読む