レスポンシブ化(レスポンシブデザイン)の流れとコツ

2019年末にプログラミングスクールTECH::EXPERTを受講し、

現在はフリーランスのWeb制作エンジニアをしているShibata Hirokiです。

Twitter

昨年、HTMLやCSSを学習していて、

「タブレットやスマホに対応するレスポンシブデザインに関して参考になる記事があまりない・・・。」

と感じていました。

この記事ではレスポンシブ化の流れとコツを、過去の自分に向けて書くつもりで、できる限りわかりやすく解説していきます。

具体例から入ります

本サイト(https://ki-hi-ro.com)をリニューアルしている時、PCから作業をはじめました。

スマホで確認してみると・・・

Google Chromeの開発者ツールを使用

はみ出ていました・・・。

「これをどう解消していくのか」を見ていきましょう!

原因

幅を指定していたから

width: 740px;

コンテンツのフィット感を出すために、幅を740pxに指定していました。

コンテンツのフィット感

デバイスの画面幅が740px以下になれば、当然はみ出します。

画面幅: 675px

画面幅740px以下でコンテンツがはみ出ないようにする方法

事前準備

<meta name="viewport" content="width=device-width, initial-scale=1">

<head>タグ内に上記の記述があることを確認してください。

ビューポートは色々指定できるみたいです。僕は普段、上記の記述を使用して問題なくレスポンシブ対応できています。

こちらの記事でも以下のように述べられています。

結局、viewportの指定はどのようにするのが1番いいのかというと、やはり「meta name=”viewport” content=”width=device-width,initial-scale=1″」に落ち着きます。

ブレイクポイント

僕は普段、5つのブレイクポイントを設定しています。

  • 〜 575px
  • 576px 〜 767px
  • 768px 〜 991px
  • 992px 〜 1199px
  • 1200px 〜

想定している画面幅は、

  • スマホ
  • スマホを横に傾けた時
  • タブレット
  • タブレットを横に傾けた時
  • パソコン

です。

Sass

CSSのメタ言語Sassで、「_breakpoint.scss」という名前の以下のファイルを使用しています。

@mixin small {
  @media (min-width: 576px) {
    @content;
  }
}

@mixin medium {
  @media (min-width: 768px) {
    @content;
  }
}

@mixin large {
  @media (min-width: 992px) {
    @content;
  }
}

@mixin extra-large {
  @media (min-width: 1200px) {
    @content;
  }
}

幅指定は、以下のように指定していました。

.author {
    width: 740px;
}

これだと画面幅が740px以下の時にも、.authorの幅が740pxとなってしまうので、以下のようにします。

.author {
    @include medium {
        width: 740px;
    }
}

コンパイル後のCSS

.author {
  @media (min-width: 768px) {
        width: 740px;
     }
}

すると・・・

画面幅に収まった

コンテンツがきれいに画面幅に収まりました!!