404

CSS は import を使って、全部（HTML から呼び出される CSS ファイルとは）別ファイルに記載してます。いちいち mt.cgi から記述し直すのが面倒なのと（多分再構築とかしなくても済む方法はあるのだけどもマニュアル読んでない）、NN 4.xx 系のアレで。

http://clockwork.under.jp/404/404.css

というわけで、404 に使ってる基本的なことに関してちょっと書くのでどんどんパクってください。ファイル丸ごと持ってって使っても良いので。多分ろくなことにならないけど。

全体の概要。

line1 :

Unicode ですよ、と。

line5-11 :

body のあれやこれや。背景、文字色、フォント、余白。

line13-20 :

アンカーのあれやこれや。カスケーディングなので、擬似クラスの順番には注意。:link, :visited, :hover, :active の順番が無難。

line28-85 :

div について指定。あれを float させてこれをこっちへ持ってきて、メニューは絶対位置指定で、フッタはこんな感じで、と。HTML も併せて見ないと多分わかりません。

line87-99 :

引用に関して。line201-226 （cite とか）あたりも含めてひとまとまり。

line103-160 :

見出し要素関連。アクセントで画像とか。

line162-208 :

段落。あまりクラス分けしない方がいいのかなぁ。段落をさらにコンテナに入れてそっちに指定、が正しいのかも。

line210-249 :

強調表現とかいろいろ。

line253-267 :

定義リスト。シンプルにまとまってて良かった良かった。いつもが汎用性なさすぎるのか。

line269-306 :

以下、箇条書きについて指定。

適当にやや詳しく解説。body から順番に。

line6 :
background:#789 url(./img/background-neu.png);

背景色と背景画像一括指定。#789 は #778899 と同じ意味ですよ、と。本当は url 以降のカッコの中に二重引用符を付けるとかだったような気がするのだけど、それをすると何かのブラウザがエスケープしてしまうということを聞いたような気もするので放置。そのうち修正するかも。画像の位置は CSS ファイルからの相対パス。

line8 :
font:95% arial, sans-serif;

フォント一括指定。普段はこういう書き方はあまりしません。font-size, font-family の順で、arial フォント、なければサンセリフって感じで。

line10 :
padding:20px 8%;

要素の内側余白（多分あまりよくない表現）。上下と左右を併せて指定。上下 20px, 左右 8%。解像度に依存せずに余白を適度に取るには % 指定が楽。em と違って全要素共通の縮尺になるし（これもあまり良くない表現。親要素に依存するような気がするけどうろ覚えなので気になる人は仕様書読んでください）。

line29 :
background:url(./img/background-header-neu.jpg) left top no-repeat;

背景画像一括指定。順に background-image, background-position（左右、上下）, background-repeat で、最期に background-attachment を入れてもいいんだけど初期値が scroll なので追加指定しない。

line37 :
border:1px solid #333;

border 一括指定。border-width, border-style, border-color の順で。border-style はページ内で統一した方が見栄えが良いように思う。ページごとにコンセプトがあるだろうから断言はできないのだけど。同一ページ内に solid と dashed, dotted なんかが混在してると結構散漫な印象。これだけでエントリーひとつ書けそうだからあとで書いてみよう。

line89-90 :
border:1px solid #333;
border-top:none;

要するに border-top だけ無くしたいのだけど、これが一番スマートな表現なんだろうか。カスケーディングだからいいか。よくわからん結論だけど。

line115 :
h2:first-letter

h2 要素の最初の文字だけ色指定するために使う擬似要素。アンカー以外で IE が対応してる擬似要素は多分これだけ（アンカーは擬似クラス、か）。最初の文字だけ色違いだとアクセントになるけど、なぜか hn の擬似要素周りはバグが多いみたいなので（組み合わせで発生するので検証も面倒）あまり多用は控えたいけどよく使う。仕方がない。言い訳全開。

line163 :
line-height:140%;

行間が初期値だとちょっと詰まりすぎな印象なので広げる。100% が初期値で、確かこれも % 指定はあまり良くないとか言われてた気がするんだけど頭が弱くて思い出せないので割愛。単位なしの数値のみの方がいいんだったっけなぁ。問題発生したら検索でもしてください。

line167-172 :
@media screen {
p, dd, li {
text-align:justify;
text-justify:inter-ideograph;
}
}

IE の独自拡張。CSS 3 で採用されるんだっけ。テキストの両端揃え（右端がガタガタしてるのがあまり好きじゃないので）なんだけど、MacIE でバグがあるそうなので @media で避け。Mozilla でも妙な表示になるみたいだけど可読性が酷くなるわけでもないし、うちのお客さんは九割近く IE なので黙認。数の正義。とかじゃないよ。本当に。

line243 :
text-indent:1em;

monologue では p に全部 text-indent 振ってるけどこっちではちょっと間違った使い方で。margin との違いは、二行目以降（br でも折り返しの改行でも）に余白がつかないという、それだけ。本来は段落先頭の一字下げみたいな部分で使うのが正しいだろうと思うので、これは多分良くない使い方。margin で代用した方が良さそうだけど後で後で。

あとはこれの繰り返しとか組み合わせで何とかできるはず。特殊なことは何もしてません。line167-172 くらいかなぁ。CSS は単純なものをいかに組み合わせて配置するかが楽しいのであって、誰でも利用可能な単純な技術を使用していかに少しでも見栄えが良いかも知れないようにいじるか、という部分に病みつきになる何かがあるのだと思われます。position とか float も使ってるんだけど、あまり面白くないような気もするので割愛。

CSS 楽しいのでこれから始める人は頑張ってください。あと Strict な HTML 使った方が正しい結果が導かれるので（日本語怪しい）それをまず頑張ってください。

って感じで。今後 CSS のこと聞かれたらまずこのエントリーの URL コピペしますよ、と。自分に言い聞かせる。よし。

23:25 追記
この CSS ファイルはしょっちゅういじるので、行番号はどんどん変わるかも知れませんよ、と。実際今ちょっと書き直したりして。

23:58 追記
全体の概要もなきゃわかりにくいな、ってことで書きました。でもわかりにくい。