【初心者でもわかる】パンくずリストのデザインをスマホに最適化させる方法

4476 ワード
パンくずリスト HTML CSS 初心者 レスポンシブ HTML テキストリンク

どうも7noteです。スマホだと長すぎて不細工になってしまうパンくずリストをスッキリさせる方法

PCなら多少長くなってもたいして問題ないパンくずリストでも、レスポンシブサイト化させたときに、スマホだとダサくなってしまうのをスッキリさせます。

×【ダサい例】

〇【スッキリさせた例】

スッキリさせるパンくずリストの書き方

index.html
<!-- (仮)金持ちブログのパンくずリスト例 -->
<ul class="breadcrumb">
  <li><a href="/">トップ</a></li>
  <li><a href="../../">超絶お金持ちになるブログ</a></li>
  <li><a href="../">お金持ち理論</a></li>
  <li>年収300万円でも超絶スーパーお金持ちになれる方法</li>
</ul>
style.css
.breadcrumb {
  background: #eee; /* 背景色をグレーに指定 */
  padding: 5px;     /* 余白を指定 */
  white-space: nowrap; /* 改行（行送り）を禁止させる */
  overflow-x: scroll;  /* 横スクロールを可能にする */
}

.breadcrumb li {
  display: inline-block; /* インラインブロック要素にする */
}

.breadcrumb li:not(:last-child)::after {
  content: '>';    /* 間の矢印を設定 */
  margin: 0 0.5em; /* 左右に余白をとる */
}

解説

重要なのはこの2行。

white-space: nowrap; /* 改行（行送り）を禁止させる */
overflow-x: scroll;  /* 横スクロールを可能にする */

この2行を入れることで、行送りになるのを禁止させ、かつ横にはみ出た部分を非表示にして横スクロールを可能にさせます。

パンくずリストだけでなく、CSSだけでスライドショー風なものを作るのにも使えます。

過去記事より引用：【初心者でもわかる】cssだけでスライドショー風の横スクロールできるカルーセルの作り方

まとめ

いっそパンくずリスト自体を非表示にしてしまうのもできますが、SEO的にもパンくずリストは残しておいた方が無難らしいのでせめてスッキリ見せる方法で対応できればいいかなと思います。
ほかの方法などもあるかもしれませんので、オススメの方法などあればぜひコメントください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