中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。
それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。

• 新規でサイトを作るのに使えそうな一式。Ver 3をDL（zip：40kb）
• Ver 3を見る

主な変更点を。

• style.cssのwidthなどのプロパティをまとめていたのをVer1と同じに。
• default.cssに書かれていた、p要素のmargin-bottomの指定をstyle.cssに移動。
• default.cssのfont-familyの指定を若干変更。
• index.htmlにGoogleカスタムサーチ用に使えるソースを記入。
• JavaScriptが色々増加。

ざっとこんなところでしょうか。
そんなにすげー勢いでの変更はしてません。

ディレクトリ構成

ディレクトリ構成自体は変わってませんが、JavaScriptファイルが結構増えました。

Ver1も結構入ってましたが、それとは違ってます。

アクセス解析用に「ga.js」と「getTracker.js」が追加されたのと、フォームなどで使える、半角カナを全角カナに変換してくれたりする「replaceascii.js」が入ってます。

repleaceascii.jsは、アッキーが作ってくれて色々改良してくれた優れもの。
ヨモツネットでは、valueconvertor.js ってファイル名になってますが、一式に入ってるrepleaceascii.jsも中身は同じです。

• 入力されたテキストを自動で指定の形式(半角, 全角, ひらがな, 全角カタカナ)に変換する | ヨモツネット

XHTMLテンプレートの変更点

仕様は前回のと同様で、以下のような感じになってます。

• XML宣言無し
• 文字コード：utf-8
• DOCTYPE：XHTML 1.0 Strict
• 改行コード：CR+LF

body要素のclassが「indexBody」から「topBody」に変更してます。
これは、他の階層のインデックスページで「indexBody」って使いたい場合があったので、このようにしてます。

次に、div#header内にGoogleカスタムサーチ用のソースコードが記入されてます。

<dl id="siteSearch">
<dt>サイト内検索</dt>
<dd>
<form action="./search.shtml" id="searchBox">
<fieldset>
<input type="hidden" name="cx" value="" />
<input type="hidden" name="cof" value="FORID:11" />
<input name="q" type="text" class="searchBox" value="サイト内検索" tabindex="1" accesskey="1" />
<input type="button" name="sa" accesskey="2" tabindex="2" value="検索" class="searchBtn" />
</fieldset>
</form>
</dd>
</dl>

入れた理由は、そこそこの確立で使うのに、コピペしてくるのが面倒だから入れておきました。
後はメインエリアにタブテスト用のソースがありましたが削除してます。

CSSファイルの変更点

default.css

font-familyの指定が、今まではIE7だけメイリオだったのに対して、IE6以外メイリオ指定にしてます。

/*--- default */
body {
	background: #fff;
	color: #333;
	font-size: small;
	font-family: "メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	line-height: 1.5;
}
* html body {	/* for IF6 */
	font-family: "ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}

メイリオが最初の指定になってるのが嫌な方はご自由に変えてください。

他に、p要素にmargin-bottom: 1em;の指定が入ってましたがdefault.cssからは削除して、style.cssに移動しました。

style.css

最初に横幅指定も含まれていたのを削除して、基本設定、リンクカラーのみにしてます。
横幅の指定などは、#mainや#subなどに。

次に、汎用classにshare.jsで自動的に付く外部リンクアイコンの指定を行えるようにしてます。

後は、#main内の以下の要素にだけ、margin-bottom: 1em;の指定が当たるようにしてます。

#main table,
#main ol,
#main ul,
#main dl,
#main blockquote,
#main pre,
#main p {
	margin-bottom: 1em;
}

JavaScriptファイルの変更点

yuga.jsが結構カスタマイズされ、textareaなどにフォーカスした場合に消えるJSが入って、share.jsとしてます。
share.jsのyuga.jsはちょこちょこコメント入れてるので使えるかなぁと。
（いつか書く気がおきたら、カスタムしたyuga.jsについても書きたいのですが）

ga.jsとgetTracker.js

これはbodyの終了タグ直前に以下のように記述することで、Googleアクセス解析使ってる場合すぐにセットできます。

<script type="text/javascript" src="/js/ga.js"></script>
<script type="text/javascript" src="/js/getTracker.js"></script>
</body>

読み込ませるようにしたら、getTracker.jsの"UAxxxxxx"部分をそのサイト用に変更すればOKです。

replaceascii.js

