スマホ対応を頼む
人はスマホであなたの作品を見る
作ったものを誰かに見せるとき、相手はほぼ確実にスマホで開きます。パソコンの大きな画面できれいに並んでいた画面が、細長い画面では横にはみ出したり、文字が豆粒になったりします。せっかく仕上げたのに、最初の一目で「作りかけだな」と思われてしまうのはもったいないことです。
幅の広い画面でも狭い画面でも崩れないようにすることを、レスポンシブ対応と呼びます。難しそうな言葉ですが、AIに頼むぶんには覚えることは多くありません。頼み方と、直ったかどうかの確かめ方だけ押さえます。
スマホ対応で必ず入る2つの部品
表示倍率の宣言
スマホのブラウザは、何も書いていないページを「パソコン向けに作られたものだ」とみなして、画面を丸ごと縮小して表示します。その結果、文字が読めないほど小さくなります。これを止めるのが viewport という名前の1行の宣言です。viewport とは、画面のうち実際に見えている範囲のことです。この宣言を index.html に入れると、スマホは等倍で表示してくれるようになります。
幅で切り替える指定
もう1つが、メディアクエリと呼ばれる書き方です。メディアクエリとは、CSS という見た目を決める言葉の中で「画面の幅が何ピクセル以下のときだけ、この見た目にする」と条件を付ける書き方のことです。ピクセルとは画面上の細かい点の単位で、幅の目安として使われます。だいたい 600 ピクセル以下をスマホとみなす、といった線引きをします。
この2つが入っていれば、細かい調整は後からいくらでも足せます。
頼み方の型
プレーンテキスト
悪い例
スマホでも見られるようにしてください。プレーンテキスト
良い例
スマホでも崩れないようにしてください。次の2つを必ず入れてください。
1. index.html に viewport の指定を入れる
2. style.css に、画面の幅が 600px 以下のときの指定を追加して、
横に並んでいる部分を縦に積む「スマホでも見られるように」だけだと、AIは何を触ればよいか分からず、文字の大きさだけ変えて終わることがあります。入れてほしい部品を名指しすると、確実に入ります。
直ったかどうかの確かめ方
スマホ対応は、頼んだあとに必ず自分で確かめます。手元にスマホがあるなら実機で開くのがいちばん確実です。パソコンだけなら、ブラウザの窓の右端をつかんで、細長くなるまで狭めてみてください。文字が切れる、横にスクロールが出る、ボタンが画面からはみ出す、といった症状が出たら、その症状をそのまま言葉にしてAIに伝えます。
この回の演習
おこづかい帳の画面をスマホ対応にします。この演習の採点は決まった幅の画面で行われるため、「狭いときにどう見えるか」を直接は測れません。そこで、スマホ対応に必要な部品が実際に書き込まれたかどうかを見ます。viewport の宣言と、幅で切り替える指定の2つを入れてもらってください。
完成条件
- この回の採点は決まった幅の画面で走るので、狭い画面での見え方そのものは測れません
- 代わりに、スマホ対応に必要な指定が書き込まれたかどうかを見ます