Lesson 12 1枚の絵のような写真とテキストのレイアウト - Webデザイン表現&技法の新・スタンダード・レイアウト編

Webデザイン 表現&技法の 新・スタンダード

Lesson 12

1枚の絵のような写真と テキストのレイアウト

	制作・文			高村香奈子（株式会社アークフィリア）
＞	To Use			CSS
＞	Browser			IE 8over | Firefox 5over | Safari 4over

コンテンツのほとんどは写真とテキストの組み合わせによって表現される。6枚の写真とキャプションを例に、画面が魅力的に見えるレイアウトをつくってみよう。

日常の写真を見せるページを想定。まずは写真とキャプションを整然とレイアウトしてみたのが【1-1】だ。シンプルで整っており、見やすさや更新性を重視する場合はこれでもよいだろう。しかし、このままではカタログ風に見えるので、ここで もうすこしビジュアル的に楽しい画面にしていこう。


【1-1】コンテンツの目的に合ったレイアウトを考えることが重要

写真とキャプションをパネルのように扱い、まとまった1枚の絵のようなデザインにした【2-1】。写真の大きさに強弱を付け、ランダムに配置。キャプション部分は色の付いた吹き出しにしている【2-2】。このとき、吹き出し部分に付ける色は、Fireworksなどのスポイトツールで写真の中の色からピックしている。こうすることで色みにまとまりが出るため、写真と吹き出しがひとつの情報のまとまりとして認識しやすくなる【2-3】【2-4】。


【2-1】色面が増えると楽しい印象になる


【2-2】キャプションも絵の要素として取り入れてみる


【2-3】写真の色味と吹き出しの色が近いと、どの写真に対するキャプションか認識しやすい


【2-4】写真と吹き出しの色がばらばらだと、対応関係がわかりづらい

つくったデザインをFireworksなどを使ってパーツごとにスライスする【3-1】。写真と吹き出しのパーツをそれぞれ分けて書き出しておこう。


【3-1】Fireworksでスライスしたところ

ランダム性があるためコーディングが難しそうだが、HTMLのソース自体は簡単なリスト構造で記述できる【4-1】。全体を<ul>で囲み、写真とキャプションを1つのセットとして<li>で囲む。レイアウトの左上からナンバリングし、<li id="Photo01">とid名を付けていく【4-2】。


【4-1】<div class="text">の中にはキャプションと日付を入れた


【4-2】id名と画像の書き出し名をナンバリングして管理すると分かりやすい

CSSを記述する。各セットの配置と、吹き出し内のキャプションの位置をpositionでレイアウトする。位置を正確に出す必要があるので、各セットのピクセル数を事前に 計っておくと配置しやすい【5-1】。全体の<ul>の幅を590pxに固定、各セットのレイアウトを指定するためにposition:relative;にする。また、リストのマークを消すためにlist-style-type:none;を指定【5-2】。さらに、吹き出し内のキャプションをレイアウトするために、各セットのidに対してもposition:relative;を指定する【5-3】。


【5-1】Firewoeksで写真と吹き出しを選択すると、合計サイズが分かる


【5-2】<ul>の中でそれぞれの座標を指定していく


【5-3】

各セットごとに、position:absolute; で<ul>からの位置をピクセル指定する【6-1】。写真と吹き出しのサイズを足した縦横の値を指定し、背景に吹き出しの画像を設定するのだが、吹き出しが写真に対しどの位置にあるのかによって、背 景の指定位置を変える必要がある。たとえば吹き出しが写真の下にある場合は、background:url(images/Comment05.png) no-repeat bottom;となる【6-2】。また、写真が吹き出しに対して右側にくるものに関しては、text-align:right;でブロックの右側に配置する【6-3】。


【6-1】それぞれのセットに対して、縦横のサイズ、座標、背景画像などを指定していく


【6-2】背景に吹き出し画像を設定し、位置を指定する


【6-3】text-align:right;で画像を右に寄せる

吹き出し内のキャプションのレイアウトを調整する。キャプションにつけたクラスに対してposition:absolute;を設定【7-1】。それぞれ<li>からみた座標位置をピクセル指定する。吹き出し内には、10pxを余分にとって見やすくする【7-2】。キャプションの文字サイズや色、行間を調整する。最後にキャプションと日付の間隔をとったら完成だ【7-3】。


【7-1】吹き出しのエリア内でキャプションの位置を指定していく


【7-2】吹き出し内に10px余白を空けるように座標を指定する


【7-3】