メディアクエリーはもう必要ないかもしれません

昔々のウェブ開発の世界で、レスポンシブなウェブサイトやアプリケーションを作りたいと思ったら、特定のデバイスブレークポイントに沿ったメディアクエリーをいくつも書いて、それぞれのサイズに合わせてコンテンツを再構築する必要がありました（コメントで誰かがウェブ開発の「本当に」古い時代はテーブルベースのレイアウトだったと言う前に – 私はそれを覚えていますし、それもまたひどかったです）。CSSフレームワークが登場して、デバイスのブレークポイントという痛みの点を和らげました – Bootstrap、Skeletonなど。なぜなら、それらを書くのはたくさんの作業だったのです！徐々に、ますますたくさんの形やサイズのデバイスが登場するにつれて、メディアクエリーに関するベストプラクティスが（必然的に）デバイスベースのブレークポイントからコンテンツベースのブレークポイントへと移行していきました。今や、あらゆるサイズの画面が入手可能となり、私たちのアプローチを再度変える時が来ました – ブレークポイントの時代は終わり、流動的なデザインの時代が到来しました。新しいレイアウトにスナップするのではなく、利用可能なスペースに基づいてコンテンツが常に適応するべきです。

ありがたいことに、CSSもそれ以来ずいぶんと進化していますが、多くの人々はまだメディアクエリーを挿入して物事をレスポンシブにすることに慣れており、決してその習慣を抜け出すことはありませんでした。今こそ、grid、flexbox、vh、vw、calc、clamp、min、max、aspect-ratioなどの現代的なCSS機能があるので、メディアクエリーを止める時が来ました。この記事では、大枠のディスプレイのフォーマットから最小の単位までトップダウンアプローチで取り組んでいきます。古いスタイルシートに関しては...リファクタリングできます。技術はもっているのです。

大枠: グリッドとフレックスボックス

まず始めに、最も人気のあるレスポンシブディスプレイオプションであるgridとflexboxから見ていきましょう。これらはしばらく前から存在していて、gridは2017年に、flexboxは2013年に全ブラウザでサポートされましたが、多くの人々はまだそれらの違いや、それぞれをいつ使うべきか（または両方使うべきか）を完全には理解していません。多くの人々がこれらの間に間違った等価性を仮定しており、どちらか一方のツールを選択する観点から誤ったアプローチを生み出しています – 実際には非常に異なる使用例があり、互いを補完するように（そしてまた補完されるべきで）使うことができます！

ただし、私たちの目的のためには、どのように機能するか、そしてメディアクエリーを使わずに自然にラッピングし、レスポンシブに調節するページ上のエレメントのレイアウトをどのように扱うかに焦点を当てましょう。

グリッド

gridは、要素を配置するために複数の行や列を生成することに主に焦点を当てています。これを行うには、<grid>コンテナ要素を作成し、その後で子要素で埋めることになります。あなたが想像できるようなシンプルで複雑なグリッドを作成するために、たくさんのカスタマイズを行うことができます。

しかし、私たちが目指しているシンプルでレスポンシブなデザインを作成するためには、最も関連する機能を見ていきましょう。グリッドは、自動的に繰り返す列や行と、利用可能なスペースに自動的にサイズ調整されるauto-fit属性を持っています。例えば、以下のコードです。

 .grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

この場合、グリッドは利用可能なスペースに自然にフィットする列にコンテンツを変換し、各列は少なくとも300pxの最少幅を持ち、1frを超える最大幅を持ちません。1frは新しいCSSの単位で、分数を意味し、利用可能なスペースを均等に分割し、各々の列がそのスペースの一部分を取るようにブラウザに伝えます。この場合、それぞれが利用可能なスペースの1/3を占める三つの等しい列を作成しますが、300pxより小さくなることはありません。もし私たちが別のdivを追加したり、一つ取り除いたとしても、グリッドは自動的に計算を行い、ディスプレイを調整します。そして、画面が同時にすべての列を並べて配置するには小さすぎる場合は、自動的に残った列を次の行にラップします。

グリッドを使ってより複雑なレイアウトを作成したい場合、お勧めのリソースは次のものです：

グリッドの完全ガイド, 列の幅を変えたり、テンプレートエリアを設定したり、グリッドセル間の隙間を設定するなど、グリッドをカスタマイズするすべての方法をファンタスティックに分解しています。
グリッドの例 新しいグリッド構造を作るときの出発点を探している場合、私のお気に入りの場所です。
そして、もっと複雑なグリッドの実際の例を探しているなら、kendo-demoアプリのframe.scssファイルをチェックしてください。ここではCSSグリッドが、各ページで使用されるメニューフレームを作成するために広範囲にわたって使用されました。

フレックスボックス

