| ■ ボックスの幅を指定する [スタイルシート] |
<p style="background-color:#cf6;width:300px;">
スタイルシートで幅（width）、高さ（height）を指定した四角形の範囲をボックスといいます。</p>
スタイルシートで幅（width）、高さ（height）を指定した四角形の範囲をボックスといいます。
|
| ■ ボックスの高さを指定する [スタイルシート] |
<p style="background-color:#ff6;width:300px;height:200px;">
widthプロパティ、heightプロパティを使えば、ボックスの大きさを指定することができます。プロパティ値にはmm、cm、pxといった長さを指定する単位を使うか、あるいは親要素に対する割合（%）を使うことができます。width、heightともにデフォルトはautoで、自動的にテキストが入る大きさになります。</p>
widthプロパティ、heightプロパティを使えば、ボックスの大きさを指定することができます。プロパティ値にはmm、cm、pxといった長さを指定する単位を使うか、あるいは親要素に対する割合（%）を使うことができます。width、heightともにデフォルトはautoで、自動的にテキストが入る大きさになります。
|
| ■ ボックスからはみ出したときの処理方法を指定する [スタイルシート] |
<p style="width:300px;height:100px;background-color:#ff9;overflow:scroll;">
ボックスから文章がはみ出した場合の処理の方法を指定するには、overflowプロパティを使います。<br>プロパティ値をscrollに設定すると、ボックスにスクロールバーが表示されます。このスクロールバーを動かせばはみ出した部分を読むことができます。ただし、scrollを指定すると文章がはみ出さない場合でも常にスクロールバーが表示されてしまいます。</p>
ボックスから文章がはみ出した場合の処理の方法を指定するには、overflowプロパティを使います。
プロパティ値をscrollに設定すると、ボックスにスクロールバーが表示されます。このスクロールバーを動かせばはみ出した部分を読むことができます。ただし、scrollを指定すると文章がはみ出さない場合でも常にスクロールバーが表示されてしまいます。
|
<p style="width:300px;height:100px;background-color:#f9f;overflow:hidden;">
今度はプロパティ値をhiddenにしてみました。hiddenは「隠れた」とか「目に見えない」という意味ですね。<br>hiddenを指定するとはみ出した部分は切り取られてしまいます。文章が読めなくなってしまうので、このプロパティ値を指定することはないでしょう。何でこんなのあるんだろ？</p>
今度はプロパティ値をhiddenにしてみました。hiddenとは「隠れた」とか「目に見えない」という意味ですね。
hiddenを指定するとはみ出した部分は切り取られてしまいます。文章が読めなくなってしまうので、このプロパティ値を指定することはないでしょう。何でこんなのあるんだろ？
|
<p style="width:300px;height:100px;background-color:#6cf;overflow:visible;">
次はプロパティ値visibleです。visibleはhiddenとは逆に「目に見える」という意味です。<br>visibleを指定すると幅、高さの指定にかかわらず、全て表示されるようになります。これがデフォルトでoverflowプロパティを設定しない場合と同じです。</p>
次はプロパティ値visibleです。visibleはhiddenとは逆に「目に見える」という意味です。
visibleを指定すると幅、高さの指定にかかわらず、全て表示されるようになります。これがデフォルトでoverflowプロパティを設定しない場合と同じです。
|
<p style="width:300px;height:100px;background-image:url('sample/box_image1.gif');
overflow:auto;">
プロパティ値autoを指定すると、文章がはみ出した場合だけスクロールバーが表示されます。<br>例えば、幅や高さの値を%で指定した場合、ボックスの大きさは見ている人の画面の大きさに左右されることになりますね（特に親要素<body>の場合）。画面を大きくして見ている人はそのままで見ることができるし、もし画面を小さくしていても、ボックスの大きさが変わらずにスクロールバーを使って見ることができるので、画面のデザインを損ねることがありません。</p>
プロパティ値autoを指定すると、文章がはみ出した場合だけスクロールバーが表示されます。
例えば、幅や高さの値を%で指定した場合、ボックスの大きさは見ている人の画面の大きさに左右されることになりますね（特に親要素<body>の場合）。画面を大きくして見ている人はそのままで見ることができるし、もし画面を小さくしていても、ボックスの大きさが変わらずにスクロールバーを使って見ることができるので、画面のデザインを損ねることがありません。
|
| ■ ボックスの枠線を指定する [スタイルシート] |
|
<p style="border-style:solid;width:200px;">solid</p>
solid
|
|
<p style="border-style:double;width:200px;">double</p>
double
|
|
<p style="border-style:groove;width:200px;">groove</p>
groove
|
|
<p style="border-style:ridge;width:200px;">ridge</p>
ridge
|
|
<p style="border-style:inset;width:200px;">inset</p>
inset
|
|
<p style="border-style:outset;width:200px;">outset</p>
outset
|
|
<p style="border-style:dotted;width:200px;">dotted</p>
dotted
|
|
<p style="border-style:dashed;width:200px;">dashed</p>
dashed
|
|
<p style="border-style:none;width:200px;">none（デフォルト）</p>
none（デフォルト）
|
