ネタ元の記事は以下。
firefoxでmargin-bottomがmargin-top | 乱雑モックアップ

この記事で紹介されていた clearfix は以下ようなもの。
僕はこの指定から height:0; を抜いたものを使っていました。

.clearfix:after{
content:'';
display:block;
clear:both;
height:0;
}
.clearfix{
/zoom:1;
}

そして、解決方法として教えてもらったのが hail2u.net さんのデモ。
firefoxでmargin-bottomがmargin-topになったりするのを回避する

この解決方法は、height:0; を height:0.01px; にしています。

.clearfix:after{
content:'';
display:block;
clear:both;
height:0.01px;
}
.clearfix{
/zoom:1;
}

この記事の公開時点（2012年2月1日）の最新版 Firefox 10.0 でも 3.6 と同様の挙動で、hail2u.net さんの方法で解決できます。

アレンジ版作ってみました

height:0.01px; の指定で解決できますが、他の解決方法がないかと試してみました。
なお、zoom:1; の部分は共通なので、以下のコードでは省略しています。

検証ブラウザは以下の通り。
※ Mac: Mac OS X Lion、Win: Windows 7

• Firefox 3.6.25 (Mac, Win)
• Firefox 4.0.1 (Mac, Win)
• Firefox 9.0.1 (Mac, Win)
• Firefox 10.0 (Mac, Win)
• Chrome 16.0.912.77 (Mac, Win)
• Safari 5.1.2 (Mac, Win)
• Opera 11.61 (Mac, Win)
• Internet Explorer 8 (Win)
• Internet Explorer 9 (Win)

Internet Explorer 6、7 は関係しない変更なので、検証はしていません。
また、検証したのは Firefox の4つのバージョンのみで、バージョン 5 〜 8 では未検証です。
リリース直前だったので、バージョン 9.0.1 と 10.0 で検証していますが、これに深い意味はないです。

元記事コメント欄版

元記事で、.clearfix:after に overflow:hidden; を指定すれば、height:0; の指定は必要なくなるとのコメントが書かれていたので試してみたところ、問題なく動作しました。
また、overflow:auto; を指定してもうまくいきました。

.clearfix:after{
content:"";
display:block;
clear:both;
overflow:hidden;
}

この2つは、「clearfix を使わずに float を解除する」みたいなやつと同じってことですかねってことで、深く追ってません。

height:0; を別のプロパティに変えてみた版

clearfix のバリエーションのうち、.clearfix 側に min-height:1%; って使ってたなーと思って試したらうまくいっちゃった版。

.clearfix:after{
content:"";
display:block;
clear:both;
min-height:1%;
}

visibility:hidden; など他のプロパティも試してみましたが、うまくいかず。
複数のプロパティの組み合わせでうまくコントロールできるかもしれませんが、コードがどんどん長くなりそうだったので、このパターンはここまで。

display:block; を違うものにしてみた版

元記事で .clearfix 側に display:inline-block; を指定すると直ると書かれていました。
確かに変なマージンは取れましたが、これはこれで違う余白の問題が出る可能性高いので、あまり使いたくないかなと。
ということで、1つ前のパターン同様、.clearfix:after のほうに指定してみたところ、期待通りの動作になりました。

.clearfix:after{
content:"";
display:inline-block;
clear:both;
}

また、display:table; or display:inline-table; でもうまくいきました。
display:table; のほうは、A new micro clearfix hack – Nicolas Gallagher と同じような感じになりました。
display:inline-table; はなんとなくやってみたら効いてくれた程度のものです。

まとめ

行数（覚える量）が増えずに意図した挙動をしてくれるということで、display:inline-block; を指定する版をしばらく使ってみようかなと思います。
一番コード量が少ないのは display:table; ですが、なんとなく気持ち悪いので。

ということで、以下のコードが現時点でのオレオレ clearfix になりました。

.clearfix:after{
content:"";
display:inline-block;
clear:both;
}
.clearfix{
/zoom:1;
}

なお、Firefox 2 では、display:inline-block; に対応していないので、上記の指定ではマージンの挙動がコントロールできません。要件に組み込まれている際にはそのまま使わないように注意してください。

min-height:1%; のほうなら大丈夫みたいですが、Firefox 2 は、2008年末で開発とサポートを終了しており、アップデートできない場合は他のブラウザを使用するようアナウンスしているので、対応することはないと思います。

ブラウザの種類、バージョンでうまくいかなかったり、新しい解決方法を見つけた方は教えてください。

関連投稿

