プログラミング入門30日 の Day 15
🎯 今日のゴール メディアクエリを使って、画面幅に応じてレイアウトを切り替えられる。
スマートフォン対応の第一歩は、head に viewport の指定を入れることです。
<meta name="viewport" content="width=device-width, initial-scale=1.0">次に「メディアクエリ」を使うと、画面幅の条件付きでスタイルを書けます。次の例は、ふだんは縦積み、幅640px以上のときだけ横並びになります。
.row {
display: flex;
flex-direction: column; /* ふだんは縦積み */
}
@media (min-width: 640px) {
.row {
flex-direction: row; /* 画面が広いときは横並び */
}
}ブラウザの幅を縮めたり広げたりして、レイアウトが切り替わることを確認しましょう。開発者ツールのスマホ表示モードも便利です。
@media (min-width: 640px) {
.row {
flex-direction: row;
}
}幅639px以下では縦積み、640px以上で横並びになれば成功です。開発者ツール(F12)のデバイスツールバー(スマホのアイコン)を使うと、画面幅を数値で指定しながら確認できます。
学籍番号と氏名を入力してクイズに正解すると、確認コード付きの提出用画面が表示されます。スクリーンショットを撮って Teams の提出欄にアップロードしてください。
Q. 「画面幅が640px以上のときだけスタイルを適用する」を実現する仕組みはどれでしょうか?
| 問題番号 | プログラミング入門30日 Day 15 |
|---|---|
| 学籍番号 | |
| 氏名 | |
| 提出時間 | |
| 確認コード |
提出時間はサーバー時刻に基づきます。
この画面のスクリーンショットを撮り、Teams の提出欄にアップロードしてください。