はじめに

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

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

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

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

TL;DR

  • モバイル表示時には隠したい部分に is-hidden-mobile クラスを付与する
  • モバイル表示時に隠した要素を表示するためのボタンなどに is-hidden-tablet クラスを付与する
  • 上記ボタンをクリックした時に is-hidden-mobile をトグル(On/Off)する
  • 全体のデザインは columns + column + is-<n>-<device> で調整する
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 完成イメージ
    2. ポイント
      1. Responsive helpers を活用
      2. 全体デザイン
  5. まとめ
  6. 参考文献

環境・条件

  • Bulma v0.7.5
  • jQuery v3.4.1
    • is-hidden-mobile クラスのトグルに使ったが、同じことができれば素の JS でも良い

詳細

Bulma を使ったウェブサイトを作っていて、メルカリのような

  • 「デスクトップ: サイドバー(検索バー) + コンテンツ」
  • 「モバイル: サイドバー(検索バー)がデフォルト非表示になって、クリックすると表示」

という構成の作り方に試行錯誤したので忘れないように整理した。

イメージは以下の GIF 動画の通り。

mercari image

完成イメージ

まずは完成イメージ、CodePen で書いたのでウィンドウサイズ(1x, 0.5x, 0.25x のとこ)を変更すると挙動が確認できると思う。

See the Pen [Bulma] メルカリ風の構成(サイドバー、コンテンツ) by 17num (@17num) on CodePen.

リンク: [Bulma] メルカリ風の構成(サイドバー、コンテンツ)

※Slim で記述しているので、素の HTML が見たい場合は下にある「View Compiled」をクリック。

ポイント

細かい部分は省略して、ポイントとなる部分だけ簡単に整理しておく。

Responsive helpers を活用

Bulma には Responsive helpers と呼ばれる便利なクラスが用意されている。その中の Hide の項に書かれている通り、特定のサイズで非表示にする is-hidden というクラスがある。

上記画像の通り is-hidden-mobile と is-hidden-tablet を組み合わせることで、「モバイルでしか表示しない要素」と「タブレット以上で表示する要素」とを実現できる。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="columns is-multiline is-mobile is-tablet is-desktop">
  <div class="column is-12-mobile is-4-tablet is-3-desktop">
    <aside>
      <!-- モバイルでのみ表示されるボタン -->
      <div class="is-hidden-tablet">
        <button class="button is-secondary" id="toggle-search-form"><i class="fas fa-search"></i>詳細検索</button>
      </div>
      <!-- モバイルではデフォルト非表示になる検索フォーム(サイドバー) -->
      <div class="is-hidden-mobile" id="search-form">
        <form>
          ...
        </form>
      </div>
    </aside>
  </div>
</div>

あとは検索フォームを開閉するボタンにトリガーを設定すれば良い。表示/非表示 の切り替えは is-hidden-mobile クラスをトグル(On/Off) することで実現している。jQuery を使っているが、別に素の JS で addEventListener を使っても良い。

1
2
3
4
5
$(window).on("load", () => {
  $("button#toggle-search-form").on("click", () => {
    $("#search-form").toggleClass("is-hidden-mobile");
  });
});

全体デザイン

全体の配置はカラムレイアウト(Bootstrap などでもおなじみのアレ)で実現。サイズなどは Column sizes などを参考に適宜調整する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="columns is-multiline is-mobile is-tablet is-desktop">
  <!-- モバイルではカラム全体を使用、タブレット以上ではサイドバーとして表示-->
  <div class="column is-12-mobile is-4-tablet is-3-desktop">
    <aside>
      <!-- 検索フォーム -->
    </aside>
  </div>
  <!-- モバイルではカラム全体を使用、タブレット以上では右側部分に表示-->
  <div class="column is-12-mobile is-8-tablet is-9-desktop">
    <!-- コンテンツ部分をさらに columns で区切って表示する -->
    <div class="columns is-multiline is-mobile is-tablet is-desktop">
      <div class="column is-6-mobile is-4-tablet is-3-desktop">
        <div class="box">
          Content
        </div>
      </div>
      ...
    </div>
  </div>
</div>

まとめ

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

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list