サイトのスクロールボックスのCSSによるレスポンシブな作り方

サイトのコンテンツをサイト全体とは別に子要素として上下左右に移動して表示できるスクロールボックスをデザインのCSSを使ってパソコンやタブレットやスマホなどの様々なデバイスの画面幅に合わせられるレスポンシブな作り方を纏めた。

スクロールボックスに必要なCSS
縦スクロールボックスの作り方
縦スクロールボックスのサンプル
サンプルのソースコード
横スクロールボックスの作り方
min()を使った横幅一杯の指定
縦スクロールボックスのサンプル
サンプルのソースコード

スクロールボックスに必要なCSS

紫陽花の大きな写真が縦横のスクロールで表示される。

画像や文章などのコンテンツを入れるボックスの大きさとスクロールの指定がなくてはならない。その他に横スクロールで文章のコンテンツは行毎の折り返しを解除するための指定も必要になる。縦と横のスクロールボックスの作り方は基本的に同じだけれども横の方が文章の折り返しや表示領域やレスポンシブを考慮すると手間が縦よりも増える。両方を含めた縦横の共通のスクロールボックスは縦横のそれぞれのスクロールボックスの両方のマークアップを同時に行う。縦スクロールボックスの作り方必要なCSSが二つある。

height:縦幅

overflow-y:scroll

※overflow-yの値はブラウザ任せのautoでも可能。
※overflow-yは横と共通のoverflowでも可能。指定した縦幅よりも長いコンテンツの場合に縦スクロールで表示される。縦スクロールボックスのサンプル

コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ

サンプルのソースコードHTML<div class="vertical-scroll"> <ol> <li>コンテンツ</li> <li>コンテンツ</li> <li>コンテンツ</li> <li>コンテンツ</li> <li>コンテンツ</li> <li>コンテンツ</li> <li>コンテンツ</li> <li>コンテンツ</li> <li>コンテンツ</li> <li>コンテンツ</li> </ol> </div>CSS.vertical-scroll {height:7em;overflow-y:scroll} .vertical-scroll>ol {margin-top:0;margin-bottom:0}縦幅が「7em」までのコンテンツが表示されて残りは縦スクロールで表示される。縦スクロールボックスはデバイスの画面幅でデザインが崩れることはないので、レスポンシブのCSSを追加しなくて構わない。横スクロールボックスの作り方必要なCSSが幾つかある。

width:横幅

overflow-x:scroll

white-space:nowrap／pre（文章の場合）

※overflow-xの値はブラウザ任せのautoでも可能。
※overflow-xは縦と共通のoverflowでも可能。指定した横幅よりも長いコンテンツの場合に横スクロールで表示されるけれども文章は行毎の折り返しを解除しないとボックスの横幅までしか続かなくなる。white-spaceのnowrap（ソースコードの空白を一つに纏めながら行で折り返さない）かpre（ソースコードの空白を纏めず、改行も反映しながら行で折り返さない）のどちらかにする。通常は前者で良いと思うけれどもソースコードを横スクロールで表示するときなどは後者はソースコードの改行を反映する（改行のbrタグが要らない）から便利だ。文章の折り返しを止める際の注意点として横スクロールボックスの横幅がサイト全体から少しでもはみ出すと十分に表示できず、同じ領域の他のコンテンツも行の端から折り返さずに抜けてしまう。修正するには横スクロールボックスの横幅を親ボックスの範囲内にwidthか場合によって「box-sizing:border-box」（枠線をコンテンツの幅に含める）なども使ってきっちり納めなくてはならない。横スクロールボックスの横幅の単位は%で指定すると大きな画面から小さな画面まで一定の割合で表示できるけど、ただし内側のコンテンツの幅がpxやemなどの固定値か画面幅のvwで定まってないと上手く行かず、他のコンテンツも端から折り返さずに抜けてしまって使うことはできない。横スクロールボックスでサイトの表示領域に合わせるにはwidthの値に%ではなく、固定値か画面幅の単位を選ぶ。どんな画面幅でもレスポンシブでぴったり合わせるには長さを計算できて最大値が指定できるmin()を使うのが便利だ。min()を使った横幅一杯の指定min(100vw - 左右の余白, コンテンツの最大幅 - 左右の余白)※左右の余白がなければ左右の余白に「0」を入れるか「100vw, コンテンツの最大値」の書き方で指定する。表示領域から左右の余白を差し引くから横スクロールボックスが収まってコンテンツが端から抜けてしまうことはない。コンテンツの最大幅を指定できるからパソコンや横向きタブレットなどの大きな画面で表示領域が画面一杯に及ばないときは表示領域の横幅一杯までに収まる。横スクロールボックスの最大幅をサイトの表示領域よりも小さく指定した場合は日本語のサイトならば左寄せで表示される。位置取りはCSSの外側の余白で変更できて中寄せは「margin-left:auto;margin-right:auto」、右寄せは「margin-left:auto」を指定すると大丈夫だ。横スクロールボックスのサンプル

コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ

サンプルのソースコードHTML<div class="horizontal-scroll"> <ol> <li>コンテンツ</li> <li>コンテンツ</li> <li>コンテンツ</li> <li>コンテンツ</li> <li>コンテンツ</li> <li>コンテンツ</li> <li>コンテンツ</li> <li>コンテンツ</li> <li>コンテンツ</li> <li>コンテンツ</li> </ol> </div></p>CSS.horizontal-scroll {width:min(100vw - 24px, 925px - 24px);overflow-y:scroll;white-space:nowrap} .horizontal-scroll>ol {display:flex;column-gap:3em}スマホや縦向きタブレットなどの小画面では画面の横幅一杯、パソコンや横向きタブレットのような大画面では表示領域の横幅一杯を使って横スクロールでレスポンシブに表示される。

コメント