レスポンシブについて【media query】

今回はレスポンシブの対応についてご紹介します。

webサイトを閲覧するとき、PC、タブレット、スマートフォンによってwebページのレイアウトが異なることにお気づきかと思います。
このレイアウトの違いは、同一のhtmlに対して画面サイズに応じたcssを適用しているためです。
webページを作るうえでは、このレスポンシブ対応が標準となっているので、レスポンシブページの書き方の例を紹介しようと思います。

今回使用するhtmlはこちら！

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>タイトル</title>
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <main>
      <div class="backgroundBox">
        <div class="flexBox">
          <div class="example1"></div>
          <div class="example2"></div>
        </div>
      </div>
    </main>
  </body>
</html>

上記のhtmlに対して768pxを境に、cssを切り替えるように記述したいと思います。

まずはスマートフォンの表示の場合のcssを書きます。
※スマホから作成し、スマホの記述をベースにPC用のcssを記述したほうが簡単

<768px以下のレイアウト用css>

.backgroundBox {
  background-color: whitesmoke;
  padding-top: 100px; }

.flexBox {
  height: 500px; }

.example1 {
  display: block;
  width: 200px;
  height: 200px;
  background-color: green;
  margin: 0 auto; }

.example2 {
  display: block;
  width: 200px;
  height: 200px;
  background-color: blue;
  margin: 0 auto; }

<ポイント>
・ block要素と定義したexample1とexample2を縦で中心に並べる
(スマートフォンはスクリーンの幅が狭いため、要素は縦に並べた方がレイアウトはすっきりする)

現時点でブラウザ確認すると緑と青の四角は縦に並んでいます。

次に、PCで、閲覧するときのcssを先ほどのcssに書き足していきます。

<PC表示用css>

.backgroundBox {
  background-color: whitesmoke;
  padding-top: 100px; }
  @media screen and (min-width: 768px) {
    .backgroundBox {
      padding-top: 300px; } }

.flexBox {
  height: 500px; }
  @media screen and (min-width: 768px) {
    .flexBox {
      display: flex;
      justify-content: center; } }

.example1 {
  display: block;
  width: 200px;
  height: 200px;
  background-color: green;
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    .example1 {
      margin: 0; } }

.example2 {
  display: block;
  width: 200px;
  height: 200px;
  background-color: blue;
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    .example2 {
      margin: 0; } }

<ポイント>
・ @media screen and (min-width: 768px){PC表示用のコードを書く}
(スマートフォンの時と違ってスクリーンの幅が広いため、要素を横に配置することが可能)

・example1とexample2の親要素である.flexBox要素にflexを適用し、横並びにしている。

メディアクエリでcssを書き足したため、ブラウザの幅を768px以上に広げると、緑と青の四角は横に並ぶはずです。

実際に自分が書いたindex.htmlをブラウザで開き、横幅を小さくしてみましょう。
example1とexample2が縦並び・横並びと変化すれば成功です。

これでPCとmobileに対応したwebサイトを作成できますね！

<補足>

・@media screen and (min-width:768px) {}について

min-widthだけではなくmax-widthもあります。数値も自由に決めることができます。

本日は以上～

javascript勉強中・・・