レスポンシブ対応のトップページ制作に挑戦しよう
この記事ではサンプルのトップページを作りながらレスポンシブ対応の基本的な流れを理解していきます。
スマートフォン、タブレット、パソコンなどさまざまな画面幅で見やすいページを作る考え方を実践ベースで学びます。
HTMLで骨組みを作り、CSSでレイアウトと色や余白を整え、メディアクエリで画面幅ごとの変更を行い、ハンバーガーメニューをJavaScript（jQuery）で動かす流れで仕上げていきます。
まずはページ全体の構造を決める
最初にHTMLで大まかな構造を作ります。
ヘッダー、メインビジュアル、サービス紹介、実績紹介、フッターのように大きなセクションを決めることで後からCSSを当てやすくなります。
装飾を先に考えるのではなく「ページ構造の順番」「伝えたい情報の優先順位」を意識することが大切です。
企業サイトでもLPでも、最初のHTMLの組み立て方がデザインのしやすさに影響します。
See the Pen レスポンシブ対応のページを作ってみよう by Syo Yanai (@h1-tech-japan) on CodePen.
CSSでレイアウトと余白を整えていく
すべての要素を中央に寄せたり横並びにしたり余白を付けたりする作業はCSSで行います。
Flexboxを使うとメニューの並び替えやカード配置などが直感的に記述できるためおすすめです。
またテキストサイズ、行間、ボタンのパディングなど細かい部分も調整していくと一気に完成度が高まります。
まずはスマートフォン向けのスタイルを作り、その上でタブレット、PC向けに変更を追加するモバイルファーストの流れが定番です。
メディアクエリで画面幅ごとにスタイルを切り替える
レスポンシブ対応の中心となるのがメディアクエリです。
たとえば幅768px以上で2列、1024px以上で3列のグリッドに切り替えるようにすれば、各端末で見やすい構成にできます。
崩れやすいのは画像の横幅と余白の計算なので、画像にはmax-width:100%;を指定してはみ出さないようにし、余白はgapをうまく使うと管理しやすくなります。
ハンバーガーメニューでナビを操作できるようにする
スマートフォンでメニューを常に表示し続けるのは画面を圧迫するため、クリックで開閉できるハンバーガーメニューが便利です。
jQueryでボタンクリック時にクラスを追加・削除するだけで開閉は実装できます。
CSS側ではopenクラスが付いたときにnavが表示されるようにスタイルを切り替えます。
少ないコードで動きを付けられるため初心者でも挑戦しやすいポイントです。
制作全体の流れをまとめる
レスポンシブ対応のページ制作は「HTMLで構造 → CSSでレイアウト → メディアクエリで切り替え → JavaScriptで動きを追加」という流れさえ理解できれば複雑にはなりません。
細かな装飾にこだわるよりまずは情報を整理し視認性を重視して、必要最低限のパーツで完成させることを意識すると迷いません。
今回のサンプルページをベースにして自分のポートフォリオや企業サイトの模写にも応用できます。