コーディングの勉強を始めて、HTMLとCSSを使って少しずつWebページを作れるようになってきました。
PC版のデザインを見ながらコードを書き、
「なんとか形になった！」
と思ったところで待っていたのが、レスポンシブ対応です。
スマートフォンでもきれいに表示されるように調整する作業ですが、実際にやってみると、
「PC版が完成したから、あとは小さくすればいい」
というものではありませんでした。
画像が思った大きさにならなかったり、文字が中央に来なかったり、変なところで折り返されたり。
今回は、コーディング初心者の私が実際にレスポンシブ対応に挑戦して、つまずいたことや、何度か取り組む中で分かってきたことを振り返ります。
最初は「画面を小さくすればいい」と思っていた
レスポンシブ対応を学ぶ前は、
「PC版を作ったあと、スマホの画面幅に合わせてサイズを調整するのかな」
くらいに考えていました。
もちろん、画面幅に合わせて調整すること自体は間違っていません。
でも実際には、PCとスマートフォンでは使える横幅が大きく違います。
PCでは横に並べられていたものを縦に並べる。
文字サイズを調整する。
余白を変える。
画像のサイズや位置を調整する。
必要に応じて表示方法そのものを変える。
単純に全体を小さくするのではなく、限られた画面の中でどう見せるのかを改めて考える必要がありました。
PC版では問題なかったのに、スマホにすると崩れる
実際にレスポンシブ対応を始めると、PC版ではきれいに表示されていた部分が次々と崩れました。
特に苦戦したのが、
画像のサイズ、文字の位置、折り返しです。
「画像をもっと大きくしたいのに、なぜか大きくならない」
「中央に配置したつもりなのに、文字が真ん中に来ない」
「ここでは改行してほしくないのに折り返される」
など、見本と比べながら何度も調整しました。
一つ直したと思ったら別の部分がずれてしまうこともあります。
最初は、
「どこのCSSを直せばいいの？」
と迷うことばかりでした。
スマホ版だけを見るのではなく、親要素も確認する
コーディングを始めた頃は、何かを動かしたいとき、その要素自体のCSSばかり見ていました。
例えば文字を中央にしたいなら、その文字のクラスを探す。
画像の位置がおかしければ、画像のCSSを直す。
でも学習を進める中で、その要素だけではなく、親要素がどう指定されているかを見ることも大切だと分かってきました。
横並びになっているのはなぜなのか。
要素同士の間隔はどこで指定されているのか。
全体の配置を決めているのはどの要素なのか。
こうした構造を考えるようになると、
「ここを直接動かすのではなく、親側を直した方がいいのかも」
と考えられる場面が少しずつ増えてきました。
折り返しの調整が思った以上に難しかった
特に印象に残っているのが、文字の折り返しです。
PCでは十分な横幅があるため、一行できれいに表示されていた文章も、スマートフォンでは同じようには表示できません。
画面幅を狭くすると、
「そこで折り返すの！？」
というところで改行されることもありました。
単に文字サイズを小さくすれば解決するとは限りません。
周囲の余白や要素の幅なども関係します。
デザインの見本に近づけるために、
「どこに幅が設定されているんだろう」
「この余白が大きすぎるのかな」
と一つずつ確認しました。
コーディングでは、目の前で起きている問題と、実際の原因が別の場所にあることも多いのだと感じました。
レスポンシブ対応を繰り返して少し変わったこと
最初にレスポンシブ対応をしたときは、とにかく分からないことばかりでした。
でも別の課題でもう一度取り組んだとき、
「前よりはできるかもしれない」
と思える瞬間がありました。
もちろん、位置調整や折り返しなど、まだ詰まるところはあります。
それでも、
「スマホならここを縦並びにする」
「この画面幅になったら表示を変える」
「まず親要素を確認する」
など、見るポイントが少しずつ分かるようになりました。
一回で理解できなくても、別の課題でもう一度使うことで、
「あ、前にもこれやった」
とつながることがあります。
これはコーディングを続けていて面白いと感じるところです。
デザインを学んだ経験も少し役立った
レスポンシブ対応をしていて、デザインを学んできた経験も無関係ではないと感じました。
スマートフォンの画面で、
「この文字は大きすぎる」
「ここは余白が足りない」
「このまま横に並べると見づらい」
と判断するには、コードだけではなく見た目を確認する必要があります。
デザインを勉強していると、余白や文字の優先順位、画像の見せ方などについてフィードバックを受けることがあります。
それをコーディングでも、
「実装できたから終わり」ではなく、
「実際に見やすく表示されているか」
を確認する視点として使えそうです。
デザインとコーディングは別々の勉強だと思っていましたが、少しずつつながってきました。
PC版完成は「半分終わった」くらいなのかもしれない
最初はPC版が完成すると、
「できた！」
という感覚がありました。
でもレスポンシブ対応を経験してからは、
PC版ができたところから、もう一つの制作が始まる
くらいに考えるようになりました。
PCできれいに見えること。
スマートフォンでもきれいに見えること。
画面幅が変わっても大きく崩れないこと。
そこまで考えて初めて、Webページとして形になるのだと思います。
Webサイトを見る人が、必ずPCからアクセスするわけではありません。
自分が普段Webサイトを見るときも、スマートフォンを使うことはたくさんあります。
そう考えると、レスポンシブ対応は「余裕があったらやるもの」ではなく、Web制作では必要な工程なのだと実感しました。
「分からない」から「ここを見てみよう」に変わってきた
まだ、何も見ずにレスポンシブ対応を完璧にできるわけではありません。
調べることもありますし、思った通りにならず困ることもあります。
それでも最初と比べると、
「分からない！」
だけで止まることは少し減りました。
今は、
「親要素かな」
「幅の指定かな」
「スマホ用のCSSを確認してみよう」
と、原因になりそうなところを探せるようになってきています。
コーディング学習では、全部覚えることだけではなく、問題が起きたときにどこを確認すればいいのか分かることも成長なのかもしれません。
PC版を完成させて終わりではなく、その先のレスポンシブ対応まで。
これからも実際に作りながら、少しずつ慣れていきたいと思います。
関連記事
コーディング初心者がBEM・SCSSを学んでつまずいたこと｜実際に課題を作って分かったこと
LP制作で気づいた「作る前の設計」の大切さ｜初心者がつまずいたポイント
Photoshop経験者でもIllustratorで苦戦した話｜似ているようで全然違った
「できるようになってから挑戦する」をやめたいと思った話
コメント