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

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

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

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

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

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

まとめ

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

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

Ads

関連記事

HTMLCSS プログラミング

【簡単】HTMLのformでリセットボタンを入れる方法

2022.04.17
72
プログラミング

www.有りのドメインを無しのドメインにリダイレクトする方法

更新日:2020.06.12
57
JavaScript プログラミング

jQueryを使って、checkしたinput要素の label値を取得する方法

2022.01.12
600
WordPress プログラミング

【wordpress】トップページとは別に投稿一覧(アーカイブページ)を用意・表示する方法

2022.01.11
254