はじめに

OSS の CSS Framework Bulma を使って、メルカリ風のレスポンシブなデザインを構築する方法について整理した。

「メルカリ風のレスポンシブなデザイン」というのは、

  • デスクトップなどでは「サイドバー」+「コンテンツ」
  • モバイルでは「サイドバー」が非表示になり、クリック(タップ)で表示される

というような構成を意味している。

TL;DR

  • モバイル表示時には隠したい部分に is-hidden-mobile クラスを付与する
  • モバイル表示時に隠した要素を表示するためのボタンなどに is-hidden-tablet クラスを付与する
  • 上記ボタンをクリックした時に is-hidden-mobile をトグル(On/Off)する
  • 全体のデザインは columns + column + is-<n>-<device> で調整する
続きを読む
  • page 1 of 1

r17n


Softwear Engineer


Fukuoka