ネタ元の記事は以下。
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.

去年の目標達成具合について

2011年初投稿で以下のような目標を立てていました。

• HTML、CSS の理解度を深める（HTML5、CSS3を含む）
• JavaScript を積極的に使ってみる
• 個人サイトをもう1つ立ち上げる
• このサイトのリニューアル
• ページビュー倍増

ほぼ達成していないので、この内容を書かなければいいのにというレベルですが。

HTML、CSS の理解度を深める（HTML5、CSS3を含む）

10/100点。
あまり進歩がなかったなと思います。

理解を深めるために使ってみる、ということもやっていかないとですね。

JavaScript を積極的に使ってみる

30/100点。
前年に比べ、使用頻度は上がったものの、細かいところまで突っ込んで使えてなかったです。
jQuery に頼りすぎ。基礎からやり直そうと思います。

個人サイトをもう1つ立ち上げる

0/100点。
ネタも出せなかった。
これは何かネタが出て時にでもやります。

このサイトのリニューアル

0/100点。
全く手を付けられてません。デザインできないです。

デザインできるのを待ってたら、いつまでも変わらないと思うので、見た目は現状のままで、まずは内部の修正をしようかなと思ってます。

ページビュー倍増

20/100点
ユニークユーザー、ページビューともに約1.2倍（Google Analytics より）でした。
増えたらいいねくらいの適当な目標だったので、あまり気にならないとこです。
有用な記事はほとんどないので、増えたこと自体に驚き。

その他、ざっくりと。

ブラウザシェア

Chrome が増えたなーという感想。
Chrome が Firefox のシェアを抜いたというニュースもあったことですし、まぁ自然な流れかなと。
このサイトではまだ Firefox が1位でしたが、今年中に逆転するかもしれないですね。

また、Internet Explorer のバージョンごとのシェアは以下の通り。

ちょっとずつ移行は進んでるかなぁという感じです。
全体から見た IE6, 7 の比率は、2010年が11.3%、2011年が4.6% でした。

自動アップデートが行なわれるようですし、今年でだいぶ割合が変わるでしょうね。

今年の目標

去年ほぼ実行できていなかったですし、今年はたくさん目標を立てないようにします。

リニューアルと制作関連の記事数を増やすことの2点だけにします。
あとは、できたらいいねということで、もう1つサイトを。
のんびりやっていきます。

今年もよろしくお願いいたします。

関連投稿

• 2011年初投稿
  category: diary tags: diary.
• WordCamp Yokohama 2010 に参加してきました(後編)
  category: diary tags: diary+WordBench+WordCamp+WordPress.
• WordCamp Tokyo 2011 参加前に公式サイトでチェックしておくこと
  category: diary tags: diary+WordCamp.

プライベート

今年は国内旅行にちょこちょこ行きました。
こんなに飛行機乗った年は初めてです。

• 2月: 福岡（WordCamp Fukuoka 参加）
• 5月: 北海道（SaCCS Vol. 24 参加）
• 8月: 北海道（観光）
• 10月: 神戸（ WordCamp Kobe 参加、観光）

神戸は現地の人と一緒にということはあまりなかったですが、福岡と北海道は普段 Twitter で交流のある方にいろいろな場所へ連れて行ってもらい、楽しい時間を過ごさせてもらいました。また遊びに行ったときにも連れ回していただきたいです。
毎回「もう1週間くらいは長く滞在したかったなぁ」と後ろ髪をひかれながら帰ってました。

飛行機での移動以外では、YAT 会の幹事、流しそうめん会、WordCamp Tokyo にスタッフ参加、飲み会にちょこちょこ参加、写真を撮りになど、大小いろいろなイベントに参加しました。
僕にしてはかなりアクティブに活動した1年だったかなと思います。

仕事

設立時から参加していた会社を5月末で退職。
今後どうしようかなと思いながらぼけーっとしていたら、以前から親しくしていただいていたデジタルキューブさんに声をかけていただき、め組の一員として、デジタルキューブ東京オフィスに半年間常駐していました。

国内有数の WordPress のエキスパート達が集まっていることもあり、ものすごいスピードとレベルで WordPress がカスタマイズされていく様子を目の当たりにしていました。
彼らと働き、ふざけあって過ごせたのは、すごく幸せで刺激的なことです。

そんな半年間を過ごし、12月からはタネマキを設立し、スペースの運営をしています。
横浜駅からそんなに遠くない距離なので、近くにお越しの際にはふらっと立ち寄ってもらえたら嬉しいです。

