ブレイクポイントの設定
ブレイクポイントは、デバイスの画面サイズに応じてデザインやレイアウトを変更する際の閾値です。メディアクエリを用いて、ブレイクポイントで適切なスタイルを適用することができます。ブレイクポイントは、主要なデバイスの画面サイズを考慮して選択することが一般的です。
演習問題1: ブレイクポイントの設定
次のHTMLファイルにメディアクエリを追加し、画面幅が600px以下のデバイスでは背景色が青、それ以外では緑になるように設定してください。
<!DOCTYPE html> <html> <head> <title>ブレイクポイントの設定</title> </head> <body> <p>これはブレイクポイントを設定する演習です。</p> </body> </html>
演習問題1解説: ブレイクポイントの設定
以下のようにメディアクエリを追加することで、ブレイクポイントに応じて背景色を変更できます。
<style>
body {
background-color: green;
}
@media screen and (max-width: 600px) {
body {
background-color: blue;
}
}
</style>
ナビゲーションメニューのレスポンシブ化
ナビゲションメニューは、ウェブページで重要な要素の1つです。レスポンシブデザインにすることで、さまざまなデバイスで適切に表示されるようになります。一般的な方法は、画面幅が小さいデバイスではドロップダウンメニューにし、大きいデバイスでは水平方向に並べる方法です。
演習問題2: ナビゲーションメニューのレスポンシブ化
以下のHTMLファイルにメディアクエリを追加し、画面幅が800px以下のデバイスではナビゲーションメニューがドロップダウン形式になるように設定してください。
<!DOCTYPE html> <html> <head> <title>ナビゲーションメニューのレスポンシブ化</title> </head> <body> <nav> <ul> <li><a href="#home">ホーム</a></li> <li><a href="#about">アバウト</a></li> <li><a href="#contact">コンタクト</a></li> </ul> </nav> </body> </html>
演習問題2解説: ナビゲーションメニューのレスポンシブ化
以下のようにメディアクエリを追加し、画面幅が800px以下のデバイスでナビゲーションメニューがドロップダウン形式になるように設定できます。
<style>
nav ul {
display: flex;
list-style-type: none;
padding: 0;
}
nav ul li {
margin-right: 10px;
}
@media screen and (max-width: 800px) {
nav ul {
display: block;
}
nav ul li {
display : none;
}
nav ul li a {
display: block;
padding: 10px;
}
nav ul:hover li {
display: block;
}
}
</style>
画像のレスポンシブ対応
画像もレスポンシブデザインに対応させることが重要です。画像サイズが大きい場合、小さいデバイスでは表示が崩れることがあります。そのため、適切なサイズで表示されるようにすることが必要です。
演習問題3: 画像のレスポンシブ対応
以下のHTMLファイルにCSSを追加し、画像がデバイスの画面幅に応じて適切なサイズで表示されるように設定してください。
<!DOCTYPE html> <html> <head> <title>画像のレスポンシブ対応</title> </head> <body> <img src="example-image.jpg" alt="例の画像"> </body> </html>
演習問題3解説: 画像のレスポンシブ対応
以下のようにCSSを追加することで、画像がデバイスの画面幅に応じて適切なサイズで表示されるように設定できます。
<style>
img {
max-width: 100%;
height: auto;
}
</style>
これで、3章3ページ目の記事と演習問題が完了しました。レスポンシブデザインの基本的な考え方と実践方法を理解し、ブレイクポイントの設定やナビゲーションメニュー、画像のレスポンシブ対応を学ぶことができました。