flexboxは、ページ上の要素を配置し、必要に応じて自動的に調整を行うのに似た（しかしまったく同じではない）アプローチを提供します。ただし、複数の行と列を持つ完全なグリッドを作成するのではなく、flexboxは親要素内で相互に関連する子要素の位置付けについてです。基本的に：一度に二つの方向（行と列）で作業する必要があればグリッドを見てください。一つの方向に焦点をあてる必要がある場合（単一の行または列）、ここでflexboxを使用したいところです。

再び、いつ各々がどのように応用されるかについて非常に多くのことを調べるべきですが、他の記事は置いておきましょう。今は、どのようにflexboxがメディアクエリーを必要とせずに、あなたのためにレスポンシブ性を処理するかに焦点を当てましょう。

主な関心点はflex-wrapプロパティです。flexはまず一行または一列にすべてのエレメントを収めようとしますが、それがうまくいかない場合、flex-wrapにwrapを設定してラッピングを許可できます。もしflex-wrapが指定されていない場合、flexは子要素にmin-widthが指定されていない限り、エレメントを押しつぶして同じ線上に保つか、エレメントがビューから溢れることを許可します（もし子要素にmin-widthが指定されていれば）。

.flex {
  display: flex;
  flex-wrap: wrap;
}

.flex > div {
    width: 300px
}

<div class="flex">
  <div></div>
  <div></div>
  <div></div>
</div>

基本的に、グリッドとフレックスの両方で、コンテンツを圧縮するかラップするかを決定し、それに応じてプロパティを設定するだけです！フレックスボックスをマスターするためのリソースを探している人には次のお気に入りがあります：

Flexbox Froggy: 魅力的なカエルのイラストを使って、異なるプロパティが何をするのかを習得するのに役立つ楽しいゲームです。
FLEX: 作業中に参照するためのシンプルで視覚的なチートシートを提供します！

中道: CSSプロパティ

一旦、一般的なレイアウトを確立したら、私たちの要素に特定のプロパティを設定する時が来ます – 素晴らしいニュースは、ここでもメディアクエリーは必要ありません！

aspect-ratio

アスペクト比に特に設計されたCSSプロパティがあるのをご存知でしたか？これは特に、正しいアスペクト比の維持が非常に重要であるビデオや大きなヒーローイメージを扱う場合に最適です。CSS Tricksには素晴らしい深い解説がありますが、一般的には適用するのはとても簡単です – 必要なのはその一行だけです。

  .video-wrapper { aspect-ratio: 16/9; }

特定のwidth値とaspect-ratioを設定した場合、その値を基準にして自動的にheight値を生成します（またはその逆）。ただし、widthとheightの両方を宣言すると、aspect-ratioよりもこれらを優先しますので、注意してください！

min-height, max-height, min-width, および max-width

最小および最大の高さと幅のプロパティは、clamp()関数（次のセクションで見ていきます）で多くの使用例を取り除くことができますが、これらはまだ有効なCSSであり、ポケットに入れておくことが重要です。これらも簡単です、なぜなら彼らはその名前が示す通りのことをほぼ行うからです。

.img {
  width: 100%; 
  max-width: 50%;
  min-width: 200px; 
}

ここでは、画像ができるだけ多くのスペースを使用するように、まず最初にmax-widthの指示を出しています。それから、いくつかのガイドレールを与えています – コンテナの半分以上を占めることを望まないため、200pxの最小幅を設定しています。この場合、小さい端にのみ絶対値を設定しています。なぜなら、画像が認識できなくなる前にどれくらい小さくなるかを正確に知っているからです。今、ブラウザのサイズがどう変わっても、私たちの画像はできるだけ大きくなると知っています...ただし、あり得ないほど巨大になったり、読めなくなるほど小さくなったりすることはありません。

正常に動作する: 数学関数

数学関数はCSSに新しく追加された機能で、非常に強力です。それらは、スタイルシート内で値を計算し、プロパティに範囲を設定する機能を求めていたCSS開発者たちが長年不満を持っていた問題を解決しました。それらを習得し、コードに使用することができると、さらに多くのメリットを得ることができます！

clamp()

clamp() はプロパティの基礎値を設定し、それが調整されるにつれて上限値と下限値を設定することを可能にします。これはメディアクエリーを放棄するための最良のツールの一つです、なぜならそれは特定のブレークポイントを定義する必要なく、これらのレスポンシブな制限を設定することを可能にするからです。どうやって機能するかは次の通りです：

.img {
  /* フォーマットは `clamp(最小値, 基<br><br>こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。<br>[https://dev.to/kathryngrayson/you-probably-dont-need-media-queries-anymore-a4j](https://dev.to/kathryngrayson/you-probably-dont-need-media-queries-anymore-a4j)