CSSメディアクエリ

さまざまなデバイス間で互換性のあるWebサイトを設計することは、できるだけ多くの異なるユーザーがWebサイトにアクセスできるようにするための重要なステップです。

そこでメディアクエリが登場します。CSSメディアクエリを使用すると、ブラウザが定義したルールと一致する場合にのみCSSルールを適用できます。したがって、ユーザーがスマートフォンでWebページを表示している場合にのみ適用されるルールを定義できます。

このチュートリアルでは、レスポンシブWebデザインの基本、メディアクエリのしくみ、独自のCSSメディアクエリのデザイン方法について例を挙げて説明します。このチュートリアルを読み終えると、CSSでメディアクエリを設計するエキスパートになります。

レスポンシブウェブデザインとメディアクエリ

レスポンシブウェブデザインとは、開発者がサイトのスタイルシートを最適化して、さまざまなデバイスや画面サイズでサイトを正しくレンダリングできるようにする一連のプラクティスを指します。

レスポンシブWebデザインが非常に重要である理由は、ビューアがWebページを表示するために使用する出力デバイス（およびそのブラウザウィンドウと画面サイズ）が、Webページの読み込み方法に影響を与えるためです。 Webサイトがさまざまなデバイスと画面サイズを念頭に置いて設計されていない場合、一部のユーザーはWebサイトに表示されるすべてのコンテンツを表示するのに苦労する可能性があります。

レスポンシブWebデザインには、フレックスボックスの使用から相対的なスタイルまで、幅広いプラクティスが含まれますが、メディアクエリは、Webのレスポンシブ性を念頭に置いて設計されたWebサイトの重要な部分です。

メディアクエリを使用すると、使用するデバイスの種類、デバイスの向き、およびビューポートサイズに応じて、Webページでのスタイルの表示方法を調整できます。

メディアクエリを使用すると、ユーザーがサイトを表示しているさまざまな画面やデバイスに基づいて、要素をWebサイトに異なって表示させることができます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

メディアクエリ構文

CSSでメディアクエリを宣言するには、@mediaを使用する必要がありますルール。このルールでは、特定の条件がtrueと評価された場合にのみ、CSSプロパティのブロックを実行できます。

CSSメディアクエリの基本的な構文は次のとおりです。

@media media-type and (media-rule) {
	// CSS styles
}

このメディアクエリの主なコンポーネントは次のとおりです。

@media メディアクエリを作成するようにブラウザに指示します。
メディアタイプ コードが使用されるメディアのタイプ（つまり、画面または印刷）です。
および は、メディアタイプとメディアルールの両方を指定するときに使用する必要のある論理演算子です。
メディアルール メディアクエリのCSSを実行するためにtrueと評価する必要があるステートメントです。
CSSスタイル メディアルールがtrueと評価された場合にWeb要素に適用されるルールです。

メディアクエリで使用できるメディアタイプは4つあります。これらはすべて、印刷、スクリーン、およびスピーチです。デフォルトでは、値all が使用され、コンマを使用して各タイプを区切ることにより、複数のメディアタイプを指定できます。

CSSメディアルール

メディアクエリに適用できるルールタイプはいくつかあります。これらを個別に分類してみましょう。

幅と高さ

CSSメディアルールで使用される主なルールタイプは、デバイスの幅と高さです。これらのルールにより、ビューポートコンテナのサイズに応じてWeb要素にスタイルを適用できます。 viewport containerという用語ユーザーに表示されるWebページの領域を指します。

ビューポートが特定のサイズと正確に等しい場合、幅と高さのルールを使用してスタイルを適用します。したがって、ビューポートの高さが500pxの場合に、Webページ上のすべての

タグのテキストの色を青に変更する場合は、次のルールを使用して変更できます。

@media screen and (width: 500px) {
	p {
		color: blue;
	}
}

このルールは、すべての

タグのテキストの色をblueに設定しますビューポートの幅が正確に500pxの場合。

ただし、ほとんどの場合、範囲を使用してメディアクエリを適用する必要があります。したがって、たとえば、ビューポートサイズが500px以上の場合は、Webページのフォントサイズを変更できます。そこで、最小幅と最小高さのスタイルが登場します。

