スマホ表示にはアコーディオンメニューやハンバーガーメニューなどが定番ですが、実際のECサイトの場合、カテゴリーは隠すより始めから表示していた方が、ユーザビリティ的にもよく、横スクロールメニューは最近よく見るメニューになっています。

横スクロールメニューはHTML・CSSだけで完結できるので、工数が減り、Javascriptも使わないので簡単にできます。
「横スライダーメニュー」で検索すればたくさんのやり方がありますが、基本的な事だけなので実際にECサイトで使えるようにCSSを組みました。

まずは横スクロールメニューの完成イメージ

See the Pen 横スクロールナビゲーション by michiyo yamada (@yamada3) on CodePen.

HTMLとCSS

<div class="nav-wrap">
<div class="scroll-nav">
    <ul>
      <li><a href="#"><img src="https://css.pieceplus.jp/wp-content/uploads/2022/02/item-01.jpg" class="pic-circle"><b>トップス</b></a></li>
      <li><a href="#"><img src="https://css.pieceplus.jp/wp-content/uploads/2022/02/item-05.jpg" class="pic-circle"><b>パンツ</b></a></li>
      <li><a href="#"><img src="https://css.pieceplus.jp/wp-content/uploads/2022/02/item-07.jpg" class="pic-circle"><b>スカート</b></a></li>
      <li><a href="#"><img src="https://css.pieceplus.jp/wp-content/uploads/2022/02/item-00.jpg" class="pic-circle"><b>ジャケット</b></a></li>
      <li><a href="#"><img src="https://css.pieceplus.jp/wp-content/uploads/2022/02/item-03.jpg" class="pic-circle"><b>シューズ</b></a></li>
      <li><a href="#"><img src="https://css.pieceplus.jp/wp-content/uploads/2022/02/item-06.jpg" class="pic-circle"><b>アクセサリー</b></a></li>
      <li><a href="#"><img src="https://css.pieceplus.jp/wp-content/uploads/2022/02/item-08.jpg" class="pic-circle"><b>帽子・バッグ</b></a></li>
    </ul>
</div>
</div>

物販サイトならアイテムアイコン付きの方がイメージしやすいので、画像を丸くトリミングするスタイル（class=”pic-circle”）をimgに付けることで、画像を丸く表示します。画像のサイズは正方形じゃなくても丸くトリミングするスタイルになっているので、画像サイズはバラバラでも大丈夫です。

横幅を狭くすると横スクロールバーが表示され、横にスクロールします。

<div class="nav-wrap">
<div class="scroll-nav">
    <ul>
      <li><a href="#"><b>トップス</b></a></li>
      <li><a href="#"><b>パンツ</b></a></li>
      <li><a href="#"><b>スカート</b></a></li>
      <li><a href="#"><b>ジャケット</b></a></li>
      <li><a href="#"><b>シューズ</b></a></li>
      <li><a href="#"><b>アクセサリー</b></a></li>
      <li><a href="#"><b>帽子・バッグ</b></a></li>
    </ul>
</div>
</div>

画像がなくても横並びになります。

カードデザインの横スクロールも作ってみよう

こちらは、ブログやTwitterやFacebookなど、多くのWebサイトで採用されているカードスタイルのデザインで狭い画面になると横スクロールバーがでるように作ってみました。

完成イメージ

See the Pen カード型横スクロール by michiyo yamada (@yamada3) on CodePen.

まずはカードデザインのCSS

/* カードデザイン */
.card-item {
  margin: 0 10px;
  min-width: 240px;
  max-width: calc((100% / 5) - 20px);
  white-space: normal;
  background-color: #f4f4f4;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card-item .pic {
  overflow: hidden;
  width: 100%;
  height: 160px;
}
.card-item .pic img {
  aspect-ratio: 1.618 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-item a {
  text-decoration: none;
  display: flax;
  flex-direction: column;
}
.card-item p {
  padding: 10px;
  line-height: 1.6;
  font-size: 14px;
  text-align: left;
}
@media screen and (min-width: 1280px) {
  .card-item {
    margin-top: 20px;
  }
}
/* もっと見るリンク */
.more-link {
  font-size: 14px;
  display: block;
  text-align: right;
  padding: 10px;
  text-decoration: underline !important;
  margin-top: auto;
}
	<div class="card-item"><a href="">
		<div class="pic"><img src="https://placehold.jp/40/cc9999/993333/200x400.png"></div>
		<p>画像サイズバラバラ、テキストの文字数もバラバラでも高さを揃えます</p>
		<a href="" class="more-link">もっと見る</a>
	</a></div>

文字の大きさや余白は各々調整してください。

お客様自身が更新をする場合のコーディングは、画像サイズを合わせたり、テキストの文字数を合わせたりする事はしないと想定して、文字数の増減、画像のサイズはバラバラでもCSSでキレイに揃うように組んで納品します。

/* カード型横スクロール */
.card-wrap {
  overflow-x: auto;
  margin: 0 auto;
  padding: 30px 0;
  width: 100%;
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.card-wrap-in {
  white-space: nowrap;
  max-width: 1200px;
  min-width: 700px;
  padding: 10px;
  margin: 0 auto;
  list-style: none;
  display: flex;
}
@media screen and (min-width: 1280px) {
  .card-wrap-in {
    white-space: normal;
    flex-wrap: wrap;
  }
}

後は、class=”card-item”を上記のclassで囲ってあげれば、横スクロールが出ます。

CSS構成
  • overflow-x: auto; ←横スクロール（auto）
  • white-space: nowrap; ←自動的な折り返しをしない。

Firefox では ::-webkit-scrollbar 系が効かないので下記のプロパティで指定すると色と細さだけですがスタイルをかけることができます。

  • scrollbar-color　←スクロールバーの色
  • scrollbar-width　←スクロールバーの幅

あとがき

自分は、現在のブラウザシェア状況をみて最低限Chrome/Edge/Safari/Firefox/の主要ブラウザがカバー出来ていれば問題ないと考えています。それよりも、お客さまが手間をかけず画像がバラバラ、文字数の増減があってもキレイに並ぶようにCSSを組むことで更新が楽になりますよね。
駆け出しさんからの次のステップは、更新する人の事を考えてコーディングしましょう。

運用しやすく、検索エンジンと相性の良いサイト作りを心掛けています。

関連記事