リデザイン @ 2011-02-07

Reset CSSの変更

リクエストの削減のためにYUIのCSS ResetとCSS Fontsを使うのをやめ、CSSファイルにEric MeyerのReset CSSを参考にしたものをベタに書くことにした。Reset部分はパブリック・ドメイン。欲しかったらCSSのソースからコピペでどうぞ。meyerwebのReset CSSとの違いは、

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: inherit;
  font-weight: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: inherit;
}

辺りで、フォントの見た目は親から継承するようにして、

<em><code>-webkit-transform</code></em>

こういうネストで親のスタイルをちゃんと継承できるようにした。もうひとつは、

li {
  list-style: none;
}

olやulの代わりにliでリストのマーカーを消すようにした。こうしておくと、

li {
  list-style: inherit;
}

とすればブラウザのデフォルトのマーカー設定に復帰できるので、ネストしたリストでマーカーが階層ごとに変わっていくという多くのブラウザのデフォルトの挙動を維持できる。

フォント指定

フォントはもうpx指定で良いかなと思ったのでそうした。

body {
  font: 16px/1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}

行間は1.5～1.75くらいが日本語(文字によってグリフの高さがほとんど変化しない言語)には良い気がする。

セマンティックなHTMLへ変更しようとして挫折

せっかく燃えて死ねを翻訳したので、例としてここもセマンティックなHTMLにしようかと思っていたんだけど、他のページはともかくウェブログのエントリにあるHTMLコードの移行が激しく面倒なので諦めた。言うほど簡単じゃないよね！

<p class="image"><img src="http://example.com/images/foobar.png" alt="Example Image"></p>

となっているのを、

<figure>
  <figcaption>Example Image</figcaption>
  <img src="http://example.com/images/foobar.png">
</figure>

とかはまだマシな作業(確認が面倒なだけ)だけど、

<h2>Heading</h2>

<p>Pellentesque nunc turpis, pellentesque quis pulvinar sit amet, facilisis in enim. Cras posuere laoreet ultricies. Aenean blandit sagittis rutrum. Sed quis arcu ligula, ut condimentum sapien.</p>

<p>Nulla pulvinar mi at odio mollis nec luctus lorem bibendum. Sed vitae ullamcorper lacus. Integer neque mauris, pretium sollicitudin feugiat id, tincidunt at ligula. Suspendisse sagittis egestas urna, eget semper odio ultrices ut. Donec ut diam id justo faucibus dignissim eu eu est. Duis auctor malesuada sagittis.</p>

とか各エントリでたまに出てくるセクションをちゃんと考慮して、

<section>
  <h1>Heading</h1>

  <p>Pellentesque nunc turpis, pellentesque quis pulvinar sit amet, facilisis in enim. Cras posuere laoreet ultricies. Aenean blandit sagittis rutrum. Sed quis arcu ligula, ut condimentum sapien.</p>

  <p>Nulla pulvinar mi at odio mollis nec luctus lorem bibendum. Sed vitae ullamcorper lacus. Integer neque mauris, pretium sollicitudin feugiat id, tincidunt at ligula. Suspendisse sagittis egestas urna, eget semper odio ultrices ut. Donec ut diam id justo faucibus dignissim eu eu est. Duis auctor malesuada sagittis.</p>
</section>

にするとかは考えただけでも気が遠くなる。セクションの終わりが機械的にわからないので。誰だよこんなHTML書いた奴。<div class="section">...</div>で括っとけば良かった……。

ロゴタイプとヘッダー

使ったフォントはlelim Light300で、

#header {
  text-shadow: 1px 1px rgba(255, 255, 255, 0.5);
}

と同じような効果をかけただけ。

ナビゲーションの星マークはユニコードのアレ。

#header #navigation:after, #header #navigation li:before {
  margin: 0 4px;
  float: left;
  content: "\2605";
}

Media Queries

とりあえずなんとなくいくつかに分けてみた。だけ。画像はサイズ指定なしにしておいて、max-width: 100%;なのでアスペクト比を維持したまま適当にリサイズされることと思う。