CSSフレームワーク「Bulma」の「columns」クラスに関する挙動について

CSSフレームワークの「Bulma: Free, open source, and modern CSS framework based on Flexbox」のcolumnsクラスの挙動がおかしい、というお話です。

Columns responsivenessは、Flexboxをベースとしたレスポンシブなレイアウトを簡単に定義できます。ところが、以下のシンプルなコードをみてください。

<html>
<body>
  <div class="columns is-desktop">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
  </div>
</body>
</html>

何の変哲もない、チュートリアルに出てきそうなカラムレイアウトです。一見、何の問題もなさそうに見えます。しかし、本コードには以下の問題があります。

  • columnsで定義されたdivエレメントの横幅が、親要素であるbodyエレメントの横幅を上回っている

Chromeのデベロッパーツールで確認すると、以下のように表示されます。

bodyエレメントの横幅1618pxに対し、columnsクラスを付与したdivエレメントの横幅は1642pxと、bodyエレメントの横幅を上回っています。マージンのせいです。この事実により、以下の問題が生じます。

  • ブラウザは最上位のbodyエレメントの横幅を基準に表示する
  • しかし、その子要素であるdivエレメントの横幅が上回っているため、要素がはみ出してレンダリングされる

デスクトップではあまり気になりませんが、モバイルからアクセスすると左右等に「ページがぐらつく」問題が発生します。モバイルでページ表示後に、2本の指で目一杯縮小すると「ぐらつき」はなくなります。ただし、少々気持ち悪いです。ワークアラウンドとしては、以下のようにis-marginlessクラスを付与します。これは、強制的にcolumnsクラスで付与されるマージンを0にするものです。

<html>
<body>
  <div class="columns is-desktop is-marginless">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
  </div>
</body>
</html>

参考リンク

comments powered by Disqus