ちょっとだけリデザイン @ 2006/08/29

Posted at 2006-08-30T06:48:00+09:00 in Web Design

全面的に作り直そうというか色を変えようと思っていたのだけど、面倒になったので考えていたアイディアの一部を使って少しだけリニューアル。メニューのカラムを突き出る感じ(どんな感じだ)にし、それに合わせてフッターを少し弄った。HTMLは弄ってない。ポリシーではなく面倒だったから。妙に見えたらCtrl+F5で。

メニューの部分がのっぺりだらーっと伸びているのが気になってきたので、パーツごとに分離独立する形にしようと考えていた。本来はちゃんと作り直す予定だったのだけど、色を変えるのすら面倒になったので、これまでのメニュー・カラムの背景画像をうまく再利用してみた。

メニュー・カラムはdl要素でマークアップされているので、右上が角丸の画像をdt要素の背景、右下が角丸の画像をdd要素の背景にするだけで大体完成。dt要素内のテキストを浮く感じで配置するには、背景画像を右下に繰り返し無しで置き、適当にpadding-bottomを確保(ここでは背景画像の高さ分だけ)すれば良い。dd要素の高さは不定だが、背景画像はあらかじめ縦長(ここでは2400 pixel)にしておけば途切れることはまず無い。dt要素のpadding-bottomやdd要素のpadding-topを0にしてしまうと、中身の要素のmarginにあたる部分には背景画像が表示されないので、こういったことをやろうとしている人は気をつけると良い。

フォント指定は、

@charset "UTF-8";

/* ---------------------------------------------------------------------

  Title:    hail2u.net default styles for fonts
  Author:   Kyo Nagashima 
  Modified: 2006-08-29T15:17:35+09:00
  License:  http://creativecommons.org/licenses/by-nc/2.1/jp/

  This style based on Yahoo! UI Library's Fonts CSS
  Copyright (c) 2006, Yahoo! Inc. All rights reserved.

--------------------------------------------------------------------- */

body {
  font: 13px Verdana, Geneva, sans-serif;
  *font-size: small;
  *font: x-small;
}

h1, h2, h3, h4, h5, h6, dt {
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
}

table {
  font-size: inherit;
  font: 100%;
}

select, input, textarea {
  font: 99% Verdana, Geneva, sans-serif;
}

pre, code, samp, kbd, var {
  font: 100% 'Lucida Console', Monaco, monospace;
}

という、Yahoo! UI LibraryのFonts CSSをベースにしたものに変更。この変更に合わせて、メインのCSSファイル内でのフォント・サイズの指定を%単位にしたり、em単位での長さ指定の値の調節とかどうでも良いことにも手を入れた。

他に8bitと24bitのPNGが混在していたおかげでInternet ExplorerやSafariで微妙に色ずれを起こしていたのも直したつもり。

追記@2006/09/01

htmlへの前景色や背景画像などのスタイル指定を削除するために背景画像を変更し、それに合わせてmarginやheightなどを調節したりとか。スーパー・リロード(Ctrl+F5)必須。