Written by Kasumi

【簡単】スマホのぱんくずを一行にして、はみ出した分を横スクロールで見せる方法

スマホで見た時、ぱんくずが長く三行くらい折り返しで表示されてしまう。

スマートにぱんくずを一行にして、はみ出した分横スクロールで表示できるようにしたい。

このような悩みを解決します。

本記事では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;を指定し、ブロック要素からインライン要素に変更します。
元々子要素がインライン要素であれば指定しなくても大丈夫です。

以上で横スクロールが実装できました。

まとめ

ぱんくずに以外にも画像や、テーブル要素なども本記事の方法で横スクロールを簡単に実装できるので、ぜひ試してみてください。

以上で解説を終わります。

目次

関連記事

プログラミング

URLにパラメータが付与されてる場合のアンカーリンク作成方法

2022.08.02
358
WordPress プログラミング

wordpressで特定のページを非表示にし404ページへリダイレクトする方法

2022.01.15
351
HTMLCSS プログラミング

【CSS】select(セレクト)要素の矢印を消して画像にする方法

2022.01.09
876
HTMLCSS プログラミング

【簡単CSS】videoタグを使って動画を背景に設定する方法

2022.03.12
2277