スキップしてメイン コンテンツに移動

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

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

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

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

画像や文章などのコンテンツを入れるボックスの大きさとスクロールの指定がなくてはならない。

その他に横スクロールで文章のコンテンツは行毎の折り返しを解除するための指定も必要になる。

縦と横のスクロールボックスの作り方は基本的に同じだけれども横の方が文章の折り返しや表示領域やレスポンシブを考慮すると手間が縦よりも増える。

両方を含めた縦横の共通のスクロールボックスは縦横のそれぞれのスクロールボックスの両方のマークアップを同時に行う。

縦スクロールボックスの作り方

必要なCSSが二つある。

  • height:縦幅
  • overflow-y:scroll

※overflow-yの値はブラウザ任せのautoでも可能。
※overflow-yは横と共通のoverflowでも可能。

指定した縦幅よりも長いコンテンツの場合に縦スクロールで表示される。

縦スクロールボックスのサンプル

  1. コンテンツ
  2. コンテンツ
  3. コンテンツ
  4. コンテンツ
  5. コンテンツ
  6. コンテンツ
  7. コンテンツ
  8. コンテンツ
  9. コンテンツ
  10. コンテンツ

サンプルのソースコード

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」を指定すると大丈夫だ。

横スクロールボックスのサンプル

  1. コンテンツ
  2. コンテンツ
  3. コンテンツ
  4. コンテンツ
  5. コンテンツ
  6. コンテンツ
  7. コンテンツ
  8. コンテンツ
  9. コンテンツ
  10. コンテンツ

サンプルのソースコード

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}

スマホや縦向きタブレットなどの小画面では画面の横幅一杯、パソコンや横向きタブレットのような大画面では表示領域の横幅一杯を使って横スクロールでレスポンシブに表示される。

コメント

些細な日常の人気の投稿

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策

イメージ

偶に始まらなかったり、途中で止まったりもしていたPlayストアでのAndroidアプリのダウンロードは安定して来ていると思うし、喜ばしいかぎりの昨今だけれども速度自体はいつも同じではないから何だろうと訝られる。 余りに遅過ぎるわけではないし、お手上げとまでは行かないにせよ、非...

飽和脂肪酸の多いココナッツオイルの過剰摂取の危険性とその他の健康上の利点

イメージ

パンや菓子や揚げ物などに安く使用される マーガリンやショートニングなどのトランス脂肪酸が動脈硬化を引き起こすと世界的に避けられる 一方で、代わりに新しく使用される他の食用油によって必ずしも健康的な食生活が確保されるとはかぎらない状況も出て来てしまっているのが厄介なんだ。 脂...

早川愛の高校野球の夏の甲子園の大会歌の栄冠は君に輝くの独唱のソプラノの美声

イメージ

高校野球の夏の甲子園の 作新学院と今井達也の優勝の記事 を改善するために新しく引用できる動画はないかとYouTubeで探していたら2016年の地方予選の栃木大会だから当の作新学院と今井達也も参加して奇しくも予選の勝ち抜けと夏の甲子園での全国制覇への好影響を受けたかも知れなかった...