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

レスポンシブなコーディングの練習。レスポンシブサイトの考え方。

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

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

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

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

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

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

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

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

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

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

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

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

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

こういったパターンは実装するのは至って簡単です。要素を二つコーディングしておいて、メディアクエリで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;
 }
}

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

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

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

//親要素にflexレイアウトを適用し、折り返しを許可する
.Parent{
 display: flex;
 flex-wrap: wrap;
}


//flexアイテムの幅で横並びを制御する
//画面の横幅が「769px以上」の時に「2列」にする
@media screen and (min-width: 769px) {
 .Child{
  width: 50%;
 }
}

//画面の横幅が「768px以下」の時に「1列」にする
@media screen and (max-width: 768px) {
 .Child{
  width: 100%;
 }
}

拡大・縮小するパターン

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

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

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

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

//縦横比率を4:3に維持しながら拡大縮小する要素
.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;
 }
}

まとめ

今回は、レスポンシブなサイトを作る上でのコツをご紹介しました。コンポーネントの実装をパターンに当てはめてみることで、コーディングの時に迷う回数が少しでも減るといいなと思います。

この記事をかいてみての感想

https://eclair.company/media/wp-content/uploads/sites/2/2019/11/seta-1.jpg
Yuto Seta

駆け出しエンジニアがコーディング案件を受けるまでをサポートする755のトークルームを開設しました!
コーディングに関する質問やウェブエンジニアへの質問を受け付けていますので、興味がある方は以下のURLよりコメントしてみてください。
▼755のURL
https://7gogo.jp/vfcElE21A5bX

レスポンシブサイトに関する質問やブログ記事として解説して欲しいテーマなどあれば、ぜひコメントまってます!

▼感想
まだまだ、書き足りない部分もありますが、ちょっとずつ記事を整理していったりしながら、レスポンシブへの抵抗を減らせる記事になったら嬉しいです。記事を書いていると途中で何をいいかったのかわからなくなってだらだら書いてしまう時が多々ある。困ったものだ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です