 | ||
 | ||
| ページを作っていく上で、BOXを知り理解する事は非常に重要です。 この仕様（どのようになっているか）を良く理解する事で無駄な試行錯誤が格段に減ります。 | ||
| ページを構成している各要素（文字や画像等、上の画像でBOXと書いてある部分です）は、それぞれBOXという箱に収められています。 上の画像を見ていただくと、解りやすいです。 | ||
| 一番上の画像は、BOXとはこのように構成されているという図です。 見えにくいですが、一番外側の赤いラインが、画面の端です。 その端から（＊1下に説明文有り）コンテンツ（緑線）までの距離をmargin（マージン)といいます。 そして、コンテンツの外枠の幅をborder(ボーダー)といって、外枠の太さを指定します。 外枠から、コンテンツまでの距離をpadding(パディング)といいます。 そして、コンテンツの幅はwidth(ウィズ)同じくコンテンツの高さはheiht(ヘイト)で指定します。 | ||
| BOXは通常無色ですので何らかの色や幅を指定しない限り、上の図のような状態にはなりません。 上の図では、borderやpaddingに幅をcssでしっかり指定して色までついてますが、通常このような事はありません。 色分けや、幅を指定したい場合はcssで指定する事になりますが、上の例では、解りやすいようにpaddingとコンテンツを色分けしてますが、基本的にpaddingの色はコンテンツの色と同じになります。 幅はそれぞれで指定できます。 | ||
| 察しの良い方は、今の説明でお分かりかもしれませんが、ページの背景画像 | ||
| ＊1コンテンツ：表示させたい、文字や画像や動画の事です。 上の図では、BOXと書いてある文字そのものが、コンテンツという事になります。 | ||
|