このところ、「CSS ダサい」というキーワードでいらっしゃる方がたまにいる。ADPをよく読んでらっしゃる方は、どのエントリにたどり着くかわかるだろう。
個人的な意見だが、CSSを使ったページがダサくなってしまう典型的な理由は、ひとつはボーダーをやたらと使いすぎること、もうひとつは余白のとり方がいいかげんなこと（狭すぎで種類が多すぎ）、だと思っている。
どちらも原因は同じで、設定できるからやっちゃう、ということだろう。borderを設定できるから、たくさんいろいろ指定したくなるし、marginやpaddingを変えられるから、見出しや他の要素ごとにいろいろ変えてみたくなる。
だが実際には、ボーダーはそれほど使う必要がないし、見出しも本文も左端をそろえたほうがきれいに見えたりする。
そこで、ボーダーはとりあえずおいておいて、CSSを使ってできるだけ左端をそろえてみよう、というのが今回のネタだ。詳しくは、サンプルファイル「左端をそろえる」を参照してほしい。印刷物のほうでは常識なのかもしれないが、そっちは本当に素人なので、いつもにもまして適当になっている。あらかじめお許しを。
概説。
グリッドはテーブルレイアウトのときだけでなく、CSSを使うときも意識する必要がある。特に、余白を適度に作ったうえでテキストの左端をそろえることは、見た目をすっきりさせることに貢献できる。
印刷物と違い、フォントやフォントサイズ、環境がいろいろ違うウェブでは、左端を正確にあわせるのは難しい。また、数字上ぴったりあわせても「にんげんさま」が見るとぴったりには見えないこともある。それをふまえ、それっぽく見えるよう、あんまり無理しない範囲でやることにする。
見出しは、フォントサイズを大きくしている場合、margin-leftの数字だけをあわせると本文に比べ内側に埋まったように見えることがある。フォント自体の余白が、フォントサイズ拡大に従って大きくなっているためである。この場合、見出しは多少（1～2ピクセル）左にはみ出させてはじめるといいようだ。使うフォント、使うテキストの内容によってもずれが生じるので、この1～2ピクセルのずれがどうしても気持ち悪いと感じたら、画像を使うことになる。
左寄せした矩形画像やul要素のリストのマークも、本文と左端があうときれいだ。が、ふつうにやるとやや左にはみ出しているように見える。この場合、画像の四隅を角丸に加工したり、リストのマークを丸くしたりする方法と、画像やマークを本文より1ピクセル右に寄せる方法が考えられる。
もちろん、左端を全部そろえる必要はないし、1～2ピクセルのずれに神経質になる必要もないと思う。
だが、余白のパターンをたくさん作ってしまうのはあまりよくない。他のウェブサイトや印刷物を見るときに、こことここはそろえている、ここは変えている、というのを気にするようにすると、参考になるはず。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/517