【実践ガイド】CSSメディアクエリ：@media min-width & max-width を活用したレスポンシブデザイン
CSSにおける@media min-width & max-widthメディアクエリ：詳細ガイド
@media min-width & max-width は、メディアクエリと呼ばれるCSS機能の一部です。メディアクエリを使用すると、Webページのレイアウトやスタイルを、閲覧デバイスの画面サイズやその他の特性に応じて動的に変更できます。
本記事では、@media min-width & max-width の詳細な使用方法と、モバイル端末向けのデザインに役立つ実践的な例について説明します。
仕組み
@media min-width & max-width は、2つのメディアクエリを組み合わせたものです。
- min-width: 要素の最小幅を指定します。この値よりも小さいウィンドウ幅の場合、メディアクエリ内にあるCSSルールが適用されます。
構文
@media (min-width: 480px) and (max-width: 768px) {
/* このウィンドウ幅の場合のみ適用されるCSSルール */
}
上記の例では、ウィンドウ幅が480ピクセル以上768ピクセル以下の場合のみ、メディアクエリ内にあるCSSルールが適用されます。
例：モバイル端末向けのデザイン
例1：ナビゲーションメニューの調整
- デスクトップでは横並びのナビゲーションメニューを、モバイル端末では縦並びのドロップダウンメニューに変更できます。
@media (min-width: 768px) {
.nav {
flex-direction: column; /* ナビゲーション項目を縦並びに */
}
.nav-item {
display: block; /* 各ナビゲーション項目をブロック要素に */
margin-bottom: 10px; /* 各項目間に余白を追加 */
}
}
例2：画像のサイズ調整
- デスクトップでは高解像度の画像を表示し、モバイル端末では低解像度の画像に差し替えることができます。
@media (max-width: 768px) {
img {
max-width: 100%; /* 画像を親要素の幅に収まるように調整 */
height: auto; /* 高さを自動調整 */
}
}
例3：フォントサイズの変更
- デスクトップよりもモバイル端末でフォントサイズを大きく表示できます。
@media (min-width: 320px) and (max-width: 768px) {
body {
font-size: 16px; /* モバイル端末でのフォントサイズ */
}
}
補足
- 上記はほんの一例です。
@media min-width & max-widthを活用することで、様々なデバイス向けのデザインを構築できます。
@media min-width & max-width は、モバイル端末を含む様々なデバイス向けのレスポンシブなWebデザインを構築する際に役立つ強力なツールです。上記の例を参考に、ぜひ実践してみてください。
サンプルコード：メディアクエリを使用したレスポンシブデザイン
例1：カラムレイアウトの調整
この例では、3カラムレイアウトを、画面サイズに応じて2カラムまたは1カラムレイアウトに調整する方法を示します。
/* デフォルトスタイル（幅広い画面向け） */
.container {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 1 0 33.3%; /* 各カラムの幅を33.3%に設定 */
padding: 10px;
}
/* タブレット端末向け（768px以下） */
@media (max-width: 768px) {
.container {
flex-direction: column; /* カラムを縦並びに */
}
.column {
flex: 1 0 50%; /* 各カラムの幅を50%に設定 */
}
}
/* スマートフォン向け（480px以下） */
@media (max-width: 480px) {
.container {
flex-direction: column; /* カラムを縦並びに */
}
.column {
flex: 1 0 100%; /* 各カラムを100%幅に */
}
}
例2：画像の代替テキスト
この例では、画面サイズに応じて画像の代替テキストを切り替える方法を示します。
img {
alt: "画像の説明"; /* デフォルトの代替テキスト */
}
/* デスクトップ向け（768px以上） */
@media (min-width: 768px) {
img {
alt: "画像の詳細な説明"; /* 詳細な説明をデスクトップに表示 */
}
}
body {
font-size: 16px; /* デフォルトのフォントサイズ */
}
/* タブレット端末向け（768px以下） */
@media (max-width: 768px) {
body {
font-size: 14px; /* タブレット端末ではフォントサイズを小さく */
}
}
/* スマートフォン向け（480px以下） */
@media (max-width: 480px) {
body {
font-size: 12px; /* スマートフォンではさらに小さく */
}
}
これらのサンプルコードを活用して、様々な画面サイズでユーザーにとって快適なWebページを作成してください。
@media min-width & max-width 以外の方法
メディアクエリの種類
@media only screen and (min-width: 768px)：768ピクセル以上の画面サイズでのみCSSルールを適用します。@media (orientation: portrait)：縦向きの画面の場合のみCSSルールを適用します。
これらのメディアクエリを組み合わせて、より複雑な条件を設定することもできます。
FlexboxとGridレイアウトは、レスポンシブなレイアウトを構築するためのレイアウトモードです。これらのモードを使用すると、要素を柔軟に配置し、画面サイズに合わせて自動的に調整することができます。
レスポンシブな画像
srcset 属性とsizes 属性を使用すると、画面サイズに応じて適切なサイズの画像を自動的に読み込むことができます。
レスポンシブなタイポグラフィ
相対的な単位（emやremなど）を使用すると、フォントサイズを画面サイズに合わせて自動的に調整することができます。
viewport メタタグを使用すると、ブラウザにどのようにページをレンダリングするかを指示することができます。例えば、以下のメタタグは、モバイル端末でページの幅を画面幅に設定するように指示します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@media min-width & max-width は、レスポンシブなWebデザインを作成するための強力なツールですが、唯一の方法ではありません。上記の様々な方法を組み合わせて、様々なデバイスで良好なユーザー体験を提供するWebページを作成することができます。
適切な方法を選択するには、ターゲットとするデバイスと、達成したいデザインを考慮する必要があります。
css mobile media-queries
