【css】スマホでパンくずを横スクロールさせる方法

サイトレビュー

【勝手にWEBサイトレビュー #14】イラストが可愛らしいギリシャのデ...

2021.02.28

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

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

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

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

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

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

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

この記事をシェアしよう！