来年に向けて

ブログについて

数を増やせばいいってものではないですが、今年はあんまりブログ書かなかったなーと思います。
来年はもうちょっと書いていきます。
流行りに乗ることもあると思いますが、まずは自分のためになるような内容の記事を。

記事数は少なかったですが、display: inline-block を使う（修正版）という記事については、試行錯誤しながらも思った通りの挙動になるようにできたので、満足してます。
こういう記事をたくさん書けるようにしていきたいです。

プライベート

今年もたくさんの方に助けられ、支えられた1年でした。ありがとうございます。
少しずつ恩返ししていきたいです。

来年はボルダリングにも挑戦してみようと思っています。
その他にも面白そうなことを見つけて、どんどん挑戦していきたいです。

仕事

基本はタネマキの運営ですが、引き続きウェブ制作業も続けていく予定です。
出来る範囲のことを精一杯やっていきます。

最後に

タネマキの営業は30日までですが、ブログのほうはこれで今年分終了。
また来年、2012年初投稿までさよならー！

関連投稿

• 2011年初投稿
  category: diary tags: diary.
• WordCamp Tokyo 2011 参加前に公式サイトでチェックしておくこと
  category: diary tags: diary+WordCamp.
• WordCamp Yokohama 2010 に参加してきました(後編)
  category: diary tags: diary+WordBench+WordCamp+WordPress.

当日のセッションは参加できていないので、セッションについては公式サイトのタイムテーブルからのスライドおよびビデオ（一部のみ）のリンク先を、参加者によるレポート記事は公式サイトのブログ記事を参照してください。

今回は公式サイトの制作リーダー、デザイナートラックの司会として参加。

そういった立場で参加した WordCamp Tokyo 2011 で感じたこと、経験したことを。

公式サイト制作について

今回から WordCamp Foundation のルールに則った運営が求められるようになりました。
今まで日本で行なわれていた WordCamp との大きな違いは以下の3点。

1. wordcamp.jp ドメインから wordcamp.org ドメインへ
2. 使用するテーマは選択できない
3. プラグインの追加ができない

ざっくりと書くとこんな違いがありました。
2、3については、FTP などでサーバーへアクセスする権限がないからです。

それぞれについてもうちょっと掘り下げてみます。

wordcamp.jp ドメインから wordcamp.org ドメインへ

今まで使用していた wordcamp.jp から、wordcamp.org に以降。
都市名と開催年を含めたサブドメインを発行し、子サイトとして運営するように変更になりました。

wordcamp.jp は Automattic が所有するドメインではなく、ドメインを失効した後に過去の WordCamp サイトが無くなることへの懸念というようなことを聞いています。他にも理由はあるかもしれませんが、海外では既に失効してる公式サイトがあったり。

ユーザーとしても、wordcamp.org にまとまっていたほうが探しやすいですね。
※ wordcamp.org は全部英語

使用するテーマが選択できない

WordCamp のサイトで使われているテーマは、古いものは除き、全て共通のテーマが使われています。

今回指定された共通テーマは、Twenty Ten をベースに、WordCamp 用にカスタマイズされています。
来年くらいにはベースとなるテーマが Twenty Eleven などに変わるのかもしれません。

この変更で最も困ったのは、1つの CSS ファイルを除き、テーマファイルに手を加えられないこと。

既存のプロパティを上書きし、使いたいプロパティを追加していくなので、CSS について全く知らない方がこれを担当するのは大変です。誰かしらできる方がスタッフ内にいると思うので、そういった知識のある方に任せるべきでしょう。いなかったらできる方にスタッフ参加してもらいましょう。

これらのカスタマイズ用の CSS は管理画面から書き換えるのですが、これが一部のハックやらなんやらを消去して適用されてしまう仕様のようなので、ブラウザによっては意図した見た目ではないです。

もう1つ困ったのが、サーバーからテーマファイルや関連ファイルをダウンロードできないため、ローカルもしくはテスト環境を使ったテストが行えないこと。

インストール済プラグインもカスタマイズされている可能性があるため、それらを使用した際にどのような挙動になるのか分からず、稼働中のサイトで試してみる以外に方法がありません。最初のほうは適用させてから表示チェックをしてました。

プラグインの追加ができない

サーバーへのアクセスができないので、プラグインは管理画面からインストールする必要がありますが、WordCamp サイトの管理画面にはプラグインのインストール項目がありません。プラグインの新規インストールはできません。
その代わり、チケット販売プラグインや投票、スピーカーやスポンサーの管理プラグインなどがインストールされていました。

