CSS

2020.12.02

【CSS】スマホのパンくずをCSSだけで改行させずに横スクロールさせる方法

ユーザーが今どのページを見ているのかわかりやすくするためにパンくずリストを設置しているサイトが多いですが、階層が多くなるとどうしても長くなってしまいます。

そこで、今回はCSSだけで簡単にスマホのパンくずを改行させずに横スクロールで表示する方法をご紹介します。

やることは…親要素にoverflowをかけるだけ

パンくずリストの親要素に対して、横方向にoverflow-xscrollautoを指定します。
また、テキストが改行されないようにword-break: keep-allwhite-space: nowrap;もかけます。

下記ではレスポンシブを意識して横幅768pxからスクロールの指定をかけました。codepenの幅が狭いのでスクロールされているかと思います。

See the Pen yLMzNeE by spiqa design (@spiqa_design) on CodePen.

スクロールバーを非表示にする方法

パンくずリストはスクロールで設置したいけれど、デザイン上そのままスクロールバーが出てしまうのはいまいち…という時には::-webkit-scrollbarを書くことでスクロールバーをカスタマイズすることができます。
次の例では、先ほどの例に下記内容を追記して非表示にしてみました。

  • スクロールバーをカスタマイズするためにパンくずの親要素に対して::-webkit-scrollbarを指定
  • 今回は非表示にしたいため、display:noneを指定

See the Pen ZEeXGOq by spiqa design (@spiqa_design) on CodePen.

スマホでスクロールする時、気をつけたいこと

以前までのiOSではスクロールがカクカクしてしまっていたため、スクロールを滑らかにするために-webkit-overflow-scrolling: touch;を入れていました。
しかし、このプロパティをつけてしまうと要素の範囲外に表示ができなくなってしまうなど、多くのバグが報告されています。
Androidは元々スクロールに問題はなく、最近のiOSでもデフォルトで滑らかにスクロールできるように変更されたため、このスタイルは不要になりました。
バグが起こってしまうのを防ぐためにも、これからは-webkit-overflow-scrollingを書かないことをおすすめします!

参考サイト:https://developer.apple.com/documentation/safari-release-notes/safari-13-release-notes

まとめ

特にブログやコラムなどは記事のタイトルが長くなることが予想されるので、そういったコンテンツを含むサイトには横スクロールを効かせたほうがいいです。ぜひご活用ください!

overflowについての関連記事はこちら

関連記事

  • 2021.10.01

    【コピペで簡単!】CSSのみで作るシンプルなセレクトボックス(矢印の消し方や枠のサイズ変更方法も解説)

    CSS

  • 2021.08.03

    【コピペOK】パンくずリストの設置方法(便利なプラグインも紹介)

    CSS

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

おすすめ記事

  • 2021.09.24

    JavaScriptの勉強におすすめの本7選【初心者〜上級者別に厳選】

    JavaScript

  • 2021.08.11

    初心者必見!最初に読んでおきたいgoogleアナリティクスのおすすめ書籍

    その他

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!