HTML：レスポンシブ課題
公開日:2024年10月23日
更新日:2025年11月28日
課題
CSSの復習をしながらレスポンシブ対応する課題です。
制作時間：2時間
STEP01：課題フォルダを配置
学校サーバーから課題フォルダ「osarai_mobile」を「HTML講座」フォルダ内にダウンロードしてください。
ダウンロードした後に「osarai_mobile」を「h04_XX（出席番号）」に変更してください。
例）出席番号8番「h04_08」
※1桁番号の方は0埋めしてください
STEP02：完成サイトを見ながらコーディング
完成サイトのURL：https://jobtech.jp/osarai_mobile/
CSS
CSS最下部に以下のコードをコピーしてから解答してください。
@media screen {
/*
* 基本デザインの上書き
*/
body {
/* モバイル用文字サイズ */
font-size: 4vw;
/* モバイル時は最小幅指定をなくす */
min-width: 0;
}
}CSS内に問題文とヒントが記載されています。
注意点
- 完成サイトのCSSを検証ツールで確認しないでください。
- CSSのプロパティや値はChatGPT/GeminiやGoogle検索で調べながら対応しましょう。
Step03：学校サーバーにアップロード
制作フォルダを学校サーバの「h04」フォルダ内にアップロードしてください。
以上で課題終了です。
同じカテゴリーのコンテンツ
