女性向けエンジニアスクール
レスポンシブWeb制作の導入スライド
レスポンシブWeb制作 - スマホでは横に入りきらない
固定 px はどの画面でも同じ幅のまま
ここまでのページは、横に広い画面を前提に組み立ててきました。写真は 160px、作品カードは3列、ナビは横一列。パソコンで見るとちょうどよく見えます。
スマホの画面幅は 400px 前後しかありません。中身が入りきらないと、ページは横に長くはみ出し、横にスクロールしないと読めない状態になります。
px は画面の点の数そのものです。画面が 320px しかなくても、160px のまま居座ります。
.profile-photo {
width: 160px;
height: 160px;
}1 / 4
レスポンシブWeb制作 - スマホでは横に入りきらない
画面幅を変えて比べる
画面幅のつまみを 320 まで縮めて、どの帯が枠からはみ出すか見てください。
- px で書いた帯だけは、画面が狭くなっても長さが変わらない
- % と vw の帯は、幅に合わせていっしょに縮む
- 320px のとき、枠をはみ出すのは px の帯だけ
2 / 4
考えてみよう外しても進めます
画面幅 320px のスマホで、幅を 400px に固定した箱を置きました。どうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
レスポンシブWeb制作 - スマホでは横に入りきらない
はみ出しを止める1行
上限だけを決めて、あとは画面に合わせて縮むようにします。メディアクエリはまだ使いません。まずは固定値をゆるめるところからです。
入力欄の文字を 16px にしておくのも同じ回の仕事です。iPhone の Safari は、16px より小さい入力欄に触れると画面を勝手に拡大します。
max-width の 100% は、親要素より大きくならないという指定です。height の auto を添えると、縦横の比を保ったまま縮みます。
.profile-photo {
max-width: 100%;
height: auto;
}4 / 4
考えてみよう外しても進めます
viewport の meta タグを書いていないページを開いたとき、スマホのブラウザは自分を何 px 幅の画面として扱いますか。
選ぶと、この枚の中で答えと理由を確かめられます。
1 / 4
レスポンシブWeb制作 - スマホは勝手に縮めて表示する
meta の有無で縮尺が変わる
meta の有無を切り替えて、同じ 16px の文字が実質何 px で見えているか比べてください。
- meta が無いと、多くのスマホは 980px 相当の幅で描いてから枠に縮める
- 文字が小さいのは font-size のせいではない
- meta を書くと、仮想の幅が端末の実際の幅と同じになる
2 / 4
書く1行と各語の意味
head の中、meta charset のすぐ下にこの1行を書き足します。今回はこの章で唯一の HTML の変更です。
width=device-width端末の実際の幅で描くinitial-scale=1.0開いた瞬間の倍率を等倍に980px のふりがなくなるので、375px の端末では 375px として扱われます。開いた瞬間にズームされた状態になることもなくなります。
3 / 4
ここでつまずく
この1行が抜けていると、あとから足したレスポンシブの指定がまとめて効かなくなります。
はみ出しは直したのに文字が小さい
viewport の meta タグが無い
開いた瞬間からズームされている
initial-scale を書いていない
メディアクエリが効かない
980px 幅として扱われ、常に広い画面あつかいになる
パソコンでは何も変わらない
この1行が効くのはスマホやタブレットの側
レスポンシブ対応の出発点になる、いちばん大事な1行です。次のレッスンのメディアクエリは、この行があってはじめて意味を持ちます。
4 / 4
レスポンシブWeb制作 - 幅で書き分ける
境目で当たる決まりが入れかわる
画面幅のつまみを動かして、いまどの決まりが当たっているか見てください。
- min-width で書いた決まりは、条件を満たすかぎり積み上がって残る
- 境目をまたいだ瞬間に、光る行と灰色の行が入れかわる
- 当たっていない決まりは、書いていないのと同じあつかいになる
1 / 4
メディアクエリの書き方の型
@media のうしろの丸かっこが条件です。中の指定は条件に合うときだけ効き、合わないときは書いていないのと同じになります。この切り替えの境目をブレークポイントと呼びます。
min-width: 600px画面幅が 600px 以上のとき.work-list中はふつうの CSS と同じ作品ギャラリーはふだんを1列にして、3列は 600px 以上のときだけ足します。1列のときは2マス結合も意味がないので、first-child の指定はいったん外します。
2 / 4
考えてみよう外しても進めます
min-width の 600px と min-width の 900px を両方書いたファイルを、1000px の画面で開きました。どちらの中身が効きますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
レスポンシブWeb制作 - 幅で書き分ける
よく使う分かれ目の幅
境目の数字に決まりはありません。よく使われる値を出発点にして、自分のページで読みにくくなる幅を探します。
端末名は目安でしかありません。決めるのは中身が読みにくくなる幅であって、機種の一覧ではありません。
| 幅 | おおよその想定 |
|---|---|
| 600px 未満 | スマホ。1列にたたむ |
| 600px 以上 | タブレット。2列から3列にする |
| 900px 以上 | ノートパソコン。余白を広げる |
| 1200px 以上 | 大きな画面。最大幅で止める |
4 / 4
レスポンシブWeb制作 - 何に対する割合なのか
4本の帯は別々に動く
画面幅を動かして、4本の帯がそれぞれ何に連動しているか見てください。
- % は親の幅、vw は画面の幅に連動する
- rem は文字の基準に対する倍率で、画面幅では動かない
- px はどれにも連動せず、せまい画面ではみ出す
1 / 4
レスポンシブWeb制作 - 何に対する割合なのか
3つの単位の基準の違い
相対単位は、何かを基準にした割合で長さを決める単位です。同じ相対でも、基準にしているものがそれぞれ違います。
文字と余白は rem で書くのが基本です。利用者がブラウザの文字サイズ設定を大きくすると、rem で書いた文字も余白もいっしょに大きくなります。
| 単位 | 何に対する割合か |
|---|---|
| rem | ページの基準になる文字サイズ。既定では 1rem が 16px |
| % | 親要素の幅 |
| vw | 画面の幅。100vw が画面いっぱい |
| px | 画面の点の数そのもの。何にも連動しない |
2 / 4
考えてみよう外しても進めます
文字サイズを 20px にした要素の中で、余白を 1.5rem と書きました。この 1.5rem は何を基準にした長さですか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
レスポンシブWeb制作 - 何に対する割合なのか
どこに何を使うか
今回はプロフィール写真を width の 40vw と max-width の 10rem にします。画面幅に合わせて縮みながら、大きくなりすぎることもない形です。
枠を作る幅は width の 100% と max-width の 45rem を組み合わせます。せまい画面では画面いっぱい、広い画面では 45rem で止まります。
| やりたいこと | 書き方 |
|---|---|
| 文字サイズと余白 | rem。利用者の設定に合わせて伸びる |
| 画面いっぱいに広げたい | width の 100% |
| 広い画面で広がりすぎを止めたい | max-width を rem で。45rem あたりが読みやすい |
| 画面幅に連れて縮めたい写真 | width を vw、max-width を rem で頭打ちにする |
4 / 4
まず狭い画面ぶんを書いて広い側を足す
土台にはスマホの見た目だけを書き、広い画面で足したいものだけをメディアクエリの中に入れます。この書き方をモバイルファーストと呼びます。
column土台はスマホの見た目row広い画面のときだけ上書き逆の順番だと、スマホ用に打ち消す指定がどんどん増えます。打ち消しではなく上書きにすると、どちらの見た目も読む場所が1か所ずつに決まります。
1 / 4
レスポンシブWeb制作 - 狭いほうを土台にする
min-width が積み上がる
画面幅を広げて、土台の決まりの上に何が積み上がっていくか見てください。
- 土台の決まりは、どの幅でも当たり続ける
- min-width の中身は、条件を満たしたぶんだけ上へ重なる
- 広い画面ほど、当たっている行の数が増える
2 / 4
考えてみよう外しても進めます
min-width ではなく max-width でメディアクエリを書くと、土台に残るのはどちらの見た目になりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
書き換えの手順
いまの CSS を一気に書き直そうとすると、どこまで直したか分からなくなります。1か所ずつ、次の4段で移していきます。
見つける
土台の指定のうち、広い画面でしか使わないものを見つける
移す
それをファイル末尾の min-width の中へ移す
書き直す
土台にはスマホ向けの値を書く
確かめる
幅を動かして、両方の見た目を目で確かめる
ナビとプロフィールとフッターのリンクは土台で flex-direction の column、送信ボタンは土台で width の 100%。広い画面のぶんはメディアクエリで戻します。
4 / 4
レスポンシブWeb制作 - 公開すると誰の手元でも同じものが出る
手元のファイルとサーバのファイル
公開とは、いま手元にある index.html と style.css を、誰でも取りに来られる場所に置くことです。GitHub Pages や Netlify のような場所に上げると URL がひとつもらえて、それを渡すだけで見てもらえます。特別な書き直しは要りません。
パスを相対で書いておけば、置き場所が変わってもリンクと画像はそのままつながります。
| 置き場所 | 誰が見られるか |
|---|---|
| 自分のパソコンの中 | 自分だけ。file から始まるパスで開いている |
| サーバに上げたあと | URL を知っている人みんな |
| 上げるファイル | index.html と style.css、それに使っている画像 |
| 手元で直したとき | 上げ直すまで、相手に見えるのは前の内容のまま |
1 / 4
レスポンシブWeb制作 - 公開すると誰の手元でも同じものが出る
書き換わるのは画面だけ
1手ずつ進めて、上の画面と下のファイルのどちらが変わるか見てください。
- JavaScript が触るのは、読み込まれたあとの画面の側
- HTML ファイルは1文字も変わらず、読み込み直すと元に戻る
2 / 4
考えてみよう外しても進めます
ボタンで画面の文字を書き換えたあと、ページを読み込み直すとどうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
レスポンシブWeb制作 - 公開すると誰の手元でも同じものが出る
次に学ぶこと
いまのページは、どこを押しても表示が変わりません。メニューを押したら開く、送信したらお礼が出る、写真を押したら大きくなる。この動きを書くのが JavaScript です。
骨組みから配色、レイアウト、スマホ対応まで、ぜんぶ自分の手で書きました。つぎのコース JavaScript入門で、このサイトに動きを足していきます。
HTML が骨、CSS が見た目、JavaScript が動き。3つめを覚えると、作れるものが一気に増えます。
const msg = document.getElementById("msg")
msg.textContent = "ようこそ"4 / 4