↑上へ
ホーム
特集・講座編
HTMLとCSSの基本と概要講座
3章: HTML応用

レスポンシブデザイン入門

レスポンシブデザイン入門

このページでは、レスポンシブデザインについて学んでいきます。レスポンシブデザインは、ウェブページが様々なデバイス（スマートフォン、タブレット、デスクトップなど）で適切な表示がされるように設計する方法です。

メディアクエリとは

メディアクエリは、CSSの機能で、特定の条件（例：デバイスの画面幅）が満たされた場合に適用されるスタイルを指定できます。これを使うことで、ウェブページのデザインをデバイスごとに柔軟に変更することができます。

演習問題1: メディアクエリの基本

次のHTMLファイルに、メディアクエリを追加して、画面幅が600px以下のデバイスでは、背景色が青になるようにしてください。

<!DOCTYPE html>
<html>
<head>
<title>メディアクエリの基本</title>
</head>
<body>
<h1>Hello, Responsive Design!</h1>
<p>This is a sample paragraph.</p>
</body>
</html>

フレキシブルグリッドレイアウト

レスポンシブデザインでは、フレキシブルグリッドレイアウトを使用して、コンテンツを配置します。これにより、画面幅が変更されても、自動的にレイアウトが調整されます。

演習問題2: フレキシブルグリッドレイアウトの作成

次のHTMLファイルに、CSSを追加してフレキシブルグリッドレイアウトを作成してください。3つのコンテンツボックスが横並びになり、画面幅が狭くなると縦並びになるように設定してください。

<!DOCTYPE html>
<html>
<head>
<title>フレキシブルグリッドレイアウト</title>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>

演習問題1解説: メディアクエリの基本

以下のようにCSSを追加することで、画面幅が600px以下のデバイスで背景色が青になります。

<style>
@media (max-width: 600px) {
body {
background-color: blue;
}
}
</style>

演習問題2解説: フレキシブルグリッドレイアウトの作成

以下のようにCSSを追加することで、フレキシブルグリッドレイアウトが実現できます。

<style>
.container {
display: flex;
flex-wrap: wrap;
}

.box {
flex: 1;
padding: 10px;
border: 1px solid black;
box-sizing: border-box;
}

@media (max-width: 600px) {
.box {
flex: 100%;
}
}
</style>

これで、画面幅が狭くなると3つのコンテンツボックスが縦並びになります。

レスポンシブ画像

レスポンシブデザインでは、画像もデバイスに適した大きさに調整することが重要です。これには、CSSのmax-widthプロパティや、srcset属性を使うことがあります。

演習問題3: レスポンシブ画像の作成

次のHTMLファイルに、CSSを追加して画像が画面幅に応じてリサイズされるようにしてください。

<!DOCTYPE html>
<html>
<head>
<title>レスポンシブ画像の作成</title>
</head>
<body>
<img src="sample-image.jpg" alt="Sample Image">
</body>
</html>

演習問題3解説: レスポンシブ画像の作成

以下のようにCSSを追加することで、画像が画面幅に応じてリサイズされます。

<style>
img {
max-width: 100%;
height: auto;
}
</style>

これで、画像がデバイスの画面幅に適した大きさに調整されるようになりました。

まとめ

この記事では、レスポンシブデザインについて学びました。メディアクエリを使ってデバイスごとのスタイルを適用し、フレキシブルグリッドレイアウトで柔軟なコンテンツ配置を実現し、レスポンシブ画像で画像のサイズを調整する方法を学びました。これらの技術を使って、さまざまなデバイスで適切に表示されるウェブページを作成できるようになります。

↑ 3章: HTML応用