16. 視覚効果

ここでは、視覚整形に関するその他のプロパティについて説明する。

overflowプロパティ

overflowプロパティ」は、内容領域からはみ出した内容の取り扱い方を指定する。(※ "overflowプロパティ"を指定する要素は、その幅あるいは高さが固定されている必要がある。 つまり、"widthプロパティ"、"heightプロパティ"が共に"auto"ではボックスが自動的に拡張されるためオーバーフローが機能しない。)その書式は以下のとおりである。

overflowプロパティ
visible | hidden | scroll | auto | inherit
初期値visible
適用対象非置換ブロックレベル要素、表のセル、inline-block要素
継承しない
パーセント値受けつけない
visible
内容を切り取らない。つまり、ブロックボックスの外側に内容がはみ出す。
hidden
内容を切り取る。切り取られた内容は表示されないし、スクロールなどによりアクセスすることもできない。
scroll
内容を切り取る。切り取られた内容は表示されないが、スクロールなどによりアクセスすることができる。 なお、内容がはみ出さない場合でもスクロール機能が提供される。
auto
ブラウザに依存する。通常、内容を切り取る。そして、切り取られた内容は表示されないが、スクロールなどによりアクセスすることができる。 また、内容がはみ出さない場合は、スクロール機能を提供しないブラウザが多い。

では、つぎのp要素の"overflowプロパティ"の値を変更し、どのように表示されるか見てみよう。

<p>
あいうえおかきくけこさしすせそたちつてとなにぬねの
あいうえおかきくけこさしすせそたちつてとなにぬねの
</p>

最初は、"visible"の指定と、その表示結果である。

p {
    height: 100px;
    border: 1px solid #000;
    overflow: visible;
}

overflow:visibleのサンプル表示

2番目は、"hidden"の指定と、その表示結果である。 切り取られている部分があることに注意してほしい。

p {
    height: 100px;
    border: 1px solid #000;
    overflow: hidden;
}

overflow:hiddenのサンプル表示

3番目は、"scroll"の指定と、その表示結果である。 スクロール機能が提供されている。しかも、横方向のスクロールは必要ないが、やはり提供されている点に注意してほしい。

p {
    height: 100px;
    border: 1px solid #000;
    overflow: scroll;
}

overflow:scrollのサンプル表示

最後は、"auto"の指定と、表示結果である。 縦方向のスクロールのみが提供されている点に注意してほしい。

p {
    height: 100px;
    border: 1px solid #000;
    overflow: auto;
}

overflow:autoのサンプル表示

visibilityプロパティ

visibilityプロパティ」は、ブロックの可視、不可視を指定する。 その書式は以下のとおりである。(※ "CSS 2"では、初期値が"inherit"である。初期値は、仕様の版によってよく変更されるので、 スタイル指定に際しては初期値をアテにせず、積極的に指定した方がよい。)

visibilityプロパティ
visible | hidden | collapse | inherit
初期値visible
適用対象すべての要素
継承する
パーセント値受けつけない
visible
ボックスを可視にする。
hidden
ボックスを不可視にする。このときの不可視の意味は、透明化されることである。 すなわち、ボックス自体は生成されて、単に見えない状態となる。
collapse
表の行や列、そのグループを不可視とし、その範囲を取り除いて詰める。 ただし、多くのブラウザは、この値をサポートしていない。

以下にサンプルのスタイルと、それを適用したHTMLコードおよび表示結果を示す。

p {
    margin: 0;
    border: 1px solid #000;
    width: 200px;
    height: 20px;
}
p#none    { display: none;}
p#visible { visibility: visible; }
p#hidden  { visibility: hidden; }
<p>あいうえお</p>
<p id="none">かきくけこ</p>
<p id="visible">さしすせそ</p>
<p id="hidden">たちつてと</p>
<p id="visible">なにぬねの</p>

visibilityのサンプル表示

ページの先頭に戻る


Copyright c 2006-2007 御隠居 (滄洲). All Rights Reserved.