• display: inline-block を使う（修正版）
  category: CSS tags: CSS+tips.
• display:inline-block; を使う
  category: CSS tags: CSS+tips.
• Dreamweaver の作業効率を上げるためのメモ
  category: tool tags: Dreamweaver+tips+tools.

Mac 版 Safari で、フォーカスしても placeholder 属性に入れたテキストが消えない現象を見つけました。
現象を確認したのは、Mac 版 Safari 5.1.1 (7534.51.22) です。

対応している他のブラウザでは、フォーカスした時点で placeholder は隠れますが、Mac 版 Safari 5.1.1 (7534.51.22) ではテキストを入力し始めるまで隠れてくれません。
なお、Chrome 12.0.835.202 ( Windows、Mac ともに )、Windwos 版 Safari 5.1.1 (7534.51.22) では発生しませんでした。
そんな状態なので、バージョンアップしたら直るんじゃないかと思いますが、一応メモ。

追記: バグではなく、OS X Lion 上の Safari の仕様みたいです。言われるまで気づいていませんでしたが、iOS でも同じ挙動をしていました。矢倉さん、ありがとうございます。
参考: プレースホルダとHTML5のplaceholder属性
http://myakura.github.com/n/placeholder.html

対処法

Safari のユーザ・エージェント・スタイルシートに以下のような指定があります。

input::-webkit-input-placeholder,
isindex::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
    color: #A9A9A9;
}

これを参考にして、:focus 状態の placeholder に対して、color: transparent; を指定。

input:focus::-webkit-input-placeholder,
isindex:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

上記の指定をしておけば、フォーカスした時点でテキストが隠れます。

サンプル

Mac 版 Safari でフォーカス時に placeholder が消えない – jsdo.it – share JavaScript, HTML5 and CSS

背景色が白のサイトだったので、最初は color: #ffffff; にしてましたが、まとりん ( @ub_pnr ) に transparent でもいけるんじゃない？とアドバイスをもらい、試してみたところ問題なさそうだったので、transparent を採用しました。ありがとう、まとりん！

ちなみに、opacity: 0; も試してみましたが、こちらはうまくいきませんでした。

関連投稿

• デフォルトスタイルのリセット
  category: CSS tags: CSS+tips.
• display: inline-block を使う（修正版）
  category: CSS tags: CSS+tips.
• table に指定しておきたい CSS メモ
  category: CSS tags: CSS+tips.

8月19日、シラサカさんがやっている Jelly Jelly Cafe 渋谷で行なわれた、サラ・キャノン「WordPress とレスポンシブ・ウェブ・デザイン」に参加してきました。

サンフランシスコで行なわれた WordCamp で講演された際のスライドを元に進められました。
通訳は Toru さんが担当してくれました。

多様化するデバイスに対応する1つの手段としての Media Queries と、それを使用してのサイト設計についての基礎的な内容でした。
使用されたスライドは、SlideShare にアップロードされています。参考サイトや WordPress テーマのデモへのリンクが紹介されているので、それらの内容をチェックしたい方はスライドを参照してください。

Responsive Web Design – WordCamp San Francisco

WordPress 3.2からのデフォルトテーマ Twenty Eleven でも仕様されている Media Queries。
このテーマは、ブラウザサイズによってレイアウトや文字サイズが変化するように設計されています。
公式のデモが公開されているので、Twenty Eleven を使用したことがない方は、デモページを開いて、ウィンドウサイズを変えてみたり、モバイルデバイスで表示してみると Media Queries の面白さが分かるのではと思います。

デモ: The Twenty Eleven Theme | Just another WordPress.com site

WordPress テーマ以外には、以下のようなサイトが紹介されていました。

Hicksdesign: design for print and new-fangled media
Food Sense | Plant-Based Eating At Its Best

Media Queries は、Media Queries を使用したサイトのギャラリー。
上に挙げた2つのサイトを始め、かなりの数のサイトが紹介されているので、実際に Media Queries を取り入れようとしたときに参考にできるのではないでしょうか。見てるだけでも結構楽しいです。サイト名も素敵な感じです。

サラさんがおすすめしていた書籍は、A Book Apart, Responsive Web Design。
著者は、スライドに登場した Ethan Marcotte さん。
英語の内容なので、読むのがちょっと大変かもしれませんが・・・
電子書籍版は、9ドルで購入できるようです。

これ以降の内容に、Media Queries に関する説明、サンプルコードなどはないので、Media Queries について知らない方は調べてみてください。

以下、今回の感想など。

Media Queries は万能の技術なのか

