株式会社スピカデザイン

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

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

REQUEST

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

HOT WORD

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

2020.12.02

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

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

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

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

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

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

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

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

< PREV NEXT >