スマホ対応したパンくずリストを改行しないで、横スクロールで見れるようにするCSS。

CSS

ウェブサイトをスマホ対応しているとき、階層が深いサイトだとパンくずリストがゴチャって見えてしまうことってありますよね。

CSSで簡単に実装できる、横スクロールで見れるパンくずリストの実装をみていきます。

やりたいこと

改行されてしまうコンテンツ

こちらは当社サイトのパンくずリストです。スマホサイトだと横幅が小さいために改行されて表示されてしまいます。

これでも悪くはないのですが、スマホ画面の限られたスペースをパンくずリストで消費したくはないですよね。そんな時にこんなふうに表示できたらどうでしょう。

overflow:hidden で1行にした例

これで1行にまとまって、末尾が右に隠れるようになりました。

overflow:hidden を右スクロールした画面

これを右スクロールするとこのように下層のパンくずリストが表示されます。

簡単なCSSで実装できますので、いってみましょう。

結論

.p-breadcrumb {
    /* はみ出し部分をスクロールする */
    overflow-x: scroll;

    /* テキストを改行しないようにする */
    word-break: keep-all;
    white-space: nowrap;

    /* スクロールの動きを滑らかにする */
    -webkit-overflow-scrolling: touch;
}

 

4行だけで簡単に設定できちゃいます。

最後の-webkit-overflow-scrolling: touch;は、iOSでスクロールした時に動きを滑らかにするためのCSSです。

これがないとスクロールが慣性で動かなくなるので、設定しておいた方がよいでしょう。

三上 龍志|株式会社シンシエイト
この記事を書いた人
三上 龍志|株式会社シンシエイト
2005年からWeb制作に従事。システム開発ベンチャーでエンジニアとしてWeb開発、Webコンサルティング会社でマーケター・新規事業開発を経て2015年に当社を創業。顧客の成果に顧客よりも本気になることをテーマに、Webを通じて顧客の事業を加速させるために日々奮闘中。
関連する記事
CSS
CSSでテキストの末尾を「…」にして文章を1行にまるめる方法
CSS
マーケティングとWeb制作で
貴社の経営課題を解決します

市場調査や競合調査を始め、企業やサービスの優位性を理解した上で、UI/UX設計やコンテンツマーケティング、SEO・ネット広告を中心としたWebマーケティングを通じて、ビジネスを加速させるご提案をしています。