ビューポートの幅が500pxより大きい場合に、すべての

要素のテキストの色を青に変更する場合は、次のルールを使用できます。

@media screen and (min-width: 500px) {
	p {
		color: blue;
	}
}

このルールは、すべての

要素のテキストの色を青に設定しますが、ビューポートの幅が500px以上の場合に限ります。このメディアクエリが機能する方法は、条件min-width：500pxが評価され、ビューポートの幅が500px以上であるかどうかがチェックされます。この条件がtrueと評価された場合、pのルールスタイルはWebページに適用されます。

オリエンテーション

さらに、メディアクエリを使用して、デバイスの向きに応じてWebページにスタイルを適用できます。

ユーザーがウェブページを横向きモードで表示している場合、すべてのh2要素のテキストサイズを20pxに設定するとします。このコードを使用してこれを行うことができます：

@media (orientation: landscape) {
	h2 {
		font-size: 20px;
	}
}

このルールは、ユーザーがWebページを横向きモードで表示しているかどうかを確認し、その条件がtrueと評価された場合、すべての

要素のフォントサイズを20pxに設定します。

デフォルトでは、デスクトップは横向きを使用します。

CSSメディアクエリの例

CSSで独自のメディアクエリを作成する方法を説明するために、2つのメディアクエリの例を見ていきましょう。

基本的なメディアクエリの例：要素を非表示

Webサイトを設計していて、This site is in betaを示すボックスを表示したいとします。。すべてのモバイルデバイスで。このボックスは、まだモバイルエクスペリエンスをテストしているため、モバイルデバイスにのみ表示されます。

次のコードを使用してこのボックスを作成できます：

<html>

<p class="betaBox">This site is in beta.</p>
<html>
  
<style>

.betaBox {
	background-color: orange;
	padding: 10px;
}
<style>
@media screen and (max-width: 600px) {
	.betaBox {
		display: none;
	}
}

コードは次のようになります：

コードを分解してみましょう。 HTMLファイルでは、This site is in betaというテキストを含む

タグを定義しています。。

タグに割り当てられたクラスはbetaBoxです。。

CSSファイルでは、2つのスタイルを指定しました。 .betaBoxスタイルは、クラス名がbetaBoxの要素の背景色を設定します。オレンジ色に変更し、要素のコンテンツとその境界線の間に10pxのパディングスペースを作成します。

次のルールはメディアクエリを使用します。メディアクエリでは、max-width：600pxは、ビューポートが600pxより狭い場合にのみスタイルルールを適用する必要があることをブラウザに通知します。したがって、ユーザーがモバイルデバイスでサイトを表示すると、このスタイルが呼び出されます。

メディアクエリが実行されると、display：noneルールがクラス名.betaBoxのすべての要素に適用されます。。

複数のメディアクエリの例：フォントサイズ

前の例では、1つのメディアクエリのみを指定しました。ただし、CSSファイルで複数のメディアクエリを指定することはできます。つまり、複数の条件の1つが満たされているかどうかに応じて、Webページ上の要素に特定のスタイルを適用できます。

Webサイトを設計していて、

ヘッダーのフォントサイズを画面サイズに応じて変更したいとします。サイトに適用するルールは次のとおりです。

画面の幅が480px以下の場合、ヘッダーのフォントサイズは16pxである必要があります。
画面の幅が481ピクセルで、600ピクセル以下の場合、ヘッダーのフォントサイズは20ピクセルである必要があります。
画面の幅が601px以上の場合、ヘッダーのフォントサイズは24pxである必要があります。

次の3つのメディアクエリを使用して、ユーザーの画面のサイズに応じてWebページのフォントのサイズを変更できます。

<html>

<h1>This is an example header.</h1>
<html>
  
<style>

@media screen and (min-width: 480px) {
	h1 {
		font-size: 16px;
	}
}

@media screen and (min-width: 481px) and (max-width: 600px) {
	h1 {
		font-size: 20px;
	}
}

@media screen and (min-width: 601px) {
	h1 {
		font-size: 24px;
	}
}
<style>

CSSメディアクエリ 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

