レスポンシブ対応でよく使う方法まとめ

2021年10月27日 2021年10月29日

こんにちは！CODE CLUB965のKです！

スマホが普及している昨今では、PC、タブレット、スマホとデバイスの表示サイズのパターンが増えており、レスポンシブ対応はほぼ必須と言っていい程になりました。

今回はレスポンシブ対応でよく使う方法について調べるのが面倒だと思うのでまとめておこうと思います。

今回は大きく分けて代表的な3つの方法について書きます。
・HTML：viewportの記述
・CSS：media queryの使用
・Bootstrapの使用

もちろんこれ以外にもありますが、レスポンシブ対応でまず使うであろう方法に絞って書いていきます。

viewportを記述する

これは、htmlの機能である viewport を使ってレスポンシブ対応する方法です。

下記の例のように、metaタグで記述するだけです。

<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
  <div>
    ・・・
  </div>
</body>
</html>

「width=device-width」の記述は、スクリーンサイズに合わせるという意味になります。
基本はこの記述をしておけばいいと思いますが、例えば、「width=width=965」とすると画面幅965px用の表示となります。

「initial-scale=1」は、初期表示の拡大率です。
基本は1でいいと思います。

他にも、ピンチ操作を不可能にする「user-scalable=no」などを設定することができます。
状況に応じてオプションを設定しましょう。

media queryの使用

これは、CSSで対応する方法です。
使う機会はかなり多いと思います。

よく使う方法として、下記の例のように画面幅によって適用するスタイルの内容を変える方法があります。

@media screen and (max-width: 767px) {
  /*　画面サイズ 767pxまで適用　*/
  .font-style { font-size: 14px; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  /*　画面サイズ 768pxから991pxまで適用　*/
  .font-style { font-size: 18px; }
}
@media screen and (min-width:992px) {
  /*　画面サイズ 992px以上から適用　*/
  .font-style { font-size: 24px; }
}

他にも上記の方法に比べたらあまり使いませんが、デバイスの画面幅の応じて読み込むCSSファイルを変更する方法もあります。

htmlファイルに以下のように記述することで実装可能です。

<link rel="stylesheet" href="sample1.css" media="screen and (max-width: 500px)">
<link rel="stylesheet" href="sample2.css" media="screen and (min-width: 501px)">

max-widthの方は、画面幅が500px以下のとき「sample1.css」を読み込み、
min-widthの方は、画面幅が501px以上のとき「sample2.css」が読み込まれます。