ファンタジーRPGの世界観に合わせたストーリーでレスポンシブデザインの問題を作ってみました。
ストーリー設定
あなたは、「魔法ギルドのデザイン師」として、「王国の掲示板サイト」を作成する依頼を受けました。
しかし、魔法王国の住民は、
さまざまなサイズの水晶端末（デバイス）を使っています。
大きな水晶球（PCサイズ）
小さな携帯水晶（スマホサイズ）
横長の魔導タブレット（タブレットサイズ）
王様からの指令は次の通り：
「どのサイズの水晶でも、掲示板が見やすいようにせよ！」
問題
以下のHTMLとCSSの雛形を完成させて、王国の掲示板がレスポンシブデザインで表示できるようにしてください。
HTML（完成済み）
<div class="notice-board">
<h1>王国の掲示板</h1>
<p>新しい魔法のレシピが発表されました！</p>
</div>
CSS（未完成）
.notice-board {
width: 80%;
margin: 0 auto;
background: #f5deb3;
padding: 20px;
font-size: 16px;
}
/* デバイスサイズに応じたフォントサイズ変更をここに記述 */
要件（必ず満たすこと）
1. デフォルト（PCサイズ）ではフォントサイズは 16px
2. タブレットサイズ（幅600px以下）ではフォントサイズを 14px に変更
3. スマホサイズ（幅400px以下）ではフォントサイズを 12px に変更
正解例
/* デフォルトは16pxなので変更不要 */
@media (max-width: 600px) {
.notice-board {
font-size: 14px;
}
}
@media (max-width: 400px) {
.notice-board {
font-size: 12px;
}
}
学習ポイント
@media を使って、画面サイズに応じたデザイン変更ができる！
条件は大きい順→小さい順で書くと読みやすい！
font-size 以外にも、レイアウト（flexやgridの切り替え）や背景画像の変更なども応用できる！
あとがき
レスポンシブデザインは、今時のWebサイトのおもてなしとも言える、必須のお作法になっています。
CSSに慣れていない人は、かなり複雑に感じるかもしれませんが、セレクターの挙動と、適用範囲をちゃんと理解すれば、
制御するイメージがついてくるでしょう。
あとはひたすら自分でコードを書いて、ページを作って、知見と経験を増やしていく事で、身につけていく事ができます。
こういうコーディング技術は、飛び級的な学習は無いので、一つずつわからない事をちゃんと理解していきながら進めていくといいでしょう。
0 件のコメント:
コメントを投稿