これは、先ほどもちょろっと説明しましたが、フォームなどで入力されたテキストの形式が違う場合に、自動で指定した形式に変換してくれるJavaScriptです。

詳細はヨモツネット参照で。

• 入力されたテキストを自動で指定の形式(半角, 全角, ひらがな, 全角カタカナ)に変換する | ヨモツネット

最後に。

毎回書いてますが、気に入らないなーって部分は、自由に変えてナンボの一式なので、いぢり倒して下さいませー。

ウチのとあるページのコメント数が28になって、何となく嬉しい今日この頃。

さて、今回はこんなタイトルですけど、こんなエントリーをしようと思ったのは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、clearfixでぐぐれみたいなのをよく見かけたり、あまりにもclearfixが有名だから、最近CSS覚えた人とかは、もしかしたら知らないのかなぁ～なんて思ったのです。

なので、一応基本に戻ってみましょうということで。
最近、「CSS Nite ビギナーズ」とかもやってますしね。

あ、clearfixを知らない方は、clearfix｜CSS HappyLife辺りか適当にぐぐってくださいませ。

えっと、そもそもどんな状況の時かっていうと以下のような時。

こんな時に、clearfixを使ったりすると思います。
毎度用意しているサンプルは、以下より。

• サンプルページを見る

サンプルを見てもらえば大体分かるかと思いますが、clearfixを使わない場合は、float、overflow、min-heigtプロパティ辺りでやるのが主だと思います。

全サンプルで共通しているスタイルは、以下のようになってます。

#main .section {
	margin: 10px 0 20px;
	padding: 10px;
	background: #fff;
	border: 1px solid #ccc;
}
 
#main .section p {
	float: left;
	width: 360px;
}
 
#main .section p.image {
	float: left;
	width: 128px;
	margin: 0 10px 0 0;
}
 
#main .section p.image img {
	vertical-align: top;
}

この状態だと、ダメなのでちゃんとしてあげるためにclearfixを使うと以下のようになります。

#main .section:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}
 
#main .section {
	zoom: 1;
}

zoom使ってますが、独自拡張とか使うのが嫌な人はwidthプロパティの指定をしてもOKです。

一応ここからが本題の、clearfix以外でやるには。ですが、ボクが多く使うのは、overflowを使った方法。
以下のような感じです。

#main .section {
	overflow: hidden;
}
 
* html #main .section {
	height: 1%;
}

見た感じ、clearfix使うよりすっきり！
あ、これもIE6用のハックが嫌な場合は、widthプロパティの指定でもOKです。
widthの計算が面倒だったり忘れてる場合が多いから出来るだけ入れたくない人なんです...
後、もうちょっとまともな理由としては、横幅が変わってもwidthの指定が無ければ使い回しが楽ってのもあります。

なお、overflowの値は「hidden/auto/scroll」のいずれかでOKです。
あんまり覚えてないんですけど、hiddenが一番安定してた気がします。

とても良さ気に書いてますが1つ注意点として、overflowは印刷の時に、一部のブラウザで1枚に印刷できないときに改ページせずに消えてしまう時があり、全体を囲ってるdivとかで使ってしまうとよろしくないので、サンプルのようにメインエリア内の一部とかで使うのがいいと思います。
（Firefox2までだったと思う...）

overflowで高さが算出されるのは、2.1の仕様にそんな感じのことが書いてあります。
たぶんこの辺↓
10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'

英語は頭痛くなるので次。
floatでやる場合は以下のようになります。

#main .section {
	float: left;
}

floatしてる親要素もfloatさせることで、floatのルールが適用されて高さが算出されます。
ただ、floatを使ってやるとマージンの相殺がされないので、余白が変わってしまったり、widthプロパティの指定が無いとレイアウトが崩れたり、後続する要素にclearプロパティの指定が無いと一部のブラウザで崩れたりと、他の処理が面倒になってくるので使い勝手としては微妙かもしれません。（昔はこの方法しか知らなかったので良く使ってましたが）

min-heightプロパティを使ってやる場合は以下のような感じです。

#main .section {
	min-height: 128px;
}
 
* html #main .section {
	height: 128px;
}

コレが使える状況は限られていて、テキストが少なくて、今後を見越したときも明らかに長いテキストは入らないだろうって思える時に加え角丸があった場合に使ったりしてます。
なので、当然テキスト量が多かったり極端にフォントサイズを上げると枠からはみ出してしまいます。

ざっとこんな感じです。

