人気記事

  1. JSでiOSにも配慮した背景固定なスクロール対応のモーダルウィンドウ

  2. CSSで游ゴシックやメイリオなどのfont-familyを指定するときのベストプラクティス

  3. CSSで簡単に縁取りされたアウトライン文字を作る

  4. IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ

  5. JSでtouchstartとclickイベントを2回発生させないようにしつつ同時に指定する

  6. CSSでスクロールバー非表示とJSでスクロールバーのデザインをカスタマイズする

  7. SVGでtext要素を上下左右中央寄せする

  8. 22個のサンプルから学ぶCSSのnth-child()を使った番目を指定するテクニック

  9. ドラッグ＆ドロップで要素を並び替えることができるSortable.js

  10. ネストや親セレクタの参照など基本的な拡張機能について学ぼう

CSSのFlexboxでスマホなどで使える横スクロールメニューを作る

よく見かけるようになったCSSだけでできる横スクロールメニューの作り方です。最近、PCではカルーセルでスマホでは横スクロールメニューと使い分けるのが一番いいような気がしています。横並びする方法としていくつかありますが、ここでは Flexbox を使っていきます。

横スクロールメニュー


<div class="container">
  <div class="menu">
    <div class="item">
      <a href="">item #1</a>
    </div>
    <div class="item">
      <a href="">item #2</a>
    </div>
    <div class="item">
      <a href="">item #3</a>
    </div>
    ...
  </div>
</div>


.container {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.menu {
  display: flex;
}
.item > a {
  display: block;
}

余計なCSSは省略しています。ポイントは white-space: nowrap; で 改行させない のと、 overflow-x: auto; で横スクロール可能にしていることです。

カード型デザイン


<div class="container">
  <div class="menu">
    <div class="item">
      <a href="">long long long long long text.</a>
    </div>
    <div class="item">
      <a href="">long long long long long text.</a>
    </div>
    <div class="item">
      <a href="">long long long long long text.</a>
    </div>
    ...
  </div>
</div>


.container {
  padding: 20px 0 20px 20px;
  white-space: nowrap;
  background-color: #3f51b5;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.menu {
  display: flex;
  margin-left: -20px;
}
.item {
  padding-left: 20px;
  flex: 0 0 160px;
  white-space: normal;
  word-wrap: break-word;
}
.item > a {
  display: block;
  padding: 1em 1.4em;
  color: #000;
  text-decoration: none;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
/* padding-rightが描画されないのを修正 */
.item:last-child {
  position: relative;
}
.item:last-child::after {
  position: absolute;
  top: 0;
  left: 100%;
  width: 20px;
  height: 1px;
  content: '';
}

横スクロールメニューの応用として、カード型デザインをよく見かけます。 white-space: nowrap; は 子要素に継承 されるため、カード内のテキストは改行されるように white-space: normal; を指定します。

また、 padding-right が描画されないバグについては以前記事を書いているので詳しく知りたい場合は見てください。

CSS本執筆しました！！！