実は、それぞれの要素(pやaやtableなど、タグとして使っているもの)は、画面上には、ボックスというものが存在しています。 表示は、されていませんが、見えてなくても、それぞれの、要素は四角い、ボックスと言われる領域で囲まれています。 | |
ボックスは、指定をしなければ、基本は、幅は画面いっぱいとなります。 高さはそれぞれの要素によって、違います。 例えばH1タグとH6タグでは、横幅は同じですが、高さは変わります。 あとで、勉強するCSSには、このボックスの観念は絶対必要となります。 実際に色を付けながらじゃないと分かり辛いですので、CSSのときに、たくさんやってみてください。 画像を貼付けする時も、画像を貼りたい領域のボックスの大きさを指定してあげて、貼っていくとレイアウトしやすいです。 詳しくは、cssの章でまなびます。 | |
<p >ボックスを表示</p> | |
実行結果 | |
(1)ボックスを表示 | |
(2)ボックスを表示 | |
(3)ボックスを表示 | |
(1)は、色以外のボックス領域(幅等)を操作してませんが、このボックスは、長さが450pxのテーブルの中に書いてあるので、表示している長さで止まっています。 | |
(2)は、ボックスの枠線の幅を細く指定しました。 色は(1)と同じです。あと、向かって右側の余白領域を指定する事で、ボックスの見た目の幅が狭くなってきますね。 | |
(3)は、ボックスの枠線の幅を太く指定しました。 色は(1)と同じです。余白領域をさらに広くとる事で、文字の表示領域が狭くなり、自動的に改行され、下にボックスが広がりました。 詳しい指定法はcssの章で記載しますので、今は、ボックスという領域があるんだな〜と覚えていてください。 | |
戻る(ボックス) | 次へ (トラブル) |