さて、CSSってある程度覚えてしまえば思った以上に簡単に組めたりして、何となく組めている気がするって思ったりしないっすかね。
もしくは、その逆になーんかイマイチ成長してないようなって感じてる時とか。

そんな状況のときに、今よりちょっとだけコーディングのクオリティや効率を上げるのに意識する事とかやっておくべきこととかを思いつくままに上げてみます。
仕事としてってのがベースなので、個人サイトやブログレベルだと当てはまらないかも。

ボクが昔はやってなかったけど今は当たり前な事とか、今でも忘れがちな事とか、何かそういう感じのことを書いていくので、人によっては当たり前だし、ちょっとした発見がある人も居るかも？

よく分かりませんが、いっきます！

この見出しが一段階下げる目的だけで使ったなんてとても言えません。

何はともあれ、HTMLが最重要。

正しい文書構造でマークアップ出来てなければ、どんなにCSSが分かっててもダメっす。

必ずlintは使うよーに。

たまーにチェックするの忘れちゃうんだけど、テキストエディタとかで作業している場合は、要素の閉じ忘れとかっていうイージーミスに気付かないから必ずチェックしなきゃダメっす。減点されてたら、解説を読むなりググるなりして次回から同じミスを繰り返さないように。

デザインから要素を選ばないよーに。

デザイン上こう見えるから、この要素でマークアップじゃなくて、プレーンな状態で見た時に正しい意味合いになるようにしなきゃダメっす。

サイト全体を見て、設計しなきゃ。

「木を見て森を見ず」じゃないけど、ページ単位で組んでると無駄が多くなっちゃうから、サイト全体をちゃんと見て、どの要素がどこで使いまわせるか考えなきゃダメっす。コレはデザインにも言えるかな。

横幅も大事だけど、縦幅にも気を使って。

デザインを再現するにあたって、横幅は1pxでもずれるとカラム落ちが発生したりするから気付き易いんだけど、縦幅の詰めが甘いとデザインクオリティが一気に落ちちゃう。
特にテキストはline-heightプロパティの関係とかで、デザイン上10px空いているのをそのまま10pxとかだと実際には13px相当だったりしちゃうから、その辺りも気を使わないとダメっす。

フォームには必ずlabel要素を使うよーに。

ラジオボタンとチェックボックスは特にそうだけど、label要素を使ってないと使いにくいから、使わないとダメっす。

文字サイズを変えても崩れないよーに。

画像しかないヘッダーとかで、文字サイズを変えるとずれて行くとのはカッコ悪いから、Fxとかで幾ら大きくしてもズレ無いようにしておかないとダメっす。テキスト部分も当然、レイアウトが破綻しないようにしなきゃダメっす。

classとかを減らしたいからって、ガチガチに組まないよーに。

例えば、デザイン上このページはp要素を使う部分が特定のデザインしかないからってclassを付けずに、子孫セレクタだけで親要素からp要素に指定しちゃうと、後から普通の段落が追加できない可能性が出ちゃう。
個人サイトならいいんだけど、仕事としてサイトを組む場合は、あまりにもガチガチに組んでしまうと柔軟性が無くなって、修正や追加するときに、都度CSSも直さないといけないっていう状況が発生してしまう。その作業を別の人がやる可能性も高いから、そんな事にならないように多少classが増えても管理面が良くならなきゃダメっす。

できるだけ汎用性の高いclass名をつけるよーに。

そのページのそのデザイン。実は他のページでも同じだったりしない？そんな時に、同じスタイル当てるのに別々のclass名付けるのは手間だから、どっちに使っても不自然じゃないclass名をつけなきゃダメっす。

あまりにもCSSファイルを分割し過ぎないよーに。

分割管理は、うまく機能してればとても使い易いけど、安易に分割したり、ページ単位とかで分けたりするのはかえって煩雑になってしまいがち。HTMLからclassとかidをコピって検索かけても分割され過ぎてると目的のスタイルが見つからなくなってしまう可能性も考えてあげなきゃダメっす。

読み込み中のことも考えて、背景画像を引いてても背景色の指定もするよーに。

背景色の指定をするとデザイン上問題が出るケースもあるので、一概には言えないけど、例えばグラデーションの背景画像を使っている場合とかは開始か終了の色を指定することで、読み込み時に多少重くなってもすぐにテキストが読めたり、読み込みがキレイになったりするからやっておくといいとおもー。

