【1行追加するだけ】CSSの横スクロールが上手くいかないときの対処法
CSSで横スクロールを実装しようとしたとき、横スクロールが上手くいかなくて困ったことってありますよね。
しっかり設定をしているにも関わらず改行されてしまったり、意図した動作をせずに思わぬ苦戦を強いられることがあるのがこの横スクロールです。
今回は1行追加するだけで横スクロールが上手くできる方法について情報を共有したいと思います。
改行させないようにして解決
「white-space: nowrap;」という記述で横スクロールが上手くできます。
実は、横スクロールする際に「overflow-x: scroll;」を追加するだけでは横スクロールは上手く機能しません。
例えば、以下のHTMLでdivタグを横スクロールさせたいとします。
【HTML】| 1 | <div class="scroller"> |
| 2 | あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わゐゑをん |
| 3 | </div> |
【CSS】
| 1 | div.scroller { | |
| 2 | overflow-x: scroll; | ← これだけでは上手くいかない... |
| 3 | } |
横スクロールするために、CSSに「overflow-x: scroll」を記述しますが、これだけでは以下の「失敗例: div.scroller」のように中のコンテンツが改行されるだけになってしまいます。
【失敗例: div.scroller】あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わゐゑをん
↑↑↑
このように「あいうえお....わゐゑをん」の文字が折り返してしまい、横スクロールのレールも表示されていない状態です。
横スクロールさせる前に改行が働いてしまい、横スクロールの意味がなくなってしまうのが原因です。
そこで「white-space: nowrap;」という記述を追加します。
- white-space: nowrap;
【CSS】
| 1 | div.scroller { | |
| 2 | overflow-x: scroll; | |
| 3 | white-space: nowrap; | ← この記述を追加する |
| 4 | } |
【成功例: div.scroller】
あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わゐゑをん
↑↑↑
「white-space: nowrap;」もセットで記述することで、横スクロールが上手く動作しているのが分かりますね。
さいごに
横スクロールが上手くいかないときはとりあえず「overflow-x: scroll;」と「white-space: nowrap;」を記述セットで記述してみてください。
それでは次回にお会いしましょう。
