メディアクエリCSSチュートリアル–標準解像度、CSSブレークポイント、およびターゲット電話サイズ

以前は、Webサイトの構築ははるかに簡単でした。今日、Webサイトのレイアウトは、コンピューターだけでなく、タブレット、モバイルデバイス、さらにはTVにも適応するはずです。

適応可能なレイアウトでウェブサイトを作ることはレスポンシブウェブデザインと呼ばれます。また、CSSメディアクエリはレスポンシブデザインの最も重要な部分の1つです。この記事では、メディアクエリとCSSでの使用方法について詳しく見ていきます。

必要に応じて、以下のビデオバージョンを見ることができます。

メディアクエリとは何ですか?

メディアクエリは、Webページのレイアウトをさまざまな画面サイズとメディアタイプに適合させるCSS3機能です。

構文

@media media type and (condition: breakpoint) { // CSS rules }

さまざまな条件下でさまざまなメディアタイプをターゲットにできます。条件やメディアタイプが満たされている場合は、メディアクエリ内のルールが適用されます。そうでない場合は、適用されません。

構文は最初は複雑に見えるかもしれませんので、各部分を1つずつ詳しく説明しましょう…

@メディアルール

@mediaルールを使用してメディアクエリの定義を開始し、後で中括弧内にCSSルールを含めます。@メディアルールは、ターゲットメディアタイプを指定するためにも使用されます。

@media () { // CSS rules }

括弧

括弧内に条件を設定します。たとえば、モバイルデバイスにはより大きなフォントサイズを適用したいと思います。これを行うには、デバイスの幅をチェックする最大幅を設定する必要があります。

.text { font-size: 14px; } @media (max-width: 480px) { .text { font-size: 16px; } }

通常、テキストサイズは14pxになります。ただし、メディアクエリを適用したため、デバイスの最大幅が480px以下の場合、16pxに変更されます。

重要:メディアクエリは常にCSSファイルの最後に配置してください。

メディアタイプ

メディアタイプを適用しない場合、@メディアルールはデフォルトですべてのタイプのデバイスを選択します。それ以外の場合、メディアタイプは@メディアルールの直後にあります。デバイスにはさまざまな種類がありますが、次の4つのカテゴリに分類できます。

  • all —すべてのメディアタイプ用
  • 印刷—プリンター用
  • 画面—コンピューター画面、タブレット、およびスマートフォン用
  • スピーチ—ページを大声で「読む」スクリーンリーダー用

たとえば、画面のみを選択する場合は、@メディアルールの直後にscreenキーワードを設定します。また、ルールを「and」キーワードで連結する必要があります。

@media screen and (max-width: 480px) { .text { font-size: 16px; } }

ブレークポイント

ブレークポイントは、おそらくあなたが聞いて使用する最も一般的な用語です。ブレークポイントは、レイアウトをいつ変更し、メディアクエリ内の新しいルールを適応させるかを決定するための鍵です。最初の例に戻りましょう。

@media (max-width: 480px) { .text { font-size: 16px; } }

ここで、ブレークポイントは480pxです。これで、メディアクエリは、新しいクラスをいつ設定または上書きするかを認識します。基本的に、デバイスの幅が480pxより小さい場合、テキストクラスが適用されます。それ以外の場合は、適用されません。

一般的なブレークポイント:標準の解決策はありますか?

最もよくある質問の1つは、「どのブレークポイントを使用する必要がありますか?」です。市場にはたくさんのデバイスがあるので、それらのそれぞれに固定ブレークポイントを定義することはできず、定義するべきではありません。

そのため、デバイスに標準の解像度があるとは言えませんが、日常のプログラミングで一般的に使用されるブレークポイントがいくつかあります。CSSフレームワーク(Bootstrap、Bulmaなど)を使用している場合は、それらのブレークポイントを使用することもできます。

次に、デバイスの幅の一般的なブレークポイントをいくつか見てみましょう。

  • 320px — 480px:モバイルデバイス
  • 481px — 768px:iPad、タブレット
  • 769px — 1024px:小さな画面、ラップトップ
  • 1025px — 1200px:デスクトップ、大画面
  • 1201px以上—特大画面、テレビ

上で述べたように、これらのブレークポイントは異なる可能性があり、正確に定義された標準はありませんが、これらはいくつかの一般的に使用されるものです。

まとめ

レスポンシブデザインは、今日のWebデザインおよび開発分野では必須です。メディアクエリはレスポンシブレイアウトを構築する上で最も重要な部分の1つであり、私の投稿がメディアクエリの仕組みを理解するのに役立つことを願っています。

Web開発について詳しく知りたい場合は、私のチャンネルに登録してください。

読んでくれてありがとう!