v6.2

v6.2。

明るい青のグラデのスタイルが不評だったので、モノクロ+淡い青で作り直した。

カラム

max-widthで幅を制限してるだけだが、一応16pxベースのカラムにした。SCSSではこんな感じでカラム定義すると使いやすい気がする。

// Grid
$gutter: 16px;
$column: ($gutter * 3);
$margin: ($gutter / 2);

20pxベースの12カラムで960pxになるメジャーな奴に戻すかも。

カラーパレット

#88bbccからColor Scheme Designer 3で作った。#88bbccに辿りつくまでが長かった。

// Color
$darkest:  rgb( 44, 111, 133);
$dark:     rgb(115, 143, 153);
$normal:   rgb(136, 187, 204);
$light:    rgb(172, 215, 230);
$lightest: rgb(187, 219, 230);
$fg:       rgb(  0,   0,   0);
$bg:       rgb(255, 255, 255);
$link:     $darkest;

SCSSではこんな感じに定義して使ってる。ベースの色のみでadjust-hue()とか駆使するとかっこいい気がするけど面倒ですよねー。

フォント

Webフォントをゴリゴリ使いたくなったので、Google Web FontsのLobsterをロゴ、PT Sansを本文に使った。PT Sansはちょっと微妙な気もする(数字は可愛いんだけどメイリオとの相性がイマイチなような……)のでLucidaスタックに戻すかも。

サイズは14pxベース。16pxとまだ迷ってる。line-heightは最初は1.5で作ってたけど、結局1.75にした。日本語みたいなx-heightとかなにそみたいな言語だと1.5でもまだ狭い気がする。でも計算しづらいので1.5にしたい(ひどい理由)。

背景

ヘッダとフッタは薄く斜線を引くというWeb 2.0な感じ。この簡単なパターンは最初CSSグラデーションで作ったが、Firefox 4では細かいCSSグラデーションを並べるとCPUを食い尽くす感じなので4px四方の画像にした。コンテンツ部分は流行ってる気がする薄いノイズ。ヘッダの下にちょっとだけグラデーションをかけた。

フッタのアイコン

CSSでアイコンをデザインの手法で作った。Octcatかわいいね！

いくつかぶつかったブラウザのバグ、例えば特定のCSSプロパティを組み合わせるとChromeでうまく画像が表示されないとかについてはまた今度書く。

hr {
  border-top: 4px solid #f2f2f2;
  border-right: 0;
  border-bottom: 1px solid white;
  border-left: 0;
}

で微妙に凹んだ感じに見える太い罫線のCSSが一番のお気に入り。淡すぎてよく見えないけどね……。