僕はまだ Media Queries に関して、ちゃんと調べたり、実装したりしたことがなく、「そういうものがある」程度の認識でした。
以下については、そういった状態で参加し、感じたことです。

レスポンシブ・ウェブ・デザインは、デバイスのウィンドウサイズに合わせて、レイアウトや見た目に切り替えるデザインのこと。
見た目よりも、サイト設計という意味でのデザインが重要。

Media Queries を活用し、1つの HTML ( + CSS ) のみで様々なデバイスに対応することができる。
これだけ書かれると、魔法みたいな素晴らしい技術に思えますが、最適化するのは大変な作業になる。
デバイスが多様化しているが、可能な限り多くの検証環境でチェックしておかないといけない。
不向きなケースも出てくるはずで、何でもかんでも Media Queries で解決！というわけにはいかない。

WebDesignShock の 11 Reasons why responsive web design isn’t that cool! （英語）という記事にまとまっていますが、閲覧環境以外の環境に指定されている背景画像など不要なファイルもダウンロードしてしまったり、パソコンに比べ非力なモバイル環境で CPU とメモリを消費する画像のリサイズが必要になったり（もちろん回線速度も）と、現段階では解消されてない問題点があることを忘れてはいけない。

これらの問題を回避するためには、サイトの設計段階で色々と考えなければいけません（例えば、背景画像使わないようにするとか）。
「流行っているから」という理由でこの手法を取り入れるのではなく、どのサイトにどのような意図で組み込むかを意識したいです。
既存サイトに組み込もうというのもかなり大変な作業になるんじゃないかと思います。

ユーザーエージェントから判断するなどして、携帯用サイトとパソコン向けサイトで 別の HTML を表示するというように、デバイスによって見せ方を変えるということ自体は以前より行なわれてきた手法です。
Media Queries が出てきたからといって、今までの手法がなくなることはないと思います。
それぞれの特性を理解し、その都度最適な手法を取ればいいと思います。

個人的なことになりますが、スマートフォン向けページのズームがしにくい（というよりできない）のがすごく不便で、デスクトップ版と同じデザインで見たいと思うことがあります。
そういった場合、どちらの表示を有効にするか選べると嬉しいです。

うまくまとまってないなと思った方、すいません。。。

公演終了後はそのまま Jelly Jelly Cafe で懇親会。
電車の都合で最後までは参加できませんでしたが、最近あまりお会いできてなかった方とゆっくり話せたり、Twitter では交流があったけどお会いしたことがなかった方とお会いできたりといい夜になりました。

関連投稿

• WordCamp Yokohama 2010 に参加してきました(後編)
  category: diary tags: diary+WordBench+WordCamp+WordPress.
• コーダー飲み vol.2 春 に参加してきました
  category: diary tags: diary.
• WordCamp Yokohama 2010 に参加しました（前編）
  category: diary tags: diary+WordBench+WordCamp+WordPress.

いろいろなブラウザーでチェックをしている時に、以前書いた記事 display:inline-block; を使うで紹介していた CSS ではブラウザーごとに微妙な誤差があったので、修正版を書いてみました。

以前書いていたコード

.parent {
letter-spacing: -.40em;
}

.child {
letter-spacing: normal;
vertical-align: top;
display: inline-block;
/display: inline;
/zoom: 1;
width: 100px; /* 任意の値 */
}

こちらのコードでもうまくいくことが多いのですが、Windows 版の Opera で<li>の右側に空白が発生してしまいました（バージョン、ビルドが同じ Mac 版の Opera では問題なし）。

YUI と StackLayout を参考にしてみたものの版

次に YUI grids.css、stacklayout.css を参考に word-spacing を追加してみました。

word-spacing の値については、冒頭で紹介した @nagomu さんの記事で stacklayout.css と同じ（-0.65em）でいいんじゃないかという結論が出ていました。

なお、YUI grids.css の値だと、WebKit 系ブラウザーで以下の問題が出ました。

• 文字サイズを拡大縮小した際に空白ができる
• display: inline-block; された要素の親要素の文字サイズを変更する（font-size: 120% とか）と空白が出ることがある

.parent {
letter-spacing: -1em;
word-spacing: -1em;
width: 600px; /* 任意の値 */
}

.child {
letter-spacing: normal;
word-spacing: normal;
display: inline-block;
vertical-align: top;
/display: inline;
/zoom: 1;
width: 100px; /* 任意の値 */
}

いろいろ試してみてた結果、上記の CSS を適用すれば Windows 版 Opera でもうまくいきましたが、WebKit 系のブラウザーで子要素が前にめり込むようになってしまいました。

