ウェブページをスマホやタブレットにレスポンシブ対応させる【HTML/CSS】

※自分用の備忘録です。

HTMLで必須のコード

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

メディアクエリを使うには上記のコードをhead内に記述する必要があります。

CSSで必須のコード

メディアクエリ

@media screen and (max-width: 768px) { 
  
}

max-widthで設定した場合、画面幅が768ピクセル以下の時に{}内に記述したCSSが適用されます。

769ピクセルから大きい画面ように切り替わります。

@media screen and (min-width: 769px) { 

}

min-widthで設定した場合、画面幅が768ピクセル以上の時に{}内に記述したCSSが適用されます。

特定の範囲のブレークポイントの設定

@media screen and (min-width: 769px) and (max-width: 992px) {
  
}

769ピクセルから992ピクセルの横幅の時のみに適用されるCSSを設定ができます。

よく使われるブレークポイント

• 576px

• 768px 「ipadの縦持ち時の横幅」※使われることが多い

• 992px

• 1200px

• 1400px 「ipadの横持ち時の横幅」

レスポンシブでよく使うCSS

ボックスサイジング

CSS

*, *::before, *::after {
  box-sizing: border-box;
}

レスポンシブデザインには直接関係ありませんが、ボックスサイジングをcontent-boxからborder-boxに変更しておくと、レイアウトを組みやすい場合があります。

好みに応じて使い分けましょう。

フレックスボックスでレイアウトを変更

HTML

<div class="layouts">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS

.layouts {
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #333;
}

.box:not(:first-of-type) {
  background-color: #aaa;
}

@media screen and (max-width: 786px) { 
  .layouts {
    display: block;
  }
}

大きい画面の時だけ表示、小さい画面の時だけ表示

HTML

<p class="pc-view">大きい画面の時表示</p>
<p class="sp-view">小さい画面の時表示</p>

CSS

.pc-view {
  display: block;
}

.sp-view {
  display: none;
}


@media screen and (max-width: 786px) { 
  .layouts {
    display: block;
  }

  .pc-view {
    display: none;
  }

  .sp-view {
    display: block;
  }

}

文章やボックスだけでなく、画像の切り替えにも使えます。

<img src="img/img1.png" alt="" width="100%" class="pc-view"><img src="img/img2.png" alt="" width="100%" class="sp-view">