（10-F）リキッドレイアウトに対応した画像の配置

2009.4.1 WED

CREATIVE POINT F

リキッドレイアウトに対応した画像の配置

	KEY WORD 1		背景画像の右ぞろえ・中央ぞろえ・左ぞろえを活用する

	KEY WORD 2		背景画像は「リピートなし」に設定する

Dreamweaverで素材を配置していく。bodyの背景画像として、黒のブラシで描いた画像を適用する【1】。「background-repeat:no-repeat;」として、背景画像が繰り返さないようにしておく。＜div＞要素「red」を配置して、この背景画像に赤のブラシで描いた画像を適用する。背景画像を右上に配置し、これも繰り返しは「リピートなし」に設定する【2】【3】。中身がないと背景画像を表示できないので、いったん高さを「500px」程度に設定するとよい。次に＜div＞要素「red」の中に＜div＞要素「white」を配置して、この背景画像に白のブラシで描いた画像を適用する。背景画像を中央の上に配置する【4】。

さらに＜div＞要素「white」の中にdiv要素「title」を配置し、タイトル画像を背景画像として左下に配置する【5】。このdiv要素「title」の中に＜div＞要素「navi」を配置して、3つのボタンを配置して完成する【6】。黒いブラシで描いた模様が左、赤が右、白が中央に配置されているので、ウインドウの幅を変更すると、重なり具合が変わる【7】【8】。