ニッシー
1990年生まれ
血液型 O型

こんにちは。ITブログアルケーナム管理人のニッシーです。

詳細プロフィールへ

お問い合わせへ






2019-03-12

CSSの横スクロールバーが表示されないときの対処法




CSSで横スクロールを実装しようとしたとき、レールは表示できているのにバーが表示されなくて困ったことってありますよね。


しっかり設定をしているにも関わらず改行されてしまったり、意図した動作をせずに思わぬ苦戦を強いられることがあるのがこの横スクロールです。


今回は、1行追加するだけで、思った動作をさせる方法を見てみたいと思います。












横スクロールが失敗する原因



横スクロールするために「overflow-x: scroll」をCSSに記述して実現するわけですが、これだけでは、以下の「失敗例」のようにレールのみ表示され、中のコンテンツが改行されるだけになってしまいます。


横スクロールさせる前に改行が働いてしまい、横スクロールの意味がなくなってしまうのが原因です。



動作の失敗例
あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わゐゑをん


このようにスクロールのレールのみ表示され、バーが見えなくなっています。



失敗例:HTML
1 <div class="scroller">
2 あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わゐゑをん
3 </div>


失敗例:CSS
1 div.scroller { 
2   height: 80px; 
3   width: 100%; 
4   border-top: 1px solid #838383; 
5   border-left: 1px solid #838383; 
6   border-right: 1px solid #838383; 
7   border-bottom: 1px solid #838383; 
8   box-sizing: border-box; 
9   overflow-x: scroll;← これだけでは上手くいかない...
10 } 


「overflow-x: scroll;」を追加するだけでは、横スクロールは上手く機能しません。





改行させないようにして解決



これを以下の「成功例」のようにしたい場合、


「white-space: nowrap;」


の記述を追加することで以下のように上手く動作するはずです。



動作の成功例
あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わゐゑをん


改行させない記述(white-space: nowrap;)もセットで使用し、横スクロールが上手く動作しているのが分かりますね。



成功例:HTML
1 <div class="scroller">
2 あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わゐゑをん
3 </div>


成功例:CSS
1 div.scroller { 
2   height: 80px; 
3   width: 100%; 
4   border-top: 1px solid #838383; 
5   border-left: 1px solid #838383; 
6   border-right: 1px solid #838383; 
7   border-bottom: 1px solid #838383; 
8   box-sizing: border-box; 
9   overflow-x: scroll; 
10   white-space: nowrap;← この記述を追加する
11 } 





最後に



横スクロールが上手くいかない方は、試してみてください。


まさか改行が悪さをしていたとは思いませんでした。


それでは、続きはまた次回にご期待を!









プロフィール

ニッシー
1990年生まれ
血液型 O型

こんにちは。ITブログアルケーナム管理人のニッシーです。

詳細プロフィールへ

お問い合わせへ