レスポンシブデザイン・きほんの「き」2018.02.282017年3月に日本大学芸術学部の文芸学科を卒業し、4月にバークレイグローバルコンサルティング&インターネット株式会社(略称BGC&I)に入社したかえでによる「かえでの新卒奮闘記」です。入社したのは2017年4月4日。あっという間に10ヶ月が過ぎました。最終面接のときに「大学でことばについて学んできたので、もし機会があれば文章を書きたい」とお話ししたのを社長が覚えていてくださり、こちらで【日芸2017新卒「かえでの新卒奮闘記」】を連載させていただくことになりました。今回は技術的なお話をしていきたいと思います!ここ数年で、webサイトをスマートフォンやタブレットなどのモバイルデバイス(以下、モバイル)で閲覧するのが主流になりました。それにあたり、モバイルでも見やすいサイトが求められるようになっています。使われているのは「レスポンシブデザイン」です。レスポンシブデザインとは、ウィンドウの幅に合わせてページの表示を変える方法です。CSS3のメディアクエリを使用します。共通のHTMLを使用するので、管理しやすいのが大きなメリット。Googleが推奨していることもあってSEO的にもよい対応だといえます。デメリットはデザインに制約が出てしまうことと、構築に技術・工数が必要なことです。比較的更新の多いサイトに合った方法だと言えるでしょう。BGC&Iのコーポレートサイトもこのタイプです。このページをPCで開いているなら、試しにウィンドウの幅を縮めてみてください。表示が変わっていることがわかると思います。この他に、PC用・モバイル用で別々のページを用意する方法もあります。こちらのメリットは各デバイスで最適なデザインを選択できること。更新時に二倍の手間がかかってしまうことです。「PC版は更新したけど、モバイル版を更新し忘れた!」......という事故が起こる可能性があります。更新の少ないサイトなら問題ないかもしれません。どちらにもメリット/デメリットがあるため、サイトの目的や運用方法に合わせてやりかたを選択することが大切です。主流の「レスポンシブデザイン」のコーディング方法についてもう少し具体的に掘り下げてみようと思います。HTMLの内に【viewport】を記述する「このページの横幅はデバイスの横幅に合わせる。いうコードを記述します。-モバイル用のCSSを記述する「ウィンドウの幅(=デバイスの幅)が767pxより小さいときはこのCSSを適用する」というコードを記述します。30px;}}これで、赤の条件を満たしたときに緑のコードが適用されます。{}が2つあることに注意してください。基本的なことですが、閉じ忘れを防ぐためにもきちんとインデントをつけましょう。■注意したいこと・カラムの配置PCとモバイルでは画面サイズも操作方法も違うので、ナビゲーションやコンテンツの見やすい配置もそれぞれ違ってきます。配置を組み替えることをはじめから意識してデザインを作成しなくてはなりません。・サイズ指定ボックスや画像をピクセルでサイズ指定すると崩れます。%など相対的な数値でサイズ指定しましょう。大きな画像を用意しないとぼやけた表示になってしまいます。50px×50pxの画像を表示させたいときは100px×100pxの画像を用意しないときれいに表示されません。自分の中での整理も兼ねて書かせていただきました。何事もまずは読む力=物事を分解して解釈する力がものを言いますね。その点は文芸もコーディングもデザインも同じなのかなと思います。