overflowプロパティの概要
| ボックスのはみだし文字への対処CSS | ||
| clear | ||
| 目的 | divボックスなどで高さを小さく設定した場合にはみ出す文字をどう扱うかを設定する | |
| 使用 | divなど | |
|
In fringilla convallis consequat. Proin scelerisque pretium pellentesque. Duis in lobortis leo. Ut dapibus a risus in dictum. Aenean condimentum dolor lacus, nec maximus tortor lacinia sit amet. Pellentesque ac venenatis ipsum. Morbi non pulvinar diam. In porttitor, ligula nec dignissim congue, massa mi aliquet enim, nec commodo nisi dolor porttitor nisl.
|
||
<div style="width: 400px; height: 150px; margin-bottom: 100px; border: 1px solid #000000; overflow: visible;">In fringilla ～ nisl. </div> |
||
値
visibleがデフォルト値です。
- auto
-
In fringilla convallis consequat. Proin scelerisque pretium pellentesque. Duis in lobortis leo. Ut dapibus a risus in dictum. Aenean condimentum dolor lacus, nec maximus tortor lacinia sit amet. Pellentesque ac venenatis ipsum. Morbi non pulvinar diam. In porttitor, ligula nec dignissim congue, massa mi aliquet enim, nec commodo nisi dolor porttitor nisl.
<div style="width: 400px; height: 150px; margin-bottom: 100px; border: 1px solid #000000; overflow: auto;">In fringilla ～ nisl. </div>
ブラウザの設定に依存します。どのように表示されるかは不確定です。レイアウトに大きく影響を及ぼすため、用いるべきではありません。
- visible
-
In fringilla convallis consequat. Proin scelerisque pretium pellentesque. Duis in lobortis leo. Ut dapibus a risus in dictum. Aenean condimentum dolor lacus, nec maximus tortor lacinia sit amet. Pellentesque ac venenatis ipsum. Morbi non pulvinar diam. In porttitor, ligula nec dignissim congue, massa mi aliquet enim, nec commodo nisi dolor porttitor nisl.
<div style="width: 400px; height: 150px; margin-bottom: 100px; border: 1px solid #000000; overflow: visible;">In fringilla ～ nisl. </div>
- hidden
-
<div style="width: 400px; height: 150px; margin-bottom: 100px; border: 1px solid #000000; overflow: hidden;">In fringilla ～ nisl. </div>
文字データはカットされているわけではありません。隠れて(hidden)いるだけです。
- scroll
-
In fringilla convallis consequat. Proin scelerisque pretium pellentesque. Duis in lobortis leo. Ut dapibus a risus in dictum. Aenean condimentum dolor lacus, nec maximus tortor lacinia sit amet. Pellentesque ac venenatis ipsum. Morbi non pulvinar diam. In porttitor, ligula nec dignissim congue, massa mi aliquet enim, nec commodo nisi dolor porttitor nisl.
<div style="width: 400px; height: 150px; margin-bottom: 100px; border: 1px solid #000000; overflow: scroll;">In fringilla ～ nisl. </div>
- clip
-
In fringilla convallis consequat. Proin scelerisque pretium pellentesque. Duis in lobortis leo. Ut dapibus a risus in dictum. Aenean condimentum dolor lacus, nec maximus tortor lacinia sit amet. Pellentesque ac venenatis ipsum. Morbi non pulvinar diam. In porttitor, ligula nec dignissim congue, massa mi aliquet enim, nec commodo nisi dolor porttitor nisl.
<div style="width: 400px; height: 150px; margin-bottom: 100px; border: 1px solid #000000; overflow: clip;">In fringilla ～ nisl. </div>
overflowを使ったデザイン
CSSのみでクリックによりボックスが開くアニメーション コピペで使えるHTML+CSS
JavaScriptを用いず、CSSのみでアコーディオンアニメーションdivボックスを実現します。ページを読み込んだ際に開いた状態とならないよう、ラジオボタンとチェックボックスの２つをフラグとして利用します。CSSのみで実現できる限界点の一つ。
programming-cafe.com