今回は、CSSのoverflowプロパティをautoに設定する意味と利点を書き留めておく。
また、横のスクロール・縦のスクロールだけautoにする方法も併記しておく。
overflowをscrollに設定しているときに思うこと
まず、overflowプロパティを簡単に説明すると、要素からあふれてはみ出している内部の要素をどのように表示するかを決定するものである。
そして「overflow: scroll」とは、それを指定した要素の内部に存在するはみ出したコンテンツがスクロールで表示される設定だ。
しかし、要素をscrollで設定すると、縦スクロールバーと横スクロールバーが常に表示されてしまう。つまり、スクロール表示しなくてもいい時もスクロールバーが表示されてしまう。
スクロールバーの存在を考慮に入れたレイアウトのデザインであれば何ら問題は無いが、場合によっては状況に応じて表示と非表示を判断してほしかったりする。記事の種類や属性によって、コンテンツの数が増減する場合があるからだ。
そんなときに使うのがoverflowプロパティの値のひとつである「auto」になる。
書きかたと使いかた
それでは、表記方法などを簡単に説明する。
/*内部の要素の縦横のはみ出しを自動で判断してスクロール化*/
.hoge {
overflow: auto;
}まず、縦と横の要素のはみ出しを自動で判断するにはこのように書く。
だが、この形ではあまり使わないはずだ。と言うのも、autoの値を使うときは縦方向に際限がない場合か、横方向に際限がない場合だと思われるので。
横方向のscroll表示を自動判別したいとき
内部の要素が右へ右へと続いていく場合はこのように表記する。
/*内部の要素の横方向のはみ出しを自動で判断してスクロール化*/
.hoge {
overflow-x: auto;
overflow-y: hidden;
}横方向の場合は、「overflow-x」の値を「auto」に設定する。
また、それと同時に「overflow-y」の値は「hidden」に設定しておこう。
この設定は、新着記事や関連記事などに使用する頻度が高いと思われる。
縦方向のscroll表示を自動判別したいとき
内部の要素が下へ下へと続いていく場合はこのように表記する。
/*内部の要素の縦方向のはみ出しを自動で判断してスクロール化*/
.hoge {
overflow-x: hidden;
overflow-y: auto;
}縦方向の場合は、「overflow-y」の値を「auto」に設定する。
また、それと同時に「overflow-x」の値は「hidden」に設定しておこう。
この設定は、例えばサイドバーに表示するカテゴリ一覧や目次などに有用だ。
片一方をhiddenにする理由
さて、ここまで読んで「どうしてもう片っぽの方向をhiddenに指定するんだろう？」と思った人はいないだろうか？
この理由を説明すると、autoに指定していない方向もautoに設定されているからだ。つまり、x軸方向をautoに設定したとき、y軸方向もautoに設定されている。またその逆も然り。
「overflow-x: scroll;」or「overflow-y: scroll」=「overflow: scroll」
このように、どちらかをautoにしたら自動的にもう一方もautoになっており、すなわち全体がautoになっている状態となっている。そして通常はあり得ないものの、疑似要素などでスクロールバーが出現してしまうばあいがあるため、もう一方をhiddenに設定しておく必要があるのだ。
ただこれは「念のため」なので、style.cssを軽量化したい場合は必要ない。
最後に
表示されるコンテンツの数や長さがページによってランダムな要素はoverflowプロパティのautoを使ってみよう。
スクロール表示したくない方向はhiddenを付けることを忘れないようにしよう。
このふたつを心に留めておこう。
今回は、overflowプロパティを使ってカスタマイズしている最中にautoのちょっとしたクセに気が付いたので、忘れないうちに書き留めておいた。
この記事が役に立てば嬉しい。