Category : Design

previous entry clearfixでfloatを解除 | font-size指定 next entry

数で合理的にデザインする - サイズ編

Date2007-03-08 CategoryDesign Tagssize

サイズ編とカラー編の2回にわたって書くつもりです。今回はサイズについて。

「やってみたらちょっと大きすぎた / 小さすぎた」といった試行錯誤もデザインの醍醐味ではあるのですが,あらかじめ数を知っていると合理的にデザインすることが出来ます。

468px

アフィリエイトプログラムを組み込む場合,コンテンツ部分の幅は最小で468px。AdSenseやAmazon,その他アフィリのバナーがこのサイズだからです。写真やキャプチャなどの画像も468px以内にしておけばよいでしょう。リキッドレイアウト(可変幅)にしたときも,468pxより縮められないようにすれば,画像がはみ出さずにすみます。

3 : 4

デジカメなどで撮影した写真の縦横比は3 : 4です。トリミングする際も3 : 4を維持すれば,形の統一がはかれます。縦横比やサイズを合わせておくと,画像を何枚か並べるときもきれいに並べられます。

アイコンのサイズ

80×15pxと91×17pxのものが多いようです。Faviconは16×16px。ミニアイコンもこのサイズで作られることが多いでしょう。並べるときはサイズが揃っているときれいです。サイドのメニュー部分の幅を決めるときもアイコンを並べることを想定しておくとよいでしょう。185pxあれば91×17pxが2つずつ並べられますが,180pxでは並べられなくなります。ちょっとした違いでデザインの柔軟性を損なうことがあります。

詳細はまた改めて書きますので,今回は概要のみ。詳細は font-size指定 で。こちらは概要のみ。

font-size: 100%;とするとブラウザで設定した標準文字サイズになります。デフォルトでは16pxになると思います。 たとえばfont-size: 86%;とした場合,16px × 0.86 = 13.76px となりますが,各ブラウザともこれを整数値に直して表示します。

  • Mac Firefox2,Win Opera9,Mac Opera9は端数を切り捨てて13pxで表示します。
  • Win IE6,7,Win Firefox2,Safari2四捨五入して14pxで表示します。
  • ただし,Win Firefox2はサイズが1px変わるところがWin IEと微妙にずれています。 86%を85.5%(四捨五入して86%になる最小値)として計算しているような感じです。

font-sizeのテスト用のページを作りましたので,試してみてください。

セレクタをグループ化

たとえば...

p,
ul,
ol,
dl,
pre {
 margin: 15px 0;
}

.adsense,
.amazon,
.affiliate {
  margin: 15px auto;
}

というふうにしておくと,要素ごとにmarginがまちまちになることがなくなります。変更するときも書き換える箇所が少なくてすみます。要素ごとの細かい設定があれば別途記述することにして,まず大枠を一括して書いておきます。

参考

Top