【駆け出しコーダー さとー 参上！】夏とレスポンシブ
こんにちは、さとーです。ファイブスターでお仕事をさせていただくようになり早10ヶ月、本当に早いです。
私は夏がめちゃくちゃ苦手なので、この時期の朝の通勤が本当に本当に本当に辛いのですが、お仕事は楽しいので毎日なんとか外に出られています。
そんなお仕事では、優しい先輩たちに色々と教えていただきながら、様々な企業やブランドサイトのコーディングをしています。クライアントによって色々な注文があったり特徴があったりと毎回全く同じことはないので、全てがとても勉強になります。
しかし
大体どのページ作成においても要望があるのは、フルレスポンシブです。
簡単に言うと、パソコンの大きな画面から見ても、スマートフォンの小さな画面から見ても、もしくはその中間のタブレットから見ても、きちんと画面サイズにあったデザインになっており、レイアウトが崩れず、文字や画像の大きさが不自然にならないようにすることです。
スマホと一口に言ってもすべての機種が同じ大きさの画面ではないですし、それはPCやタブレットも同じです。だからブラウザがどんな大きさになっても、崩れのないように作らなければなりません。
皆さんも毎日色々なページをPCやスマホで見ていると思うので、見る側としてはそんなことは当たり前だと思っているかと思いますが、これが意外と手間がかかります。
特に難しいなぁと思うことが多いのはメニューバーです。パソコンで見ると画面上部などに、スマホから見ると右上に３本線があったりするあれです。ハロー・ワールドのホームページにもありますよね。
ブラウザをどんなサイズにしてもメニューのレイアウトが崩れず、画面サイズが小さくなればそれに見合ったメニューバーに切り替わるのが理想です。
メニューバーの切り替えだけであれば、PC用とスマホ用でコードを分けるという手もありますが、テキスト修正や改修があるかもしれないことを考えると、コードはできる限りまとめた方がベターです。ひとつのコードでできるだけ簡潔に別のデザインを作り、どのデバイスから見ても綺麗に見えるようにし、別の人が見てもわかりやすいコードを書く。これがまだまだ課題だと思っています。
これを読んだみなさんも、色々なページを見て、特にパソコンでブラウザのサイズを伸縮させてみて、メニューバーが最後まで崩れないかどうか、コードはひとつになっているかどうか見てみてください。私は最近どのページを見てもそこばかり見ています(笑
お仕事や練習を通してこれ以外にもたくさんの課題が見つかりますが、少しでも早くそれを乗り越えられるよう、これからも経験を積んでいきたいと思います。
