レスポンシブなウェブデザインとは、ウェブページを構築して、そのページが訪問者の画面サイズに基づいてレイアウトや外観を動的に変更できるアプローチです。大きなスクリーンは、より大きなディスプレイに適したレイアウトを受信することができ、携帯電話のようなより小さいデバイスは、その小さなスクリーンに適した方法でフォーマットされた同じウェブサイトを受信することができる。このアプローチは、すべてのユーザーにとってより優れたユーザーエクスペリエンスを提供し、検索エンジンランキングの向上にも役立ちます。レスポンシブウェブデザインの重要な部分は、CSS Media Queriesです。
Media Queriesは、WebサイトのCSSファイル内に条件文がほとんどないようなもので、特定の条件が満たされたとき（画面のサイズが特定のしきい値を上回る場合や下回る場合など）にのみ有効なCSSルールを設定できます。
実行中のメディアクエリ
では、どのようにしてウェブサイトでメディアクエリを使用しますか？ここには非常に簡単な例があります：
- ビジュアルスタイルのない、整形式のHTMLドキュメントから始めましょう（これはCSSのためのものです）
- CSSファイルでは、ページのスタイルを設定し、Webサイトの外観を示すベースラインを設定することで、通常どおりに作業を開始します。ページのフォントサイズを16ピクセルにしたければ、このCSSを書くことができます：
本文{font-size：16px; }
- 今では、そうするために十分な不動産を持っている大画面のフォントサイズを大きくしたいかもしれません。これは、メディアクエリが始まるところです。次のようにメディアクエリを開始します。
@media画面と（最小幅：1000ピクセル）{}
- これはメディアクエリの構文です。 Media Query自身を確立するために@mediaから始まります。次に、「メディアタイプ」を設定します。この場合は「スクリーン」です。これは、デスクトップコンピュータの画面、タブレット、電話などに適用されます。最後に、メディアクエリを「メディア機能」で終了します。上の例では、 "mid-width：1000px"です。これは、幅1000ピクセル以上のディスプレイでMedia Queryが起動することを意味します。
- Media Queryのこれらの要素の後に、通常のCSSルールで行う処理と同様の開始および終了の中括弧を追加します。
- Media Queryの最後のステップは、この条件が満たされたら適用するCSSルールを追加することです。メディアクエリーを構成する中括弧の間に、次のようにこれらのCSSルールを追加します。
@media screenと（最小幅：1000px）{body {font-size：20px; }
- Media Queryの条件が満たされると（ブラウザウィンドウの幅が少なくとも1000ピクセルです）、このCSSスタイルが有効になり、サイトのフォントサイズが最初に設定した16ピクセルから新しい20ピクセルに変更されます。
より多くのスタイルを追加する
ウェブサイトの外観を調整するために、必要に応じてこのMedia Query内に多くのCSSルールを配置することができます。たとえば、フォントサイズを20ピクセルにするだけでなく、すべての段落の色を黒（＃000000）に変更する場合は、次のように追加することができます。
@media screenと（最小幅：1000px）{body {font-size：20px; } p {色：＃000000; }}
その他のメディアクエリの追加
さらに、大きいサイズのメディアクエリを追加して、スタイルシートに次のように追加することもできます。
@media screenと（最小幅：1000px）{body {font-size：20px; } p {色：＃000000; {} @media画面と（最小幅：1400ピクセル）{body {font-size：24px; }}
最初のMedia Queriesは1000ピクセル幅でキックインされ、フォントサイズは20ピクセルに変更されます。その後、ブラウザが1400ピクセルを超えると、フォントサイズは再び24ピクセルに変わります。特定のウェブサイトに必要な数のメディアクエリを追加できます。
最小幅と最大幅
一般に、「最小幅」または「最大幅」を使用して、メディアクエリを書き込むには2つの方法があります。これまでのところ、私たちは実際に「最小幅」を見てきました。これにより、ブラウザが少なくともその最小幅に達したら、Media Queriesが有効になります。ブラウザが少なくとも1000ピクセルの幅を持つ場合、 "min-width：1000px"を使用するクエリが適用されます。このスタイルのメディアクエリは、サイトを「モバイルファースト」で構築する場合に使用されます。
"max-width"を使用すると、逆の動作をします。ブラウザがこのサイズを下回ると、「max-width：1000px」のメディアクエリが適用されます。
古いブラウザについて
Media Queriesの1つの課題は、古いバージョンのInternet Explorerでのサポートの欠如です。ありがたいことに、これらの古いブラウザでMedia Queriesのサポートをパッチできるpolyfillがあります。これにより、古いブラウザソフトウェアでそのサイトの表示が壊れていないことを確認しながら、今日のWebサイトでも使用できます。
ジェレミージラール編集1/24/17
7
