【必見】メディアクエリを活用したHTML+CSSサンプルコードをご紹介
はじめに
本記事は、Webデザインにおける重要な要素の一つであるメディアクエリの活用について詳しく解説します。
メディアクエリは、デバイスの種類や画面のサイズによってWebページのスタイルを動的に変更するための強力なツールです。
HTMLとCSSを使ってウェブサイトをデザインする際、メディアクエリはそのサイトが異なるデバイスや画面サイズでどのように表示されるかを細かく制御するための重要な手段となります。
この記事は中級者向けとなっており、メディアクエリの基礎知識を既に理解している方を対象に、さらに深く、より具体的な応用例を学んでいただくことを目指しています。
レスポンシブデザインにおける活用法、複雑なメディアクエリの書き方、そして実際のプロジェクトでの応用例まで、幅広くカバーします。
私たちは、具体的なコードサンプルを通じて、理論だけでなく実際の応用も解説します。
これにより、読者の皆さんが自身のプロジェクトでメディアクエリをより効果的に活用する方法を理解し、自信を持って実装できるようになることを願っています。
それでは、まずはレスポンシブデザインにおけるメディアクエリの活用から見ていきましょう。
目次
レスポンシブデザインにおけるメディアクエリの活用
レスポンシブデザインとメディアクエリ
現代のウェブデザインにおいて、異なるデバイスサイズに対応したレスポンシブデザインはもはや欠かせない存在となっています。
モバイルファーストの考え方に基づいて、スマートフォン、タブレット、デスクトップといった異なるデバイスに対応したレイアウトを提供することが期待されます。
このレスポンシブデザインの実現には、メディアクエリが重要な役割を果たします。
メディアクエリは、デバイスの画面幅や高さ、解像度、向き（縦向きや横向き）など、デバイスやビューポートの特性に応じてCSSのスタイルを動的に変更するための強力なツールです。
ブレークポイントとメディアクエリ
レスポンシブデザインでは、「ブレークポイント」が重要な役割を果たします。
ブレークポイントとは、デザインやレイアウトが変わる特定のビューポート（デバイスの画面）の幅のことを指します。メディアクエリを使うと、ブレークポイントごとに異なるスタイルを適用できます。
以下にその具体的なサンプルを示します。
/* 基本のスタイル */
.container {
width: 100%;
padding: 15px;
}
/* タブレット向けのスタイル */
@media screen and (min-width: 768px) {
.container {
width: 720px;
padding: 20px;
}
}
/* デスクトップ向けのスタイル */
@media screen and (min-width: 1200px) {
.container {
width: 1140px;
padding: 25px;
}
}この例では、デバイスの幅が768px以上の場合、コンテナの幅を720pxに、パディングを20pxに変更します。そして、幅が1200px以上の場合は、コンテナの幅を1140pxに、パディングを25pxに変更します。
これにより、それぞれのデバイスサイズに合わせた適切なスタイルが適用されます。
メディアクエリの応用例
さらに、メディアクエリは画面の幅だけでなく、画面の高さやデバイスの向き（横向きまたは縦向き）、ユーザーが設定するカラースキーム（ダークモードやライトモード）などにも対応します。
以下のコードは、デバイスの向きに対応したスタイルを適用する例です。
/* 縦向きデバイス向けスタイル */
@media screen and (orientation: portrait) {
.container {
background-color: lightblue;
}
}
/* 横向きデバイス向けスタイル */
@media screen and (orientation: landscape) {
.container {
background-color: lightgreen;
}
}このコードでは、デバイスが縦向きの場合、コンテナの背景色をlightblueに設定します。
デバイスが横向きの場合は、背景色をlightgreenに設定します。
これにより、デバイスの向きに応じた視覚的な変化をユーザーに提供できます。
これらの例からもわかるように、メディアクエリは非常に柔軟で、様々な状況に対応したスタイリングを可能にします。その力をフルに活用すれば、どのデバイスからアクセスしてもユーザーに最適な体験を提供できます。
次の章では、さらに複雑なメディアクエリの書き方や実践的な例を通じて、その活用方法を解説します。
複雑なメディアクエリの書き方
ウェブデザインにおけるレスポンシブ性を提供するためには、しばしば複雑な状況に対応する必要があります。そういった状況では、複数のメディア特性を組み合わせたメディアクエリが強力なツールとなります。
しかし、それらの組み合わせ方や適用方法には、いくつか留意点があります。
メディア特性の組み合わせ
メディアクエリでは、一つのクエリ内に複数のメディア特性を含めることで、状況に応じた細かいスタイル変更を行うことができます。
それぞれのメディア特性は and 演算子で結合され、すべての条件が真である場合にのみスタイルが適用されます。以下にその例を示します。
/* ブラウザが画面であり、画面の幅が800px以上、または縦向きである場合のスタイル */
@media screen and (min-width: 800px), screen and (orientation: portrait) {
.container {
background-color: lightblue;
}
}このコードでは、メディアクエリが2つあります。
1つ目は screen and (min-width: 800px)、2つ目は screen and (orientation: portrait) です。
これらのメディアクエリは , 演算子（OR 演算子）で結合されています。
つまり、このスタイルは、デバイスがスクリーンで、画面幅が800px以上である場合、またはデバイスが縦向きの場合に適用されます。
複数のメディア特性の活用
では、具体的な例を用いて、複数のメディア特性を組み合わせたメディアクエリの活用を見てみましょう。
以下の例では、デバイスの向き、画面幅、色の設定（ライトモードまたはダークモード）に基づいたスタイリングを提供します。
/* ライトモードで縦向きのスマートフォン向けのスタイル */
@media screen and (max-width: 600px) and (orientation: portrait) and (prefers-color-scheme: light) {
.container {
background-color: lightblue;
color: black;
border: 1px solid black;
}
}
/* ダークモードで縦向きのスマートフォン向けのスタイル */
@media screen and (max-width: 600px) and (orientation: portrait) and (prefers-color-scheme: dark) {
.container {
background-color: darkblue;
color: white;
border: 1px solid white;
}
}このコードでは、画面の幅が600px以下で縦向きのスマートフォンを対象に、ユーザーの色の設定に基づいて異なるスタイルを適用します。
ライトモードを使用している場合、コンテナの背景色はlightblue、文字色はblack、ボーダーは1pxの黒となります。
一方、ダークモードを使用している場合、背景色はdarkblue、文字色はwhite、ボーダーは1pxの白となります。
これにより、ユーザーの環境や好み（ここでは画面の向きと色の設定）に合わせたスタイリングを提供することが可能となります。
複数のメディア特性を組み合わせることにより、よりユーザーにフィットしたデザインを提供することができ、UXの向上につながります。
メディアクエリを活用したプロジェクトの事例
メディアクエリは、異なるデバイスやビューポートのサイズに対応したフレキシブルなデザインを提供するために重要なツールです。
ここでは、その活用事例として企業サイトとポートフォリオサイトの2つのケースを取り上げます。
企業サイトでの実際の使用例紹介
企業サイトでは、デザインとユーザビリティがビジネスの成功に直結します。
また、訪問者は様々なデバイスを使ってアクセスするため、レスポンシブデザインは必須となります。
そのためにメディアクエリは活用されます。
以下に示すのは、企業サイトでのメディアクエリの実例です。
この例では、デバイスの幅によってヒーローセクションのパディングとフォントサイズを調整します。
/* PC向けのスタイル */
@media screen and (min-width: 1200px) {
.hero {
padding: 50px;
font-size: 2em;
}
}
/* タブレット向けのスタイル */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.hero {
padding: 30px;
font-size: 1.5em;
}
}
/* スマートフォン向けのスタイル */
@media screen and (max-width: 767px) {
.hero {
padding: 20px;
font-size: 1em;
}
}このコードにより、PC、タブレット、スマートフォンという異なる3つのデバイスタイプごとに最適化されたユーザーエクスペリエンスが提供されます。
より大きなディスプレイでは大きなパディングとフォントサイズを使用し、スマートフォンのような小さなディスプレイではそれらを小さくします。
ポートフォリオサイトでの実際の使用例紹介
個人のポートフォリオサイトでは、自分自身を最良の方法でプレゼンテーションするために、デバイスの幅に応じた適切なレイアウトとデザインが求められます。これにはメディアクエリが非常に有効です。
以下の例では、ポートフォリオのグリッドレイアウトをデバイスの幅に応じて調整します。特に、グリッドの列数はビューポートのサイズに応じて変化します。
/* デスクトップ向けのスタイル */
@media screen and (min-width: 1024px) {
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
/* タブレット向けのスタイル */
@media screen and (min-width: 768px) and (max-width: 1023px) {
.portfolio-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
/* モバイル向けのスタイル */
@media screen and (max-width: 767px) {
.portfolio-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
}デスクトップビューでは3列、タブレットビューでは2列、モバイルビューでは1列のグリッドレイアウトを提供します。
これにより、各デバイスに最適化された表示が可能となり、閲覧者の体験が向上します。
メディアクエリのベストプラクティス
メディアクエリは、様々なデバイスやビューポートサイズに対応するための強力なツールです。
しかし、その力を最大限に活用するためには、注意すべきポイントと効率的な設計・管理のテクニックを理解することが重要です。
メディアクエリを使用する際の注意点
モバイルファーストのアプローチ： デザインを始めるときは、最初にモバイルビューを考えることが一般的に推奨されます。その理由は、メディアクエリが主に最小幅(min-width)を基に設計されるため、スタイルを追加してビューポートを拡大する方が、スタイルを削除するよりも効率的だからです。
適切なブレークポイントの選択： 一般的なデバイスサイズ（スマートフォン、タブレット、デスクトップ等）に基づくブレークポイントを選択することは一般的ですが、そのサイトのコンテンツやデザインに最も適したブレークポイントを選択することが最も重要です。
冗長なメディアクエリの避ける： 重複や冗長性を避けるために、同じスタイルルールを含む複数のメディアクエリを避けることが重要です。
効率的なメディアクエリの設計と管理方法
CSSプリプロセッサの利用： CSSプリプロセッサ（SassやLessなど）は、変数やミックスインを使ってメディアクエリをより効率的に管理できます。例えば、Sassでは以下のようにミックスインを利用してメディアクエリを管理できます。
$breakpoints: (
'small': 767px,
'medium': 768px 1199px,
'large': 1200px
);
@mixin breakpoint($name) {
@if map-has-key($breakpoints, $name) {
$breakpoint: map-get($breakpoints, $name);
@if length($breakpoint) > 1 {
@media (min-width: nth($breakpoint, 1)) and (max-width: nth($breakpoint, 2)) {
@content;
}
} @else {
@media (min-width: $breakpoint) {
@content;
}
}
}
}
.hero {
padding: 20px;
font-size: 1em;
@include breakpoint('medium') {
padding: 30px;
font-size: 1.5em;
}
@include breakpoint('large') {
padding: 50px;
font-size: 2em;
}
}CSSカスタムプロパティ（--変数）の活用： CSSカスタムプロパティを使って、ブレークポイントや一部のスタイルルールを中央管理することができます。これにより、メディアクエリ内で再利用可能な値を簡単に定義・変更できます。
:root {
--breakpoint-tablet: 768px;
--breakpoint-desktop: 1200px;
}
@media (min-width: var(--breakpoint-tablet)) {
/* タブレット向けのスタイル */
}
@media (min-width: var(--breakpoint-desktop)) {
/* デスクトップ向けのスタイル */
}以上が、メディアクエリを効果的に使用するためのベストプラクティスです。
これらのテクニックを用いることで、より効率的かつ保守しやすいレスポンシブデザインを実現できます。
まとめ
この記事では、HTMLとCSSを使用したメディアクエリの基本から高度な技術まで、詳細な解説とサンプルコードを提供しました。また、実際のプロジェクトでのメディアクエリの活用例、そして効率的なメディアクエリの設計と管理のベストプラクティスについても触れました。
メディアクエリは、様々なデバイスやビューポートのサイズに対応したウェブデザインを作成するための不可欠なツールです。その使用方法を理解し、適切に適用することで、ユーザーフレンドリーでアクセシブルなウェブサイトやアプリケーションを作ることができます。
しかし、メディアクエリは単にレスポンシブなデザインを実装するツールではなく、より大きなユーザーエクスペリエンスの一部であるということを忘れないでください。それを適切に使用するためには、モバイルファーストのアプローチの採用、適切なブレークポイントの選択、冗長なメディアクエリの避けるといったベストプラクティスを頭に入れておくことが重要です。
メディアクエリは、フレキシブルなウェブデザインを実現するための重要な一部です。
それを理解し、適切に活用することで、私たちはすべてのユーザーに優れた体験を提供できます。
この記事が、あなたがメディアクエリを理解し、実際のプロジェクトで活用する上での一助となれば幸いです。