| 平凡でつまらない |
危険度：★★★ |
42 枠にとらわれたデザインになるのを解決
文＝高津戸壮（zudolab）
XHTMLとCSSを書いていると、どうしても枠にとらわれたデザインになってしまいがちだ。XHTML文書は、要素をどんどん入れ子にし、その中にまた要素を配置していくという流れで書いていく。そこに見栄えをCSSで指定していくため、どうしても、枠の中に配置するという意識をもちながらデザインを考えるのが自然になってしまうのだ。positionプロパティを利用すると枠を飛び越えて要素を配置できるので、これを利用して、ちょっとしたアクセントをつける方法を紹介する。position:relativeを利用した、自由なレイアウト方法を身につけよう。
XHTML
CSS
【1】ここでは、商品を示すボックスの右上に、値引きマークをつける例を挙げて説明する。ここでのXHTMLは、上記のような形だ。ここでは枠を囲う＜div＞要素と値引きマークに絞って説明する。
【2】このようにすると、img.priceOffがdiv.productBoxの右上を基準とし、26ピクセル上に、16ピクセル右に配置される。文字量が変化したとき、文字の拡大・縮小を行ったときに、文字と重ならないように配慮して、ほかの要素のpaddingなどを調整しよう。
【3】ここでは図のような値引きマークの画像を用意した。そのほか、日付、そのボックスのタイトル部分、補助的な説明画像、短い注釈など、応用できる部分は多いだろう。backgroundを指定した空の＜div＞や＜span＞要素を飛び出させて、装飾に工夫を施すのもおもしろい。
［INDEX］
●整理されていない
>>> 03 リストマーカーと個条書きのバランスが悪いのを解決
>>> 04 大量の要素がびっしり詰まっていて全体的に見づらいのを解決
●やぼったい
>>> 33 表の背景がきれいに表示されないのを解決
>>> 34 写真を入れると文章が読みにくいのを解決
●平凡でつまらない
>>> 41 長方形のボックスにインパクトが足りないのを解決
>>> 42 枠にとらわれたデザインになるのを解決
●メリハリがない
>>> 75 画像とテキストの上辺の位置がそろわないのを解決
>>> 76 テキストリンクがパッとしないのを解決
