リデザインからの……

「h」が「n」に見えると不評だったロゴの変更

lelim Lightからlelim 300で、製作した人は同じ。Lightの矩形に収まる感じが好きだったけど、これはこれで好き。

ロゴのスライド方向を下方向(パチスロとかと同じ)に変更

こちらの方が自然な気がする。ロゴのスライドはCSS TransitionとFlicker Free (Flickerless) Image Replacementとか呼ばれているテクニックの組み合わせで簡単に実現できる。元画像の配置を工夫すれば横にも斜めにもスライドできる。

Reset CSSの微調整

プロパティをまとめたりとかいらなそうなものを削除したりとか。一から書き直した方の使用は保留。

overflow: auto;はやっぱり安定しないのでhiddenに変更

Firefox 3.6でヘッダにスクロールバーが出る(Firefox 4では起きない)という現象に出会したので変更した。ボックスに影をつける(box-shadowやtext-shadow)と発生しやすいようだ。text-shadowで起きるとは思わなかった。

clearfixに変更しようかとコードだけ追加

HTML5 Boilerplateのそれ。

imgにvertical-align: text-bottom;を追加

画像の下に空白ができたり、横に並んだ文字とうまく揃わないことへの対策。はてなスターとかでもスターとタイトル文字列を綺麗に並べるために使われてる。

.sectionのネストを考慮してmarginを削除

今後はサブ・セクションにも.sectionを使うことにしたので。各セクションのマージンは見出しに任せる感じ。……なのでclearfixとの兼ね合いをどうするか思案中。

見出しレベルの変更とそれに伴うスタイルの調整

これまで各ページに複数出現していたh1要素をh2要素に変更し、各大カテゴリをh1要素でマークアップした(昔はそうだったので戻したとも言う)。

ちょっと邪魔。ナビゲーションでh1要素使えば良いのかもしれない。

<ul id="navigation">
  <li class="weblog active"><h1><a href="http://hail2u.net/weblog/">Weblog</a></h1></li>
  <li class="documents"><a href="http://hail2u.net/documents/">Documents</a></li>
  <li class="archives"><a href="http://hail2u.net/archives/">Archives</a></li>
  <li class="about"><a href="http://hail2u.net/about/">About</a></li>
</ul>

イマココ！　をスタイルするために追加していたactiveというクラス名も必要なくなりそうだ。ここももうちょっと考えた方が良さそう。

ページ内に複数のh1要素が出現するマークアップについては、「あんまり良くないよね」から始まって、「そんなことないよ！」、「いやいや……」と議論百出だったけど、今はどんな感じなんだろう。あの時は「SEO! SEO!」とか「Googleがスパム認定するんじゃない？」とか明らかに変な方向に議論がすっ飛んでしまってた記憶しかない。

blockquote要素のスタイルで引用符の画像を表示

なんとなく。飾りが少なすぎて寂しかったので。あんまりブロックで引用しないんですけどね！　このオープン・クオートのフォントはGabriola。

ul要素とol要素のネストを考慮してmarginを削除

ブラウザのデフォルト・スタイルシートには大体ある奴。忘れていただけ。

フッタのアイコンをdisplay: inline;からdisplay: table-cellでの横並べに変更

改行の空白がどうしても気になるので、リストの横並びで不思議な空白ができるアレ、をスマートに解決するを使って……と作業をしていたらいつの間にかdisplay: table-cell;を使っていた。