class名に「clear」や「clearfix」は使わないよーに。

何気にウチのサイトの検索ワード1位が「clearfix」だったりするんですが、コレをそのままclass名に使う人が結構多い気がするけど、見た目を現すclass名はびみょーなので使ったらダメっす。そもそも、clearfix使わないと再現できないっていうケース自体がfloatプロパティへの理解を深めれば殆ど無いかとおもー。

だからって、絶対に見た目を現すclass名がダメとは思わないよーに。

良くないとはいえ、見た目や位置関係でclassを付けないとダメなケースもやっぱり有るんです。ブログ構築してる時なんて特にそうだけど、そんなときまで頑なにつけないってのは、管理・更新・運用面で効率が落ちてしまうだけなので、状況を見て判断しなきゃダメっす。

繰り返しの背景画像を小さく切り過ぎないよーに。

容量を抑える目的でリピートさせる系の背景を切る時に、最小サイズで切って並べると、レンダリングスピードがかなり落ちて、PCにも意外と負荷が掛かってしまう。横で繰り返す画像の場合、1px×50pxとかで切らずに20px×50pxとかで切った方が実は早かったりする。時代遅れな低スペックマシンでやってみるとその差が体感できるんす。

プロパティの指定順序は統一するよーに。

これは最初に癖付ける部分ですが、指定順序がバラバラだと、同じ指定を2度してしまったり、後から見た時に分かり難かったりといい事が無いので、統一しなきゃダメっす。美の追求ですわ！美の！じゃあ、どんな順番がいいんですか？ってのは、Mozilla.orgの外部CSSの順番が有名で、ボクもソレに近いです。簡単に書くと、1. 視覚整形モデル、2. ボックスモデル、3. 背景と前景、4. フォントとテキスト、5. 生成内容っていう感じ。

IEではまらないよーに。

IE6/7で変だなっていうときは、何も考えずにとりあえず「zoom: 1;」を試してみれば、9割方問題が解決しちゃったり。zoomプロパティはIE独自なので、使いたくない人はwidthプロパティの指定をするとかで乗り切れちゃいます。IE6だけ変だぞ？っていう場合、「display: inline;」やってみると直ったり。如何にIE対策を早い段階で覚えるかってのも作業効率を上げるには重要だと思うっす。

確認を怠らないよーに。

意外なところで、意外なミスをやらかしてる可能性があるので、確認はしっかりやらなきゃダメっす。

あまり根つめすぎずにやるよーに。

うぉ、ネタが切れてきた、、、何事に対してもそうだと思うんですけど、納期に追われる余り食事も休憩も余り取らずにっていう状態は、精神的にも身体にも良くないので、ほどほどにさぼってやりませぅ。じゃないと結果として効率が落ちたり、ミスが増えたりといい事がない気がするっす。

何はともあれ楽しまないと損です！

いや、ホントに。コーディングつまんねー！とか思ってたらやっぱりダメっす。せっかくなんで、楽しんでやってください。ウチのサイトの目的がそれなので最重要っす！！

あぁ、もっとイッパイ書く予定だったけど、書き出すとあまり浮かばない。
気が向いたり、浮かんだりしたら追記していきまっす。

しかし書いているウチにターゲットとしてた人のレベルがどの辺だったか曖昧に...

まぁ、何はともあれ、弊社にもコーダーさんとかマークアップエンジニアさんっていう人は何人か居ますので、その人たちへのメッセージが込められているとかそうでないとか。

がんばってね。

あと、弊社のベトナム事業部の女性マネージャーがブログを開始しました。

ベトナムに興味がある方や女性マネージャーに興味がある方、更新率も高いので、ぜひに。

さて、そろそろ本題に。

こんな感じで、アイコンとかサムネイルがあってその横にタイトルと概要文があるような、そんなデザインってよく見かけるかと。

今回は、これの組み方の一つとしてサンプルを用意してみました。
サンプルの確認は以下より。

• サンプルを見る

今まで多かったパターンは、基本的には定義リストを選んで、ddに入れたりしてましたが、コレだとリンクを画像とdtに張る必要があって手間だなぁ～と。
なので、画像もdtに入れてしまえばリンクは一つですむので良い感じがしました。

と、言う訳で今回は以下のように組んでます。

