東京のホームページ制作会社・web制作会社
株式会社シンシエイト

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

CSS

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

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

やりたいこと

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

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

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

overflow:hidden で1行にした例

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

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

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

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

結論

 

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

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

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

三上 龍志
この記事を書いた人
三上 龍志
元パンパースのCMモデルがネタの株式会社シンシエイト代表。システムエンジニア出身営業育ち。ビーフジャーキー作りが趣味。webが大好きな2児の父。
関連する記事
CSSでテキストの末尾を「…」にして文章を1行にまるめる方法
CSS
株式会社シンシエイト ブログ フロントエンド CSS スマホ対応したパンくずリストを改行しないで、横スクロールで見れるようにするCSS。

web制作とマーケティングで
貴社の経営課題を解決します

web制作でのブランディングや、コンテンツマーケティング・SEO・ネット広告を中心としたウェブマーケティングを通じて、企業の事業を加速させるご提案をしています。

お電話でのお問い合わせはこちら

受付時間は平日10:00〜18:00です。セールス目的のお電話はご遠慮ください。