ボックス
実は、それぞれの要素(pやaやtableなど、タグとして使っているもの)は、画面上には、ボックスというものが存在しています。

表示は、されていませんが、見えてなくても、それぞれの、要素は四角い、ボックスと言われる領域で囲まれています。
 
 ボックスは、指定をしなければ、基本は、幅は画面いっぱいとなります。

高さはそれぞれの要素によって、違います。

例えばH1タグとH6タグでは、横幅は同じですが、高さは変わります。

あとで、勉強するCSSには、このボックスの観念は絶対必要となります。

実際に色を付けながらじゃないと分かり辛いですので、CSSのときに、たくさんやってみてください。

画像を貼付けする時も、画像を貼りたい領域のボックスの大きさを指定してあげて、貼っていくとレイアウトしやすいです。

詳しくは、cssの章でまなびます。

<p >ボックスを表示</p>

実行結果

(1)ボックスを表示

(2)ボックスを表示

(3)ボックスを表示

 (1)は、色以外のボックス領域(幅等)を操作してませんが、このボックスは、長さが450pxのテーブルの中に書いてあるので、表示している長さで止まっています。
 
 (2)は、ボックスの枠線の幅を細く指定しました。

色は(1)と同じです。あと、向かって右側の余白領域を指定する事で、ボックスの見た目の幅が狭くなってきますね。
 
 (3)は、ボックスの枠線の幅を太く指定しました。

色は(1)と同じです。余白領域をさらに広くとる事で、文字の表示領域が狭くなり、自動的に改行され、下にボックスが広がりました。

詳しい指定法はcssの章で記載しますので、今は、ボックスという領域があるんだな〜と覚えていてください。
 

戻る(ボックス)次へ (トラブル)
©WEBプログラミング 入門&リファレンス