これらのプラグインのカスタマイズはできないし、これらの仕様が日本の実情とはそぐわないと判断し、外部サービスを使用することになりました。
今までの WordCamp 公式サイトで使っていた WPTouch や Ktai Style のようなプラグインなども使いたかったのですが、こちらも断念。

実は最初の段階では WP Multibyte Patch もインストールされていませんでした。
これはさすがに無いと厳しいということで、なんとかインストールしてもらいました。

公式サイトを作ってみて

今までも公式サイトを作るのは大変でしたが、今回からまた違った大変さが生まれました。
もしかしたらここまでの文章で “WordCamp の仕様を批判している” ような印象を与えてしまっているかもしれませんが、そういった意図はなく、むしろ逆です。

このスタイルでやるのは日本国内で初だったこともあり、戸惑ったのは事実ですが、ある程度決まった基準があって、それを変更していくほうが時間はかからないので、そのぶんイベントの計画や準備に時間があてられるんじゃないかと思います。
今までのようにいろいろとカスタマイズすることもとても素晴らしいことですが、イベントを充実させることが重要だよね？という姿勢なんだと受け取っています。

また、今回は PSD でデザインしてから HTML なりに変換するのではなく、最初から HTML で作るというフローで制作を行ないました。
うまく使えるケースには今後こういったやり方を導入していくのもありかなと思いました。

当日の司会について

僕が担当したのはデザイナートラックで、約400人くらいの会場でした。

by MakeGoodTime

WordCamp Kobe 2011 の User’s Cafe でも司会をやったんですが、慣れないですね。
あの人数を前にしてセッションをするスピーカーさんはすごいなぁと思います。

緊張しっぱなしの中始まった最初のセッションタイムはアンカンファレンス。
いろいろな方に手伝っていただきました。ありがとうございます。
緊張して頭が真っ白状態で、うまく誘導できなかったのが悔やまれます。

それ以降の通常のセッションタイムに入ってからは、スピーカーの方の紹介くらいしかしていないです。
他のトラックの司会の方はどんな感じでやっていたのか気になるところ。

まとめ

WordCamp Foundation のルールは他のチームにもあり、それぞれのチームで戸惑いがありました。
そんな中で行なわれた今回の WordCamp は、関東での開催ということもあり、日本最多の参加者数に。

準備期間中は、仕事終わってから深夜、休日返上で作業や打ち合わせをしたり、お仕事の依頼を断らざるを得なかったりと結構しんどかったです。

大変なこともありますが、スタッフ経験してみるのをおすすめしたい。
WordCamp Tokyo 2011 にスタッフとして参加し、イベントが開催できた達成感、満足感、多くの方に助けらてもらった感謝の気持ちでいっぱいになりました。
それ以外に、大きなイベントを作っていく難しさや、普段一緒に働いていない人たちとどのようにコミュニケーションを取っていけばいいのかなど、課題はまだまだあります。

ずっと同じメンバーだけで運営していくのはもったいないし、未経験の方がどんどん参入して欲しいし、僕らができなかったことをどんどん実現していって欲しいです。
いきなり参加するのはちょっと不安という方は、住んでるエリアの WordBench に参加してみたり（無かったら作ろう）、Twitter などで交流してみたり。

ちょっと話がずれました。

今回の WordCamp はどうでしたか？楽しめましたか？
僕はすごく楽しかったです。

参加した方々が「楽しかった、ためになった」と思ってもらえていればなによりです。

by odysseygate

関連投稿

• WordCamp Tokyo 2011 参加前に公式サイトでチェックしておくこと
  category: diary tags: diary+WordCamp.
• WordCamp Yokohama 2010 に参加してきました(後編)
  category: diary tags: diary+WordBench+WordCamp+WordPress.
• WordCamp Kobe 2011に参加してきました
  category: diary tags: diary+WordCamp.

タネマキ 【コワーキング ＆ シェアオフィススペース】
http://tane-maki.net/

横浜駅周辺にはあまり電源を貸してもらえる喫茶店などは多くないので、電源切れそうな時にでもふらっとお越しください。
まだ一部内装が未完成だったりしますが、年内には完成予定です。

今まで経験してきたものとは全く違う業態なので、戸惑ったりうまくいかないことが多いですが、温かい目で見守っていただければと思います。

関連投稿

関連投稿はまだありません。