floatでブロック要素を並べると、普通は右(float:right)か左(float:left)かどちらかにしか揃えることが出来ません。真ん中に揃えるには、position:relativeでうまく位置調整してあげます。

■HTML

<div class="menu">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
</ul>
</div>

■CSS

div.menu {
position:relative;
overflow:hidden;
}
div.menu ul {
position:relative;
left:50%;
float:left;
}
div.menu li {
position:relative;
left:-50%;
float:left;
}

段組などでブロック要素をfloatさせたとき、それを囲む親要素の高さが算出されないという問題があります。floatは「回り込み」ではなく、あくまでも「浮かせた」だけなので、浮いた要素は親要素からすると無くなったものと解釈される、と考えると分かりやすいです。

そこで定番の解決策として、親要素にclearfixを適用します。
このブログでもclearfixを使っています。

■HTML

<div class="clearfix">
<div style="float:left;width:200px;">左カラム</div>
<div style="padding-left:200px;">右カラム</div>
</div>

■CSS

.clearfix {
zoom:100%;
}
.clearfix:after {
content:" ";
clear:both;
height:0;
display:block;
visibility:hidden;
}

clearfixのもうひとつの利点は、floatさせた後にいちいち<br clear=”both” />とかでクリアする必要がないことです。不要なbrは避けるべきなので、その点でもスマート。

clearfixは亜種がたくさんあり、互換性等が考慮されて日々進化しています。
都度新しいclearfix(という名前とは限らないですが)をチェックしておきましょう。

以下は、僕が個人的に決めているルールです。

複数の単語をつなぎ合わせる

例えばエントリ記事の見出しであれば、「entry」+「title」というように、なるべく2つ以上の単語をつなぎ合わせます。1単語だけだとユニークな名前にならない場合があるためです。

後に続く単語の最初の文字を大文字にする

「entry」+「title」であれば、「entryTitle」とします。

一貫性を保つ

エントリ記事の見出しを「entryTitle」と命名したのであれば、エントリ記事の本文は「entryBody」などのように、命名に一貫性を保ちます。

ハイフン、アンダースコアは使わない

原則として、ハイフン、アンダースコアは一切使いません。混同しやすいため、命名に一貫性を保てなくなることがあるのが理由です。尚、一部の古いブラウザではハイフン、アンダースコアは未対応です。

ただし、既存サイトの修正などで、既にid/classの名前にハイフン、アンダースコアを使用している場合には、「一貫性を保つ」ルールを優先させて、ハイフン、アンダースコアを使用してもよいこととしています。

Pass&Goでは、HTMLおよびCSSの読みやすさを重視してインデント(字下げ)を使用しています。

その際、

  • タブでインデントする
  • テキストエディタ等でのタブ表示を半角スペース2つ分に設定する

以上を推奨しています。
作業者によって好みはありますが、共通のルールを守ることで統一感のあるソースを残していきましょう。

インデントはタブか、スペースか?タブなら4タブか8タブか?という議論はおそらく至るところでされているかと思いますが、HTMLコーダとしての僕は基本的に2タブです。2タブというのはインデントはタブを使用し、エディタでの表示は半角2字分とするということ。

理由は、

  • スペースだと何度もキー叩かないといけないので面倒。自動インデントは万能ではない。
  • 8タブとか幅取りすぎ。4タブも厳しい。

プログラムのコードだと書き方の工夫である程度インデントは減らせるでしょうし、ネストしまくりなコードってどうなんだって思いますが、HTMLはネストのコントロールが難しく、場合によってはかなり多重な入れ子になってしまうこともあります。そんなときは画面の半分がインデントだったりします。

なので、インデント幅はなるべく小さくしたい。そこで結論が2タブです。PGは4タブ派が多いようですが、チーム内でタブで統一さえされていれば困ることは無いですしね。規約とかもありますが、タブの表示幅まで規定する必要ってあるのかな?

あと、HTMLだとタブ無しの人もいるようですが、読みにくくないですか?大規模サイトならまた別ですが、削減できるファイルサイズも微々たるものですし。余計な表示崩れをコントロールするため、というのはあるかも。でもそれもli要素などごく一部をケアしていれば問題ないのでは。

CSSでIME制御

テキストボックスなどの入力フォームにCSSでIME制御を加えることができます。
ただしIE限定。

<input type="text" style="ime-mode:disabled;">

詳しくは下記を参照。

ime-mode-スタイルシートリファレンス
http://htmq.com/style/ime-mode.shtml

IEのHTTPエラーメッセージの簡易表示をサーバー側で無効化する方法
http://neta.ywcafe.net/000558.html

エラーページをつくるときは512バイト以上ソースを書くこと。そうでないとIEの場合「簡易表示」のページが表示されてしまう、と。
まあ、普通に作っていれば512バイト以上は書くので今まで気付きませんでしたが、知らないと混乱しそうですね。メモメモ。