Webデザイン |
Lesson 12 | 1枚の絵のような写真と テキストのレイアウト |
制作・文 | 高村香奈子(株式会社アークフィリア) | |||
> | To Use | CSS | ||
> | Browser | IE 8over | Firefox 5over | Safari 4over |
コンテンツのほとんどは写真とテキストの組み合わせによって表現される。6枚の写真とキャプションを例に、画面が魅力的に見えるレイアウトをつくってみよう。 |
01
【1-1】コンテンツの目的に合ったレイアウトを考えることが重要
02
【2-1】色面が増えると楽しい印象になる
【2-2】キャプションも絵の要素として取り入れてみる
【2-3】写真の色味と吹き出しの色が近いと、どの写真に対するキャプションか認識しやすい
【2-4】写真と吹き出しの色がばらばらだと、対応関係がわかりづらい
03
【3-1】Fireworksでスライスしたところ
04
【4-1】<div class="text">の中にはキャプションと日付を入れた
【4-2】id名と画像の書き出し名をナンバリングして管理すると分かりやすい
05
【5-1】Firewoeksで写真と吹き出しを選択すると、合計サイズが分かる
【5-2】<ul>の中でそれぞれの座標を指定していく
【5-3】
06
【6-1】それぞれのセットに対して、縦横のサイズ、座標、背景画像などを指定していく
【6-2】背景に吹き出し画像を設定し、位置を指定する
【6-3】text-align:right;で画像を右に寄せる
07
【7-1】吹き出しのエリア内でキャプションの位置を指定していく
【7-2】吹き出し内に10px余白を空けるように座標を指定する
【7-3】