コードがどのように機能するかを分析してみましょう。 HTMLファイルでは、テキストを表示する

タグを使用してサンプルヘッダーを定義しました。`This is an example header` 。

次に、CSSファイルで、3つのメディアクエリを定義しました。

最初のメディアクエリは、ブラウザのビューポートのサイズが480px以下であるかどうかをチェックし（max-width：480pxを使用）、このステートメントがtrueと評価された場合、すべての

要素のフォントサイズを16pxに設定します。

2番目のメディアクエリは、ビューポートのサイズが481px以上（最小幅：481pxを使用）および600px以下（最大幅：600pxを使用）であるかどうかを確認します。これがtrueと評価された場合、すべての

要素のフォントサイズは20pxに設定されます。

3番目のメディアクエリは、ビューポートのサイズが601pxより大きいかどうかをチェックします（min-width：601pxを使用）。このルールがtrueと評価された場合、すべての

要素のフォントサイズが24pxに変更されます。

メディアクエリブレークポイント

ブレークポイントは、Webサイトがメディアクエリを適用するポイントを設定するために使用されます。

メディアクエリを設計するとき、自分自身に質問するかもしれません。メディアクエリを設定するためにどのサイズを使用する必要がありますか？レスポンシブWebデザインを始めたばかりの場合、Webサイトがレンダリングするデバイスのサイズを把握するのが難しい場合があるため、これは妥当な質問です。

インターネット上には特定の画面サイズを対象としたリストがあり、メディアクエリのブレークポイントを設定するのに役立ちます。ただし、さまざまなデバイスが存在するため（すべて独自の画面サイズと仕様があります）、これらのリストは通常、すべての主要なポイントを網羅しているわけではありません。

メディアクエリをトリガーするタイミングを選択する最良の方法は、要素が押しつぶされたりトリミングされたりする場所をWebサイトで探すことです。したがって、モバイルデバイスで完全に表示されていない要素が表示された場合は、ブレークポイントを追加する必要がある可能性があることがわかります。

次に、これらのポイントを特定したら、カスタムメディアルールを作成できます。たとえば、幅が500px未満のデバイスでは、

タグが正しくレンダリングされないことに気付くかもしれません。その場合は、この解像度のカスタムスタイルをデザインするためのメディアクエリを作成する必要があります。

ただし、開始するために、Webサイトへのアクセスに使用される可能性のある主要なデバイスをターゲットにするのに役立つブレークポイントのリストを次に示します。

ほとんどの電話：@media screenおよび（max-width：600px）{}
ポートレートタブレットと大型電話：@media screen and（min-width：600px）{}
ランドスケープタブレット：@media screen and（min-width：768px）{}
ノートパソコンとデスクトップマシン：@media screen（min-width：992px）{}
大型のラップトップおよびデスクトップマシン：@media screen（min-width：1200px）{}

これらのルールは、メディアクエリのブレークポイントの決定を開始するのに役立ちますが、Webサイトの特定のニーズに合わせていくつかの変更を加えることになる可能性があります。

結論

メディアクエリはCSSで使用され、レスポンシブデザインをWebページに追加します。メディアクエリを使用すると、条件または一連の条件が満たされたときに特定のスタイルを適用できます。たとえば、メディアクエリを使用して、Webページの幅が750pxを超える場合に、Webページのフォントサイズを変更できます。

このチュートリアルでは、例を参照して、レスポンシブWebデザインの基本、メディアクエリのしくみ、およびメディアクエリの記述方法について説明しました。これで、プロのWebデザイナーのようにCSSでメディアクエリを操作する準備が整いました。

CSSテキストシャドウ

CSSの概要

CSSのメディアクエリを使用したレスポンシブWebデザイン
メディアクエリは、モバイル、デスクトップなどのさまざまなサイズのデバイスのさまざまなスタイルルールのCSS手法です。以下は、CSSでのメディアクエリとレスポンシブウェブデザインを示すコードです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> body { font-family: &quo
CSSで一般的なデバイスブレークポイントにメディアクエリを使用するにはどうすればよいですか？
CSSを使用して一般的なデバイスブレークポイントにメディアクエリを使用するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> body { font-family: "Segoe UI", Tahoma,