近年のコーディングでは端末に合わせてレイアウトなどの表示を最適化するレスポンシブ対応が一般的ですが、その際にはメディアクエリを使って画面幅など条件のもとスタイルを切り分ける形がよく行われています。ただ、分岐が細かくなったりメディアクエリの箇所が増えてくるとコードの保守性も下がってしまうという懸念もあります。そんな時、クライアントワークであった要件を満たすのに使えたテクニックの中でメディアクエリを使わずに実装したものがあったので備忘録として残しておきたいと思います。レスポンシブの基本的な手法としては、メディアクエリを使ってスタイルを画面幅の条件に合わせて分岐させるというのがありますが、常に画面幅に連動するよう可変させることでメディアクエリがなくてもレイアウトが最適化できるようになります。この考え方でメディアクエリを使わないレスポンシブコーディングのアプローチを検討してみたいと思います。   今回はその中でもレイアウトのベースとなるカラムレイアウトについてみていきます。2列、3列、複数列といった列の横並びで組まれるレイアウトで、Webページのレイアウトパターンとしては重要なものになります。今回はこのようなHTMLを用意し、6列から1列まで画面幅に応じてレイアウトが複数行に可変していく例を見ていきます。

<div class="row">
  <div class="column">カラム1</div>
  <div class="column">カラム2</div>
  <div class="column">カラム3</div>
  <div class="column">カラム4</div>
  <div class="column">カラム5</div>
  <div class="column">カラム6</div>
</div>

   

1. メディアクエリあり（Flexboxでマルチカラムにして指定幅に合わせてカラム数を調整）

まずは一般的によく使われているであろう、メディアクエリを使ったパターンです。横ならびに配置する方法はいくつかありますが、ここではFlexboxを使った方法で進めています。デスクトップファーストか、モバイルファーストかで順番は変わりますが、基本的に共通となるベースのスタイルでFlexboxによる横並びの配置にして、メディアクエリごとにコンテナ要素に対してのカラム要素幅を変えていくというものになります。

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.column {
  width: calc(16.6666% - 20px);
}
@media (max-width: var(--screen-xl)) {
  .column {
    width: calc(20% - 19.2px);
  }
}
@media (max-width: var(--screen-lg)) {
  .column {
    width: calc(25% - 18px);
  }
}
@media (max-width: var(--screen-md)) {
  .column {
    width: calc(33.3333% - 16px);
  }
}
@media (max-width: var(--screen-sm)) {
  .column {
    width: calc(50% - 12px);
  }
}
@media (max-width: var(--screen-xs)) {
  .column {
    width: 100%;
  }
}

  このパターンで作成したサンプルはこちらに用意しています。この方法ですと、直感的で実装しやすい反面、どうしてもコードの量が多くなったり、細かく調整する場合にはそれだけメディアクエリの分岐が必要になってきます。   そこで、Flexboxでコンテナ要素の幅を基準に自動で幅が決まるようにしてみます。具体的には「flex-shrink」と「flex-grow」を使ってカラム幅を調整します。コンテナ要素のエリア内にカラム要素が埋め尽くされるようにそれぞれの値を設定します。ただ、そのままですとカラム幅がコンテンツによってバラバラになるので「flex-basis」でベースとなる幅を決めておき各カラム幅を揃えます。

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.column {
  flex-shrink: 0;
  flex-grow: 1;
  flex-basis: var(--base-column-width);
}

  このパターンで作成したサンプルはこちらに用意しています。この方法では、一見するとメディアクエリなしでレスポンシブのレイアウトが実現できるように見えますが、折り返した時にコンテナ要素内のスペースをカラム要素が埋め尽くすようになってしまうため、状況によってはカラム幅が変わってしまうというケースも出てきてしまいます。    

2. メディアクエリなし（Gridでマルチカラムにしてカラムの下限と上限幅に合わせてカラム数を調整）

続いて、メディアクエリなしでGridLayoutを使って実装するサンプルを見ていきます。display: grid;の指定をすることであらかじめ全体の各カラム幅やカラム数を決めることができます。メディアクエリを使う場合には、画面幅に応じてカラムの幅や数を切り替えますが、今回はカラム幅の下限と上限を決めて、それに合わせてカラム数が自動的に調整されるようにします。ポイントとなるのは、幅指定を繰り返すための「repeat()」、上限と下限の幅を決める「minmax()」とそれぞれのCSS関数と、repeat()のオプションである「auto-fit」です。

.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
  gap: 24px;
}

  このパターンで作成したサンプルはこちらに用意しています。この方法では、たったこれだけの指定でメディアクエリなしのフレキシブルなカラムレイアウトが実現できてしまいます。minmax()では下限のカラム幅を設定し、上限は残りのスペースを自動的に決める指定としているため、最低限の幅を維持しながら、コンテナ要素内にあるスペースを埋めるように自動的に調整されるようになりますが、その際に合わせて必要なのがauto-fitの指定になります。   ちなみにauto-fitではなく下記のように「auto-fill」のオプションの場合には、コンテナ要素内のスペースを埋めるという形にはならず、そのままスペースが維持されるようになります。

.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--min-column-width), 1fr));
  gap: 24px;
}

  このパターンで作成したサンプルはこちらに用意しています。この方法ではカラムの幅や数によりますが、コンテナ要素の幅を満たしていたり画面幅が狭い場合には同じような挙動になりますが、そうでない場合には成り行きになってしまうのでスペースが発生してしまいます。ちょうどinline-blockとして要素を並べたようなイメージに近いですね。  

---

  先日IEのサポートが終了し、モダンブラウザで活用できるCSSのテクニックも使いやすくなっている状況も相まって、工夫次第ではメディアクエリなしでもレスポンシブ対応できる例はたくさんあるのではないでしょうか。今回はカラムレイアウトに絞ってまとめてみましたが、まだまだメディアクエリに依存しないレスポンシブコーディングのテクニックもあると思いますので、また別記事にてまとめてみたいと思います。