【CSS】簡単にwebサイトをレスポンシブ対応にする方法

メディアクエリは画面幅がある大きさになったら、書かれているCSSを適用させるプロパティです。下の記述では、1000pxより小さくなったら、h1が赤になります。

@media (max-width:1000px) {
  h1{
    color:red;
  }

viewポイントは、そのデバイスで表示されている画面のことです。widthなどを指定することができます。詳しい値については、こちらのページ（tree viewportを理解して正しいレスポンシブデザインを設定しよう)を参照してください。

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

ＰＣでは横並びでも、スマホでは縦並びというレイアウトが多くあります。これもメディアクエリで解決できます。普段はboxが50%で指定し要素を２つ横並びにしていも、画面がタブレットサイズ(670px以下）になれば、100%にし、縦並びにできます。

@media(max-width:670px){
  .box{
    width:100%;
  }
}

padding:10pxで余白を調整すると、width:50%としていても、実際はwidth50%+padding10px分の横幅となってしまいます。これを防ぐには、box-sizing: border-box;を記述してやります。

box-sizing: border-box;は直感的にコーディングが可能となるため、全要素にかかるように*｛｝の中に記述してやります。

*{
  box-sizing: border-box;
}

floatでdiv要素を並べていると、divを含む親要素からはみ出すことがあります。これは、floatは浮かんでいる状態であり、親要素からは無いものとしてとらえられるためです。

これを防ぐために、clearを使用します。clearはfloatで指定された値を削除することができます。例えば、div要素がfloat:left;で指定されていた場合、一番最後に空のdiv要素を準備して次のように指定します。

<div class="container">
 <div class="item">aaa</div>
 <div class="item">aaa</div>
 <div class="clear"></div>
</div>

.container{
 background-color:yellow;
}

.item{
 width:150px;
 height: 150px;
 float:left;
 border:solid red;
}
.clear{
  clear:left;
}

clear:left;を含むdivタグがなければ、containerの高さは0になり、下のように表示されなくなります。

ただwidth:100%だけを指定していれば、2000pxの画面で見た時にサイト全体がのびのびとなってしまいます。そのため、ある要素の最大幅を指定する必要があります。最大幅はmax-widthで指定できます。

container{
  max-width:1170px;
  width: 100%;
}