4.1 基本概念
CSS変数とメディアクエリは、さまざまな画面サイズやデバイスに自動で調整するレスポンシブなWebデザインを作るための強力なツールだよ。 変数はスタイルを中央で管理できて、メディアクエリは画面の幅とか条件によってスタイルを変えられるんだ。
基本概念
- CSS変数: CSSコード全体で再利用可能な値を指定できるんだ。いろいろなコンテキスト、たとえばメディアクエリで変更可能だから、レスポンシブデザインに特に便利だよ。
- メディアクエリ: デバイスの特徴、たとえば画面の幅や高さに応じてCSSスタイルを適用できる。これで異なるデバイスに合わせた外観と動作を調整できるんだ。
メディアクエリ内での変数の使い方
CSS変数はメディアクエリの中で使って、条件に応じてスタイルの値を変えることができるよ。これでより柔軟で維持が簡単なレスポンシブデザインが作れるんだ。
メディアクエリ内での変数の例:
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
@media (max-width: 600px) {
:root {
--main-bg-color: #e0e0e0;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--main-bg-color: #d0d0d0;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--main-bg-color: #f0f0f0;
--font-size: 16px;
}
}
HTML
<body>
<p>This is a paragraph with a link to <a href="#">Example.com</a>.</p>
</body>
説明:
この例では、画面の幅に応じて変数の値が変わるんだよ:
- 600px以下の画面では、背景がより暗い色に変わってフォントサイズが小さくなるよ。
- 601pxから1200pxの画面では、背景が中間の色に変わってフォントサイズがちょっと大きくなるよ。
- 1200px以上の画面では、元の変数の値が適用されるよ。
4.2 メディアクエリでの変数の例
例1: レスポンシブなパディングとフォントサイズ
CSS
:root {
--padding: 20px;
--font-size: 16px;
}
.container {
padding: var(--padding);
font-size: var(--font-size);
}
@media (max-width: 600px) {
:root {
--padding: 10px;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--padding: 15px;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--padding: 20px;
--font-size: 16px;
}
}
HTML
<div class="container">
<p>This is a responsive container with adaptive padding and font size.</p>
</div>
説明:
- この例では、
.containerコンテナが画面の幅に応じてパディングとフォントサイズを変えるよ。
例2: 変数とメディアクエリを使ったサイトのテーマ化
CSS
:root {
--bg-color: #ffffff;
--text-color: #000000;
--link-color: #3498db;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--link-color);
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #000000;
--text-color: #ffffff;
--link-color: #9b59b6;
}
}
HTML
<body>
<p>This text and link will adapt to the user's preferred color scheme. Visit <a href="#">Example.com</a>.</p>
</body>
説明:
-
この例では、サイトがユーザーの好むカラースキームに応じて色合いを変える (
prefers-color-scheme: dark)。 背景、テキスト、リンクの色がライトテーマとダークテーマの間で自動的に切り替わるんだ。
4.3 レスポンシブグリッド
レスポンシブグリッドのための変数とメディアクエリの使用例:
CSS
:root {
--columns: 1fr;
--gap: 10px;
}
.grid-container {
display: grid;
grid-template-columns: var(--columns);
gap: var(--gap);
}
@media (min-width: 600px) {
:root {
--columns: 1fr 1fr;
}
}
@media (min-width: 900px) {
:root {
--columns: 1fr 1fr 1fr;
}
}
HTML
<div class="grid-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
説明:
- この例では、画面の幅に応じて列数が変わるレスポンシブグリッドを使ってるよ。 狭い画面（600px以下）では1列、中くらいの画面（600pxから900px）では2列、 広い画面（900px以上）では3列になるんだ。
GO TO FULL VERSION