スタイルシート講座 - 超初心者のためのホームページ作成講座

HTML では、レイアウトを決めるために作表タグ <table> を使ってその枠線や背景色などを設定しました。CSS では、表を使わなくてもタグとプロパティを組み合わせることでそれが可能になる上、幅や高さ、配置などをさらに細かく設定することができます。
CSS で幅( width )、高さ( height )を指定した四角形の範囲をボックスといいます。

(css file)
div{
background-color:#fc3;
width:400px;
height:150px;
}

(html file)
<div>
幅 width プロパティ、高さ height プロパティを使えば、ボックスの大きさを指定することができます。プロパティ値には長さを指定する単位を使うか、あるいは親要素に対する割合を使うことができます。このボックスは幅400px、高さ150pxですね。
</div>

幅 width プロパティ、高さ height プロパティを使えば、ボックスの大きさを指定することができます。プロパティ値には長さを指定する単位を使うか、あるいは親要素に対する割合を使うことができます。このボックスは幅400px、高さ150pxですね。

幅、高さを指定しなかった場合はこうなります。文章がちょうど入るくらいの大きさに設定されました。

段落を表す <p> タグや <div> タグにスタイルを設定してできるボックスを「ブロックボックス」といい、段落の中に使われる <span> タグや <strong> タグなどにスタイルを設定してできるボックスを「インラインボックス」といいます。

今度は幅、高さともにプロパティ値を auto にした場合です。指定しなかった場合と同じですね。

(css file)
div{
width:300px;
height:100px;
background-color:#9f9;
}

(html file)
<div>
文章が指定したボックスの大きさをはみ出してしまった場合はどうなるでしょう。このボックスは幅300px、高さ100pxに設定しましたが、これでは文章がはみ出してしまいます。<br>
この場合は、ご覧の通り幅は300pxのままで高さの値が自動的に変わって、文章がちょうど納まる大きさに調整されました。
</div>

文章が指定したボックスの大きさをはみ出してしまった場合はどうなるでしょう。このボックスは幅300px、高さ100pxに設定しましたが、これでは文章がはみ出してしまいます。
この場合は、ご覧の通り幅は300pxのままで高さの値が自動的に変わって、文章がちょうど納まる大きさに調整されました。

(css file)
div{
width:300px;
height:100px;
background-color:#ffc;
overflow:scroll;
}

(html file)
<div>
ボックスから文章がはみ出した場合の処理の方法を指定するには、overflow プロパティを使います。<br>
プロパティ値を scroll に設定すると、ボックスにスクロールバーが表示されます。このスクロールバーを動かせばはみ出した部分を読むことができます。ただし、scroll を指定すると文章がはみ出さない場合でも常にスクロールバーが表示されてしまいます。 </div>

ボックスから文章がはみ出した場合の処理の方法を指定するには、overflow プロパティを使います。
プロパティ値 scroll を指定すると、ボックスにスクロールバーが表示されます。このスクロールバーを動かせばはみ出した部分を読むことができます。ただし、scroll を指定すると文章がはみ出さない場合でも常にスクロールバーが表示されてしまいます。

(css file)
div{
width:300px;
height:100px;
background-color:#f6f;
overflow:hidden;
}

(html file)
<div>
今度はプロパティ値を hidden にしました。hidden は「隠れた」とか「目に見えない」という意味ですね。hidden を指定するとはみ出した部分は切り取られてしまいます。文章が読めなくなってしまうので、このプロパティ値を指定することはないでしょう。このプロパティ値がなんのためにあるのかわかりません(^^;
</div>

今度はプロパティ値を hidden にしました。hidden は「隠れた」とか「目に見えない」という意味ですね。hidden を指定するとはみ出した部分は切り取られてしまいます。文章が読めなくなってしまうので、このプロパティ値を指定することはないでしょう。このプロパティ値がなんのためにあるのかわかりません(^^;

(css file)
div{
width:300px;
height:100px;
background-color:#6cf;
overflow:visible;
}

(html file)
<div>
次はプロパティ値 visible です。visible は hidden とは逆に「目に見える」という意味です。visible を指定すると幅、高さの指定にかかわらず、全て表示されるようになります。でも、これって overflow プロパティを設定しない場合と同じですね。
</div>

次はプロパティ値 visible です。visible は hidden とは逆に「目に見える」という意味です。visible を指定すると、高さの指定にかかわらず、全て表示されるようになります。でも、これって overflow プロパティを設定しない場合と同じですね。

(css file)
div{
width:300px;
height:100px;
background-color:#ff9;
overflow:auto;
}

(html file)
<div>
プロパティ値 auto を指定すると、文章がはみ出した場合だけスクロールバーが表示されます。例えば、幅や高さの値を％で指定した場合、ボックスの大きさは見ている人の画面の大きさに左右されることになりますね（特に親要素 <body> の場合）。画面を大きくして見ている人はそのままで見ることができるし、もし画面を小さくしていても、ボックスの大きさが変わらずにスクロールバーを使って見ることができるので、画面のデザインを損ねることがありません。
</div>

プロパティ値 auto を指定すると、文章がはみ出した場合だけスクロールバーが表示されます。例えば、幅や高さの値を％で指定した場合、ボックスの大きさは見ている人の画面の大きさに左右されることになりますね（特に親要素 <body> の場合）。画面を大きくして見ている人はそのままで見ることができるし、もし画面を小さくしていても、ボックスの大きさが変わらずにスクロールバーを使って見ることができるので、画面のデザインを損ねることがありません。


	HTML	CSS	Dictionary	Netscape	Color	AccessUp	Links	SiteMap

■ ボックスの大きさに関する設定