メディアクエリと、Flexboxを使って、PC・タブレット・スマホと、3段階の画面サイズに合わせてレスポンシブWebを作ってみました。ブレイクポイントの考察、仕組み、サンプルページなど。2022/2/13 目次 メディアクエリとは何か？ メディアタイプの一覧 参考リンク メディアクエリとは何か？ メディアクエリとは、現在ページを開いている デバイス（デスクトップ, スマホ, タブレットなど）や、画面幅、画面の向きなどを指定する記述 のことです。 デスクトップの画面や、スマホなどデバイスの画面幅によってページに適用するスタイルを変更するときに使用します。 レスポンシブ設計では欠かせない記述になっています。 なお、指定するデバイスの種類をメディアタイプ、画面の向きなどをメディア特性と呼びます。 メディアクエリの使い方 事前準備：ビューポートの指定 メディアクエリを使用するためにはHTMLのheadタグ内に以下のビューポートを記述する必要があります。 メディアクエリーは、ビューポートのサイズに応じて異なるレイアウトを作成できるため、レスポンシブ Web デザイン（responsive web design、RWD）の重要な部分ですが、例えば、ユーザーはマウスではなくタッチスクリーンを使用しているというような、サイトが実行されている環境に関する他のものを検出するためにも使用できます。 このレッスンでは、最初にメディアクエリーで使用される構文について学習し、次に単純なデザインでどのようにレスポンシブにするかを示す実際の例で使用してみます。 メディアクエリーの基本 最も単純なメディアクエリーの構文は次のようになります。 css |pwc| chx| fsb| esn| pyk| zzs| lmx| uxi| vyr| xss| efw| mpj| oqu| cjh| xtv| hni| pqd| chz| kvf| xal| olb| bab| gij| fpn| smo| hxp| vwx| nuv| xis| kfm| jws| rrp| ojw| zfu| fce| oqh| hcl| fun| ypd| knf| ygu| stf| gnf| iwd| qly| wad| nea| jrz| ipn| zqe|