【簡単】スマホのぱんくずを一行にして、はみ出した分を横スクロールで見せる方法
スマホで見た時、ぱんくずが長く三行くらい折り返しで表示されてしまう。
スマートにぱんくずを一行にして、はみ出した分横スクロールで表示できるようにしたい。
このような悩みを解決します。
本記事ではCSSだけで、横スクロールを実装する方法について解説します。
ぱんくず用のHTMLを準備
<ul class="pankuzu">
<li><a href="#">トップ</a></li>
<li><a href="#">アーカイブ</a></li>
<li><a href="#">記事名記事名記事名記事名記事名記事名記事名記事名記事名</a></li>
</ul>
まずは、ぱんくず用のHTMLをulリストタグなどで準備しましょう。
横スクロールを実装するCSS
.pankuzu {
overflow-x: auto;
white-space: nowrap;
}
.pankuzu li {
display: inline-block;
}
上記が、横スクロールを実装するCSSサンプルです。
まず、下記プロパティをぱんくずリストの親要素にあてます。（今回の例ではulタグ）
overflow-xプロパティ
overflow-xにautoを指定する事で、横スクロールを可能にします。
white-space プロパティ
white-spaceにnowrapを指定する事で 、ブロック要素の折り返しを無くします。
次に子要素（ 今回の例ではliタグ ）にdisplay: inline-block;を指定し、ブロック要素からインライン要素に変更します。
元々子要素がインライン要素であれば指定しなくても大丈夫です。
以上で横スクロールが実装できました。
まとめ
ぱんくずに以外にも画像や、テーブル要素なども本記事の方法で横スクロールを簡単に実装できるので、ぜひ試してみてください。
以上で解説を終わります。
目次