WebKit 系向けの指定部分の letter-spacing: -1em; を削除するとめり込まなくなりますが、当然 WebKit 系の空白が埋められず。

ちょっとチカラ技な気がするけどうまくいった版

なんとかできないかといろいろ試した結果、以下の指定でなんとかなりました。
1つ上のコードとの違いは、letter-spacing: -1em; を削除したことと display: table; を追加したこと。

.parent {
word-spacing: -1em;
display: table;
width: 600px; /* 任意の値 */
}

.child {
word-spacing: normal;
display: inline-block;
vertical-align: top;
/display: inline;
/zoom: 1;
width: 100px; /* 任意の値 */
}

word-spacing の値については、細かい検証は行なってません。
数字が単純で、ちゃんと効いているようなのでひとまず。

動作は以下のブラウザーでチェック。

Windows: IE 6〜9, Firefox 4, Opera 11.01, Safari 5.0.4, Chrome 10.0
Mac: Firefox 4, Opera 11.01, Safari 5.0.4, Chrome 10.0

うまく効いていない環境などありましたらご連絡いただければと思います。

※ 2011年4月21日@terkel さんからのおかしくなるパターンと解決方法を教えていただきました。

IE 8と IE 9で発生。
子要素（ここでは .child ）に :hover を指定すると、親要素に :hover した際に最初の子要素が :hover 状態になってしまう。
文章では分かりにくいので、サンプルを見てみてください。

.parent {
word-spacing: -1em;
display: table;
width: 600px; /* 任意の値 */
}

.child {
word-spacing: normal;
display: inline-block;
vertical-align: top;
/display: inline;
/zoom: 1;
width: 100px; /* 任意の値 */
}

.child:hover {
cursor: pointer;
background: red;
}

このサンプルで、子要素がないエリアでも ：hover が反応してしまっているのが分かるかと思います。

そして、これの解決方法は、親要素に display:block\9; を指定すること。
「\9」の部分は IE 8と9用のハックです。

.parent {
word-spacing: -1em;
display: table;
display: block\9; /* IE 8, 9用の指定 */
width: 600px; /* 任意の値 */
}

.child {
word-spacing: normal;
display: inline-block;
vertical-align: top;
/display: inline;
/zoom: 1;
width: 100px; /* 任意の値 */
}

.child:hover {
cursor: pointer;
background: red;
}

問題の発見と解決方法を教えてくださった @terkel さん、ありがとうございます。

その他、うまく効いていない環境、パターンなどがありましたら教えてください。

関連投稿

• display:inline-block; を使う
  category: CSS tags: CSS+tips.
• CSS でグラフを描く
  category: CSS tags: CSS.
• デフォルトスタイルのリセット
  category: CSS tags: CSS+tips.

参考にさせていただいたのは、こちらの記事。
指定した要素を半透明にできるopacity（IEでも使える） | Coder’s Note

opacity: 0.5;
-moz-opacity: 0.5; /* Firefox */
filter: alpha(opacity=50); /* IE6/7 */
-ms-filter: "alpha(opacity=50)"; /* IE8 */

これの適用先をマウスオーバー時の画像にする。

.hover a:hover img{
    opacity: 0.75;
    -moz-opacity: 0.75; /* Firefox */
    filter: alpha(opacity=75); /* IE6/7 */
    -ms-filter: "alpha(opacity=75)"; /* IE8 */
}

50％だとさすがに透明すぎるので、75%くらいに設定することが多いですが、基本的にはこれをコピペで数字を変えるだけでオッケーなのです。ナイス！

毎回新規の id や class を作るのは CSS が長くなるだけなので、.hover のような class を作って指定したい箇所に付与していくのが無難な使い方になるのかなと思います。

ただし、これがうまくいくのは背景が単色の時だけです（特に白系の時）。
画像半透明にしているので、背景が黒なら画像はグレーっぽくなるし、背景が画像ならそれが透けて見えてしまいます。
そういった場合は、画像の1つ外側を囲むタグ（例えば div）の背景に白を指定することで解決。

場合によっては本来必要がなかったタグを追加したり、使用しにくい構造だったりしますが、画像を毎回作る手間を考えれば小さい手間じゃないでしょうか。

関連投稿

• display:inline-block; を使う
  category: CSS tags: CSS+tips.
• デフォルトスタイルのリセット
  category: CSS tags: CSS+tips.
• table に指定しておきたい CSS メモ
  category: CSS tags: CSS+tips.