<dl class="serviceList">
<dt><a href="./">デジパのウェブサイト制作
<img src="./img/item/icon_digiper.gif" alt="digipeアイコン" /></a></dt>
<dd>
デジパ(略)評価される理由とは。
</dd>
<dt><a href="./">デジパのウェブサイト制作
<img src="./img/item/icon_digiper.gif" alt="digipeアイコン" /></a></dt>
<dd>
デジパ(略)評価される理由とは。デジパ(略)評価される理由とは。
</dd>
<dt><a href="./">デジパのウェブサイト制作
<img src="./img/item/icon_digiper.gif" alt="digipeアイコン" /></a></dt>
<dd>
デジパ(略)評価される理由とは。
</dd>
</dl>

dt要素のテキストの後にimg要素を配置。dd要素が簡単な説明とか概要文です。
h3要素とかの見出しに、pって組み合わせでも、h3要素に画像を入れれば同様の事が出来る風味です。

CSSは以下のようになってます。

#main dl.serviceList {
	margin: 0 0 20px;
}
 
#main dl.serviceList dt {
	position: relative;
	width: 460px;
	margin-bottom: 5px;
	padding-top: 15px;
	padding-left: 80px;
	font-weight: bold;
	border-top: 1px dotted #ACACAC;
}
 
#main dl.serviceList dt.firstChild,
#main dl.serviceList dt:first-child {
	border-top: 0;
	padding-top: 0;
}
 
#main dl.serviceList dt a {
	padding-left: 15px;
	background: url(../img/item/mark_01.gif) no-repeat left center;
}
 
#main dl.serviceList dt img {
	position: absolute;
	top: 15px;
	left: 0;
	padding: 2px;
	border: 1px solid #EEE;
}
 
#main dl.serviceList dt.firstChild img,
#main dl.serviceList dt:first-child img {
	top: 0;
}
 
#main dl.serviceList dd {
	margin-bottom: 15px;
	padding-left: 80px;
	height: 50px;
}
 
#main dl.serviceList > dd {
	min-height: 50px;
	height: auto;
}

デザインを整えるために本題とは関係ないプロパティやらがありますが、基本的にやってることは、positionプロパティでdt要素の左上を基点として、img要素を飛ばしてる感じです。
後は、dd要素のテキストが少ない場合に、レイアウトが破綻しないよう、min-heightの指定をして最低の高さを確保してます。

もし、dt内のテキストが画像の場合は、アイコンにclass指定して上げれば良い感じです。

こんな感じのデザインを組む必要がある場合の一つの選択肢として如何でしょうか。

最後に、

サンプルのダウンロードとサンプルの確認

• サンプルをダウンロード（zip：20kb）
• サンプルを見る

さて、今回はこのデジパベトナムを組むのに辺り、最初は無理（もしくは相当厄介）だと思ってたことが思ったよりカンタンに出来たのでご紹介。

キャプチャみたいな感じです。

コレがイヤでフッターをページ下部に固定する方法とかを使う事もあるかと思いますが、アレはアレでコンテンツ部分が間延びしてしまう感じも無きにしも非ずだったりします。

と、言うか個人的には1サイトに1ページ有るか無いかも分からないような部分に労力を割きたくないのが正直なトコロなので、出来れば見逃して欲しい部分だったりします。

htmlとbody要素にheight: 100%指定して...みたいなのが覚えられないだけですが。

また、この方法だとフッターの高さを固定する方法が一般的だと思う。

有名どころだと、、、

• A CSS Sticky Footer
• Lucky bag::blog: フッタを常に下部に配置
• フッターを画面の下に表示～CSSテクニック～

辺りでしょうか？
A CSS Sticky Footerみたいに画像オンリーならいいんですが、テキストが有るとDDTT対応（文字サイズの可変でもちゃんとテキストが読める状態）をうたえなくなってしまうのでダメだったりします。

で、まぁ前置きが長くなりましたが、フッターの背景を下まで表示させれればいいな。と思った次第です。

キャプチャみたいな感じです。

サンプルも用意ししてますので、以下よりご覧下さいませませ。

• このサンプルを見る

サンプルのようにあまりにも本文が無いと、フッターの色が強すぎる場合など目に優しくなかったりするので、その辺りはメインエリアにmin-heightプロパティとかである程度確保しておけばいいかと思います。

#main {
	float: left;
	width: 540px;
	margin-right: 20px;
	min-height: 200px;
}
* html #main { /* for IE6 */
	height: 200px;
}

