フォントサイズや使うフォント、テキストの内容によって始まる位置が微妙に違うので、うまくそろえたほうがいいのだが、CSSだと大変だ。レイアウトをする際、CSSだとmarginやpaddingをいじれるおかげで、つい見出しや他の要素ごとに左の余白を変えたくなる。だが、左端をそろえたほうがすっきりする場合も多い。
まずは、テキストの左端をそろえるといいらしい。見出しも、本文も、はじまる場所を同じにする。見出しに背景色やボーダーを指定したときには、背景やボーダーは左側にはみださせ、テキストの開始位置が本文とそろうようにするといい。
フォントサイズや使うフォント、テキストの内容によって始まる位置が微妙に違うので、うまくそろえたほうがいいのだが、CSSだと大変だ。
たとえば、IE6、文字サイズ中、ＭＳ Ｐゴシックの場合、見出しのようにフォントサイズを大きくした要素は、本文より1～2ピクセル左側から文字をはじめると、文字の開始位置がそろう。逆を言えば、margin-leftの数字だけをあわせると見出しなどは内側に埋もれたように見えてしまう。フォント自体の余白が、フォントサイズ拡大に従って大きくなっているためである。フォントやフォントサイズが変われば、どれくらいずらすといいかも変わることになる。
また、使う文字によっても、ぴったり左端に寄せたように見える位置は変わってくる。どこかでみた例だけど、大文字のWが先頭のときは、わざとやや左にはみ出させたほうがそろっているように見える、などだ。
だから、それっぽく見えるよう、あんまり無理しない範囲でやることになる。
画像にfloat: leftを行い、右側に文章を並べるときにも、画像と後続の文章の上端や、画像と他の本文との左端がそろうときれいに見えるだろう。これも、状況によってばらばらなので適当に。画像の場合、色による見た目の膨張、収縮もかなり効いてくる。画像の左端をそろえるための個人的なオススメは、画像の角を丸くする方法か、画像を1px右側に寄せる方法だ。どちらも、なんとなくそろったように見える。
ul要素のリストでは、マークの左端がそろうといいらしい。
list-style-imageだと位置あわせが大変なので、背景画像を使う。最近のオススメは、liのline-heightを1.5にし、marginをゼロにし、padding-leftを適度にとり、7 by 7ピクセルで作った画像をbackground-position: 1px 0.5emに置く方法である。ブラウザやフォントやフォントサイズによって多少の誤差は出るが、それなりにそれっぽい位置におさまってくれる。特に、フォントサイズを変更したときに破綻しにくい。画像表示をoffにされたらおしまいだけれど。
ul li {
list-style-type: none;
margin: 0;
padding-left: 22px;
background-image: url(mark.gif);
background-position: 1px 0.5em;
background-repeat: no-repeat;
}さあ。かっこよさなんて、人によって違うし。だが、そういうのに気をつけながら他のウェブサイトや印刷物を見てみるといいかも。