【CSS】テキストをBOXの中でスクロールさせる

2023年5月19日2023年5月23日

長い説明文とかBOX内でスクロールして表示させたいなぁ･･･

というわけで今回はテキストをBOX内でスクロールして表示させる方法について説明します！！

テキストをBOX内でスクロールさせる

どのような動きかはブログのトップで見せてる通りです。
実はこの動き、前回紹介したCSSプロパティを使用すれば実現できちゃいます。

overflowプロパティを使う

前回のブログでoverflow-xの使い方を見てきました。
（詳細はこちら⇒【CSS】特定の要素だけを横スクロールさせて表示する　）

overflowははみ出た要素をどうするか指定するプロパティです。

・overflow: hidden;　はみ出た要素を隠す（非表示にする）
・overflow: scroll;　はみ出た要素をスクロールさせる
⇒overflow-x　x軸（横）にはみ出た要素をスクロールさせる
⇒overflow-y　y軸（縦）にはみ出た要素をスクロールさせる

こんな感じでした。では今回はどのoverflowプロパティを使用するのでしょうか？

overflow: auto;

今回はoverflow: auto;を使用します。
overflow:auto;とは、はみ出た部分の表示をブラウザに依存する指定となります。
殆どの場合は、scrollを指定した場合と同じようにスクロールバーが表示されます。

ではコードを見てみましょう。

See the Pen テキストがいっぱいの時、BOXの中でスライドする（CSS　デイリーミッション11/13） by そす (@Sosgoyo) on CodePen.

複雑なことはなく、overflow: auto;の一文を足しただけですね。
ちなみに、overflow-y: scroll;でも同じ表示になりますが、常にスクロールバーが表示されます。
もしテキストが短い場合でもスクロールバーがあるのでそこが使い分けポイントかなぁと思います。