で、肝心のフッター部分ですが、上記の方法とかtable-cellとか色々試行錯誤した結果、とてもカンタンに出来てなんで気づかなかったのか不思議になったんですが、以下のような指定をすることで出来ました。

html {
	background: #d3b0ac;
}
body {
	background: #fff;
}

これだけです。
今回フッターには軽くグラデーションを入れているので、グラデーションの終了部分の色をhtml要素に指定してあげます。

他はコレといったことはしてないです。
脳内妄想の段階で無理だと思ってて、html要素にbackgroundの指定をする。っていう発想が無かったので、ここにたどり着くのに正直結構時間が掛かりました。

ただ、この方法の欠点は、横幅100％な背景がある場合に限られます。
（html要素に背景画像を用意してrepeat-yで表示させればいけるんですが、IEで横幅を変えたりした時に1pxずれる問題が解決できなかったので...）

限られるとはいえ、フッターがちゃんとボックスみたいになってる場合はそこまで不自然じゃないと思うので、いいかなーとか。

ということで今回のサンプルやデジパベトナムみたいなデザインの場合は使えるかと思います。
心なしかウチのデザインでフッターの横幅100％は増えているので活躍しそうです。

ちなみに今回のサンプルでは、フッターにはdivを一つ噛ませて横幅100％にしてますが、あっきーのブログで紹介されている方法を使えばdivを増やさずに出来ちゃったりします。

横幅が 100% の header を ~inner を使わずに実現する | ヨモツネット

単語の禁則処理に関しては、結構無頓着であんまりそういう事がなかったのもあり、イマイチ分かってないんですけど、ブラウザによる差異が激しい問題の一つだと思います。たぶん。

Firefox3になってから、URLなどが長い場合折り返されるようになったみたいだけど、単純な半角英数の羅列だとやっぱり折り返してくれないんですね。ちと残念。

で、今回はむしろ折り返さないで欲しいっていう状況の時の処理に悩んだのでメモがてら。

サンプルは以下より確認できます。

• 単語の禁則処理に関してのサンプル

通常はコレで問題ないのです。
なにせ、1番目みたいにすると、長いテキストが入った場合に折り返してくれないので、はみ出したりしてしまいます。
更に、IE6だとoverflow: hidden;の指定が無い場合はボックスの幅を広げてしまうので、カラム落ちしてしまったりといい事がありません。

が、基本的に短いテキストで羅列されるなら、1番目のようになっていた方が一つの単語の途中で改行されないので、読みやすくなったりします。

そうなんですよね。読みやすくなるのです。なら、やった方がいいよね。
っていうことで、やる事になったのですが、中々ブラウザによって言う事を聞いてくれず、色々悩んだりした挙句、以下のようなCSSで意図した感じに出来ました。

#main ul.tagList {
	width: 510px;
	margin: 10px 0;
	padding: 15px;
	background: #f0f8ff;
}
#main ul.tagList li {
	display: inline;
	margin-right: 10px;
	white-space: nowrap;
	line-height: 2;
}
*:first-child + html #main ul.tagList li {
	float:left;
}
* html #main ul.tagList {
	overflow: hidden;
}
* html #main ul.tagList li {
	float:left;
}

今回、リストで並べてるので、何はともあれdisplay: inline;の指定をしてインライン風味に。
コレだけだと2番目のと同じなので、今回の目的である単語単位での折り返しを禁止させるようにするために、white-space: nowrap;の指定をしてみます。

そしたら、FirefoxはOKだったんすが、IE6/7が横一列に並んでしまったのでIE6/7はハックしてfloat指定したらいい感じに並んでくれました。
ただ、floatを指定すると親要素が高さを算出してくれませんので背景が見えません。

それを解決するには、widthの指定を親要素に当たるul要素にすることで解決。zoom: 1;でもいいんですが。

コレで以下のブラウザで大体おんなじ見た目になりました。

• Internet Explorer 6
• Internet Explorer 7
• Opera 9.5
• Safari 3
• Firefox 3

最初は、white-space: pre;とかでやってたらかなりはまってしまって大変な事になりかけましたが、無事意図した状態になって良かったです。はい。

ちなみに、サンプルのメインエリア下部にある見出しっぽいものの下は、半角英数字だけだとどうなるのか気になったので残ってますが、今回のエントリーとは関係はありません。いわゆるおまけです。

あ、最後に。

サンプルのダウンロードとサンプルの確認

• サンプルをダウンロード（zip：17kb）
• サンプルを見る