【CSS】画面の一部だけスクロールさせたい時の書き方

ソースコードなどの記事を書くときに、部分的にスクロールできるエリアを作りたい、といった事ってありますよね。

ここでは、上下にスクロールさせるエリアの書き方と、左右にスクロールさせるエリアの書き方をまとめています。

上下にスクロールするエリアの作り方

まずは、ページ内で上下にスクロールするエリアの作り方を見ていきましょう。

こんな感じのスクロールエリアです。

HTMLの記述はこちら。

<div class="scroll">
<span>
サンプルテキストサンプルテキスト…
</span>
</div>

CSSの記述はこちら。2行だけで実装できます。

.scroll{
  height: 80px;
  overflow: auto;
}

「height」で高さを指定して、
「overflow: auto;」とすることで、高さから溢れた部分をスクロールできるエリアが作れます。

スクロールさせたい文字ではなく、文字を囲んだ「div」要素に指定するのがポイントです。

ちなみに「overflow: scroll;」と指定すると、スクロールする部分があるなしに関わらず、スクロールバーが表示されます。

今回は、スクロールする部分がある時だけスクロールバーを表示したいので、「overflow: auto;」を指定しています。

左右にスクロールするエリアの作り方

次に、左右にスクロールするエリアの作り方を見ていきましょう。

こんな感じになります。

さっきの例では上下のスクロールは出来ますが、左右の文字は幅いっぱいで折り返してしまい、スクロールになりませんでした(※Chromeで確認)。

ということで、左右にスクロールできるエリアを作る場合は、CSSでちょっと一工夫します。

HTMLでの記述はこちら。特に変わった部分はありませんね。

<div class="scroll2">
<span>
サンプルテキストサンプルテキスト…
</span>
</div>

CSSの記述はこちら。

.scroll{
  overflow: auto;
  white-space: pre;
}

「overflow: auto;」でスクロールエリアを作るのは上下スクロールと同じです。

ここでは指定していませんが、「width」で幅を指定して、決まった幅で表示させることも出来ます。

左右をスクロールするエリアを作る場合は、まず「文字の折返しをさせない」ことがポイントです。

「文字を折り返しさせない」方法としては、HTMLで「pre」タグをつける方法と、CSSで「pre」タグをつけた時と同じ表示にする方法があります。

「pre」タグは「整形済みテキスト」を意味していて、「改行含め、書いたままに」ブラウザに表示する事ができます。

HTMLタグで指定する場合は、スクロールさせたい部分を「<pre></pre>」タグで囲みます。

ここではCSSで「white-space: pre;」と指定して、「pre」タグで囲まなくても「pre」タグで囲んだような状態で表示しています。