最終目標のリキッドデザインにしました。sharpgreenのブロック分けと回り込み（float）のさせ方はオーソドックスなので、各ブロックに指定されているwidthの値を相対値にするだけの小変更で可能です。この部分のCSSも別ファイルでリンクしてあります。
サイドメニューがあるのでSVGA（800x600）はちときついですけど、主流（と思われる）XVGA（1024x768）の解像度で観覧するとちょうど良いかも。幅を大きく取れるということは、一画面内の情報量を増やすにしても、文字サイズを大きくして読みやすくするにしても有利だと思います。
以前、フォーラムでフォントサイズと画面サイズの話題がありました。ユーザの解像度は解析で調べることができますが、ブラウザ（窓）のサイズまではわかりません。人それぞれの使い方があると思います。リキッドデザイン＋文字サイズ可変の良さは、読み手の使い方に対して柔軟なところです。意味は違えどsharpgreenの良さも柔軟さです。色と形、両方に手を入れましたが、sharpgreen spiritsは残っていると思います。
今日の小ネタ。2枚の背景画像をピッタリ合わせるには。
sharpgreenの特徴である角丸ヘッダー画像はbodyに指定された背景で丸く切り取ってあるように見せている。水平ラインなら、窓サイズを変えてもズレは生じないのだけど、斜線だと一致しない位置がでる。
別の要素と重ねて背景を丸く透過する方法もあるけど、リキッドデザインにすることでも解決できる。今回の場合、右端からのピクセルを数えて、上下（z-index）の背景画像のラインが一致する分だけ手前背景の要素にmargin-rightを指定し、奥背景のbackground-repeatは100% 0に指定する。基点を右端に合わせるのがコツ。固定デザインで同様なケースの場合は中心線から数える方法もある。
< センスのNASAについて | 空一枚 > | 表紙へ戻る |