【コーディング解説】レスポンシブコーディングの苦手意識をなくすコツ

レスポンシブサイトをつくってはみたものの画面の幅を変えるとデザインが崩れてしまうという悩みをもつ人に向けて、メディアクエリでレスポンシブサイトをコーディングする上でのCSSのテクニックを紹介します。基本をきちんと理解するとシンプルに実装できるので、レスポンシブへの抵抗がなくなります。

レスポンシブサイトの概要

レスポンシブサイトをつくる目的

はじめに、レスポンシブウェブデザインの目的をおさらいしておきます。
レスポンシブサイトの目的は、「大きさの異なるデバイスでもウェブサイトが綺麗に閲覧できるようにすること」です。どんなデバイスでも綺麗にデザインを表示するには、コーディングのテクニックが欠かせません。

レスポンシブサイトの特徴とその作り方

レスポンシブサイトでは、１つのHTMLに複数のデバイス用CSSを割り当てることで、どんなデバイスでも綺麗に見えるウェブサイトを実現できるのが特徴です。デバイス用のCSSはメディアクエリーというCSSの機能を使うことで実現できます。

メディアクエリーについて

メディアクエリーは、「特定の画面幅の時にこのCSSを適用する」といったルールを記述してCSSを設定していく機能になります。横幅の変化に応じてメディアクエリを設定するのが一般的です。画面の横幅がパソコンサイズの時にはこのCSSを適用して、タブレットくらいのサイズならこのCSS、スマホならこれ、といった具合です。

パターンで捉えるレスポンシブなコンポーネントの実装方法

レスポンシブサイトをコーディングするときに、デザインを３つのパターンにわけて考えるとぐっとコーディングしやすくなります。この部分はどのパターンにあてはまるだろう？と考えてながらコーディングしてみましょう。パターンは以下の３つです。

別の要素を表示するパターン
レイアウトで折り返すパターン
要素を拡大縮小させるパターン

別の要素を表示するパターン

スマホ版とパソコン版の要素を２つ用意しておき、それぞれの時に要素の表示と非表示を切り替えていくパターンです。パソコン版のメニューはグローバルナビとして横並びで展開されているのに対して、スマホ版はハンバーガーメニューとしてデザインされている、といった具合です。

こういったパターンは実装するのは至って簡単です。要素を二つコーディングしておいて、メディアクエリでdisplay: none;によって表示と非表示を切り替えるだけです。以下のような実装になります。

//画面の横幅が「769px以上」の時に「表示」
@media screen and (min-width: 769px) {
　.PC{
　　display: block;
　}
}
//画面の横幅が「768px以下」の時に「非表示」
@media screen and (max-width: 768px) {
 .PC{
　 display: none;
 }
}
//画面の横幅が「769px以上」の時に「非表示」
@media screen and (min-width: 769px) {
 .SP{
　 display: none;
 }
}
//画面の横幅が「768px以下」の時に「表示」
@media screen and (max-width: 768px) {
 .SP{
　 display: block;
 }
}

レイアウトで折り返すパターン

画面幅が大きいときは横に並べておき、幅が小さい時は縦にならべるパターンです。記事一覧のカードが画面が小さくなるにつれ３列から２列、２列から１列になっていく、といった具合です。

このパターンは実装する方法には、floatを使う方法、display: inline-block;を使う方法、flexboxレイアウトを使う方法などいろいろありますが、ここでは僕が一番おすすめしていて使用頻度も高いflexの実装パターンを紹介しておきます。

//親要素にflexレイアウトを適用し、折り返しを許可する
.Parent{
　display: flex;
　flex-wrap: wrap;
}
//flexアイテムの幅で横並びを制御する
//画面の横幅が「769px以上」の時に「２列」にする
@media screen and (min-width: 769px) {
　.Child{
　　width: 50%;
　}
}
//画面の横幅が「768px以下」の時に「１列」にする
@media screen and (max-width: 768px) {
　.Child{
　　width: 100%;
　}
}

拡大・縮小するパターン

画面幅が大きい時と小さい時で要素の大きさを拡大縮小させるパターンです。テキストや余白の大きさを特定の幅以下の時に小さくしたり、横幅を画面の幅に応じて初めから可変に設定しておくなどがこれにあたります。

実装方法は、ここからさらに３つののパターンにわかれます。パターン別の実装方法も紹介します。

縦横比を維持しながら画面幅に応じて柔軟に拡大縮小するパターン
比率は維持せず横幅のみを可変にして縦幅はコンテンツ量に応じて自動的に変化するパターン
メディアクエリの数だけ固定の大きさに変化を持たせるパターン

縦横比を維持して拡大縮小するパターンの実装方法

//縦横比率を４：３に維持しながら拡大縮小する要素
.Element{
　width: 100%;
}
.Element::before{
  content: "";
  display: block;
  width: 100%;
  height: auto;
  padding-top: 75%; //4:3の比率
}

縦幅をコンテンツ量に応じて自動的に変化させるパターンの実装方法

.Child{
　　width: 100%;
　　height: auto; //初期値。縦幅を固定にしないのがポイントです。
}

メディアクエリの数だけ固定の大きさを持たせるパターンの実装方法

//画面の横幅が「769px以上」の時にfont-sizeを「32px」にする
@media screen and (min-width: 769px) {
　.Element{
　　font-size: 32px;
　}
}
//画面の横幅が「768px以下」の時にfont-sizeを「16px」にする
@media screen and (max-width: 768px) {
　.Element{
　　font-size: 16px;
　}
}