ワイヤーフレーム

さて、サイトデザインを始めるにあたり「ワイヤーフレーム」というものを作ります。



ワイヤーフレームとは、いわゆるサイトの設計図みたいなもの。



「ここに画像を配置」とか「テキストをここに配置」みたいな、ページ内で「何を」「どこに」「どのように」表示させるかをまとめたものです。


このワイヤーフレームの段階で骨組みを固めておくと、その後の作業がスムーズに進行できます。


実際Photoshopなどで作りますが、白背景に黒い線などで骨組みを作っていきます。


ここではザックリとしたものでＯＫ。


これで配置など大まかな部分を決めて制作に入りましょう。

ボックスモデル

文書内のすべての要素は、ボックスと呼ばれる四角形の領域を生成します

各ボックスは、テキストや画像などの内容領域（Content Area）を持っており、その周辺に、パディング（Padding）、ボーダー（Border）、マージン（Margin）の順に周辺領域を持つ事が有ります領域の大きさは、各プロパティによって指定する事ができます

また、この各領域の境界を「辺」（Edge）と呼びます。この「辺」は上下左右の4辺に分ける事が可能で、それぞれにスタイルを指定する事ができます




それで、




内容領域（Content Area）
パディング（Padding）
ボーダー（Border）
マージン（Margin）

この４つで構成されます