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

2019-02-22

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

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

\項目をタップするとジャンプできます/

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

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

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

結果
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト

HTMLの記述はこちら。

HTML

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

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

CSS

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

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

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

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

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

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

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

こんな感じになります。

結果
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

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

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

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

HTML

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

CSSの記述はこちら。

CSS

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

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

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

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

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

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

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

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