| | | |
2004年 7月 31日 土曜日
ここではリキッドデザインをCSSでデザインするための方法の一部を記述します。
いわゆるアクセシビリティと名がつくWebページで横幅を固定したところがあります。ディスプレイの幅が800ピクセルであっても横スクロールを発生させない要件のためにしているのですが、本来、アクセシビリティを追求していくのであれば矛盾を抱えているデザインです。
リキッドデザインをテーブルでレイアウトするのは幅の単位を%で指定するだけで容易に作成できますが、テーブルをレイアウトのために使わないことが望ましいとJIS 8341-3:2004で記述されていますからCSSでデザインしていきます。
角丸はよく使うデザインなのですが、ブラウザ固有のプロパティであったり、CSS未対応のブラウザの対応の見た目がおかしくデザインされることが多いです。ここでは利用者がスタイルシートを使用できない場合、又は意図的に使用しないときにおいても、ウェブコンテンツの閲覧および理解に支障が生じてはならない。とJIS 8341-4:2004に対応させます。
※サンプル1です。内部スタイルシートになっていますから、GoLiveの「ページをダウンロード」機能で参照するといいと思います。
※サンプル2です。上罫線部分に見出し(h2)用のテキスト画像を追加しています。同じく内部スタイルシートになっていますから、GoLiveの「ページをダウンロード」機能で参照するといいと思います。
Netscape 4.x対応でCSSをカットしておけば、このようにウェブコンテンツに影響を与えない仕組みが、今回のサンプルの特長です。
ウィンドウの幅にあわせて伸び縮みする画像です。
実際の画像は左向きの矢印部分が幅251ピクセルで、右側の矢印は背景画像が表示されています。
右側の背景画像は、縦が251ピクセルで、幅が2,000ピクセルほどあるんですが、横を100%と指定することにより右揃えさせています。
横方向の単位はrightと指定しているWebサイトが多いのですが、%で指定する方が多くのブラウザで認識されると思います。
今回のスタイルシートは外部がファイルにしていますから、興味のある方は参照して下さい。
Googleで「リキッドデザイン」を検索キーワードにした結果です。
Copyright © 1998-2006 OUTDOORMAC All Rights Reserved.
