viewport、メディアクエリ、相対単位、モバイルファーストを使い、PC・スマートフォン両対応のページを完成・公開する10レッスンの無料コースです。
レッスン
10件
所要時間
約3時間
ランク
初級
学習環境
ブラウザ完結
PC・スマートフォン両対応のページを完成させて公開できる
viewport、メディアクエリ、相対単位、モバイルファーストを使い、PC・スマートフォン両対応のページを完成・公開する10レッスンの無料コースです。
viewportの役割を説明できる
メディアクエリを書ける
rem・%などの相対単位を使える
モバイルファーストでCSSを書ける
PCとスマートフォンの両方で表示確認できる
制作したページを公開できる
ブラウザ完結（インストール不要）
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
レッスンの最初に、図と短い言葉で学ぶ内容をつかみます。
レスポンシブWeb制作 - スマホでは横に入りきらない
ここまでのページは、横に広い画面を前提に組み立ててきました。写真は 160px、作品カードは3列、ナビは横一列。パソコンで見るとちょうどよく見えます。
スマホの画面幅は 400px 前後しかありません。中身が入りきらないと、ページは横に長くはみ出し、横にスクロールしないと読めない状態になります。
px は画面の点の数そのものです。画面が 320px しかなくても、160px のまま居座ります。
女性向けエンジニアスクール
.profile-photo {
width: 160px;
height: 160px;
}1 / 4
考えてみよう外しても進めます
選ぶと、この枚の中で答えと理由を確かめられます。
1 / 4
レスポンシブWeb制作 - 幅で書き分ける
画面幅のつまみを動かして、いまどの決まりが当たっているか見てください。
1 / 4
レスポンシブWeb制作 - 何に対する割合なのか
画面幅を動かして、4本の帯がそれぞれ何に連動しているか見てください。
1 / 4
動かしながら、仕組みや変化を目で確かめられます。
陽葵「ハレノヒ珈琲、開店を手伝ってくれる?」
1問目は無料で解けます。
教材を見ないで、依頼と完成条件だけを読んで書いてみてください。
HTML/CSS道場 ハレノヒ珈琲を開店させる10問
先にこちらを通しておくと、つまずきにくくなります
同時に進めると、理解が早くなる組み合わせです
