【プログラミング】HTML CSS レスポンシブデザインにするには【ソース付き】

スマートフォンの利用がどんどん増えているけど、ホームページなどの表示はどうしたらよいのだろう？

昨日の記事の続きです。
この記事はこんな疑問にお答えします。

本記事の内容
・レスポンシブデザインとは？
・コーディング方法
・実際ソース

■レスポンシブデザインとは？

「HTML CSS を学んでいるんだけど、最近スマートフォンの利用が増えているじゃない？」
「そうだね。最近はネットの利用もパソコンよりスマートフォンの方が多いよね」
「ホームページなどはパソコンで見ること前提かと思うけど、スマートフォンだと見づらくないかな」
「それなら今はレスポンシブデザインという方法あるから、それ対応にしとおかないといけないね」

僕もそうですが、今は誰もがスマートフォンを持っている時代です。

インターネットを見るのも、パソコンよりもスマートフォンで見ることのほうが多いのではないでしょうか。

その際、ホームページなどを見る場合、パソコンならば画面も大きいので、いろいろな情報を表示できますがスマートフォンで同じ画面を見たら、どうなってしまうでしょうか。

スマートフォンで見ることを想定していないホームページだと、画面のレイアウトが崩れたり、パソコンで見た画面がそのまま小さく表示されて、何が書いてあるのかわからなくなってしまいます。

そういった問題を解決する方法として「レスポンシブデザイン」というものがあります。

今ではホームページなどのサイトを作成する際には常識となっていますが、簡単に言うと、画面のサイズに合わせて自動的に最適な表示にして見せることができる方法、です。

つまり、パソコンで見る場合は横幅大きく、タブレットであればやや縮小し、スマートフォンの場合は画像なども縦に表示するなどして、見やすく表示してくれるものです。

■コーディング方法

では実際のコーディング方法を見ていきましょう。

HTML と CSS それぞれに指定することがあります。

まずは HTML です。

HTML


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

上記内容を、HTML の head 要素の中に記載します。

これによって、機器ごとの幅（実際のサイズ）で表示されるようになります。

次に CSS です。

CSS


@media(max-width:1024px){
  xxx
}

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

@media(max-width:1024px){

xxx

}

@media(max-width:768px){

xxx

}

これによって、パソコン表示の時の指定、タブレット表示の時の指定、スマートフォン表示の時の指定、ができるようになります。

■実際のソース

指定のしかたがわかったところで、実際のソースをみてみましょう。

まずはHTMLです。

HTML


<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>Progate</title>
      <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div class="container">
      <div class="item">
        <div class="item-box green"></div>
      </div>
      <div class="item">
        <div class="item-box yellow"></div>
      </div>
      <div class="item">
        <div class="item-box red"></div>
      </div>
      <div class="item">
        <div class="item-box blue"></div>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Progate</title>

</head>

<body>

</div>

</div>

</div>

</div>

</body>

</html>

次にCSSです。

CSS



.container {
  margin: 20px;
}

.item {
  width: 25%;
  float: left;
}

.item-box {
  height: 100px;
  margin-bottom: 20px;
}

.green {
  background-color: #11D8B3;
}

.yellow {
  background-color: #FFD466;
}

.red {
  background-color: #ED456D;
}

.blue {
  background-color: #3D7DD8;
}

/* タブレット向けレイアウト */
@media(max-width:1024px){
  .item{
    width:50%;
  }
}


/* スマートフォン向けレイアウト */
@media(max-width:768px){
  .item{
    width:100%;
  }
}