CSS

2020.12.02

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

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

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

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

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

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

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

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

関連記事

  • text-alignが効かない時に考えられること

    2021.02.24

    【CSS】text-alignが効かない時に考えられること

    CSS

  • 2021.02.23

    【CSS】三角形の装飾でコンテンツの境界を区切る方法

    CSS

  • 2021.02.22

    【CSS】IEだけ崩れてしまうフォント対策

    CSS

おすすめ記事

  • 2020.12.19

    PowerPointで目次を簡単に作る方法【スライド内リンクを設定する方法も紹介】

    その他

  • 2020.11.28

    Basic認証の設定方法と注意点

    その他

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design