CSSだけでレスポンシブ対応したサイトを作る考え方とルール[flexboxを理解しよう]

2020/06/20

web

レスポンシブ対応した WEB サイトを作りたい」
「CSS だけでレスポンシブ作りたいけれど、どう考えたら良いのか分からない。。。」

この記事はそんな方に向けて書いています。

どうもー。WEB 制作を 10 年ほど経験して CSS 大嫌いから大好きになったガッチ（@gatchsite）です。

レスポンシブ対応しているサイトが一般的になり、フロントエンドの実装をする方は必須のスキルになったのではないでしょうか。

実装サンプルも紹介しましたが、考え方も載せてありますので、ぜひ参考にしてもらえたらと思います。

考え方さえマスターできたら実装方法はさほど重要ではなくなりますよ＾＾

記事の内容はこちら

レスポンシブ対応したサイトとは

１つの HTML で、パソコンとスマホ、タブレットなどの表示に自動で対応することをレスポンシブ対応といいます。

一昔前は、CSS に十分な機能がなかったため HTML を分けて対応することが一般的でした。

しかしスマホが普及したことにより、WEB サイトへアクセスがパソコン以上となることでスマホでの情報の表示もパソコンと同等である必要性が出てきました。

2015 年には Google が「モバイルファースト」を優先するとの発表からよりスマホ向けの情報提供が重要視されることとなりました。

そこで注目されてきたモノが「レスポンシブデザイン」です。

レスポンシブ対応させる考え方

ざっくり考えると以下の流れで html、CSS を設計すると良いです。僕がサイトを作成するときに考えている流れです。

スマホページを考えて HTML をコーディングする。
CSS の flexbox をしようしてレイアウトを構成させる。
スマホページを完成させたら、その下にメディアクエリで PC 用の CSS を書いていく

モバイルファーストを意識しよう

スマホを使用する人が多くなった近年では、サイトにとってスマホで見やすいコトはとても重要な要素となっています。

まずはスマホで見やすいを意識して CSS を書くことが良いと思います。

サイトの速度も重要なので気になる方は、サイトスピードインデックスで計測してみるのもおすすめです。

ちなみにオフスクリーン画像の遅延読み込みの対応はこちらにありますので、参考に。

オフスクリーン画像の遅延読み込み対策でサイトを高速化する方法[lazysizes.js]

画面サイズの区切りを決めよう。

メディアクエリという単語が出てきたと思います。

メディアクエリの詳しい内容はこちらが参考になりましたので気になる方は読んでみてください。

簡単にまとめると、画面のサイズによって CSS を変えられるようにできる機能のことをメディアクエリを呼びます。

スマホ、タブレット、パソコンの画面サイズって異なりますよね？そこで、その情報で CSS を切り替えられたら画面サイズにあった表示ができますよね。それを実現してくれる機能です。

ただし、切り替えるサイズの指定は開発者が決める必要があります。

ここもまた悩みポイントだと思うんで、僕がよくしようしているサイズを紹介します。

用途	サイズ
スマホ	指定なし
タブレット	768px
パソコン	1024px

こんな感じでしようしています。

// スマホ
.class {
}
// タブレット以上
@media screen and (min-width: 768px) {
  .class {
  }
}

// PC以上 & ipad pro
@media screen and (min-width: 1024px) {
  .class {
  }
}

具体的な CSS の書き方サンプル

ここからは、具体的なサンプルを載せていきます。

CSS でレスポンシブ対応するためには flexbox は必須

レスポンシブ対応するには、メディアクエリ + flexbox が必須です。

flexbox とは

フレキシブルにレイアウトできるスタイルのことで、CSS3 から使えるようになった要素です。

書き方は、displa:flex;のように書いて定義します。

こうすると、指定した子要素が全てフレキシブル要素として指定することができるようになります。

CanIuse で調べてみると、全てのブラウザで対応してました。

https://caniuse.com/#search=CSS%20Flexible

CSS だけでレスポンシブ対応のレイアウトサンプル３つ

文字の改行を気にしないレスポンシブの CSS サンプル

よくある一覧の表示で使用するサンプルです。

文字数が長かったり短かったりした場合に改行されても綺麗に収まるスタイルです。

短い文章の時

長い文章で
改行があった場合でもOK

<div class="flex-area">
  <div class="flex">
    <div class="thumb"><img src="img01.jpg" /></div>
    <div class="title">短い文章の時</div>
  </div>
  <div class="flex">
    <div class="thumb"><img src="img01.jpg" /></div>
    <div class="title">長い文章で<br />改行があった場合でもOK</div>
  </div>
</div>
<style>
  .flex-area {
    padding: 10px 15px;
  }
  .flex {
    display: flex;
    align-items: center;
  }
  .thumb {
    width: 160px;
    padding-right: 8px;
  }
  .title {
    flex: 1;
  }
  @media screen and (min-width: 1024px) {
    .flex-area {
      padding: 10px 40px;
    }
  }
</style>

画像を含んだレスポンシブの CSS サンプル

先ほどのサンプルを少し変更して、スマホの場合は画像を大きくほゆ時するようにしたサンプルです。

HTML は全く変えていないので、分かりやすいかもしれないですね。

短い文章の時

長い文章で
改行があった場合でもOK

<div class="flex-area">
  <div class="flex">
    <div class="thumb"><img src="img01.jpg" /></div>
    <div class="title">短い文章の時</div>
  </div>
  <div class="flex">
    <div class="thumb"><img src="img01.jpg" /></div>
    <div class="title">長い文章で<br />改行があった場合でもOK</div>
  </div>
</div>
<style>
  .flex-area {
    padding: 10px 15px;
  }
  .flex {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .thumb {
    width: 100%;
    padding-bottom: 8px;
  }
  .title {
    width: 100%;
    flex: 1;
  }
  @media screen and (min-width: 1024px) {
    .flex-area {
      padding: 10px 40px;
    }
    .flex {
      flex-direction: row;
    }
    .thumb {
      width: 160px;
      padding-right: 8px;
      padding-bottom: 0;
    }
  }
</style>

サイト全体のレスポンシブ対応させる CSS サンプル

よく使うパターンとして、ヘッダー・フッター・メイン・サイドバーのレイアウトにも応用することができます。

ヘッダー

メイン

<div class="sample-body">
  <header class="sample-header">
    ヘッダー
  </header>
  <div class="sample-container">
    <main class="sample-main">
      メイン
    </main>
    <aside class="sample-side">
      サイドバー
    </aside>
  </div>
  <footer class="sample-footer">
    フッター
  </footer>
</div>
<style>
  .sample-body {
    display: flex;
    flex-direction: column;
    height: 300px;
    margin: 0 40px;
  }
  .sample-header {
    height: 60px;
    background-color: #00b2f1;
  }
  .sample-container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .sample-main {
    flex: 1;
    background-color: #fff;
  }
  .sample-side {
    width: 100%;
    background-color: #ccc;
  }
  .sample-footer {
    height: 24px;
    color: #fff;
    text-align: center;
    background-color: #000;
  }
  @media screen and (min-width: 1024px) {
    .sample-container {
      flex-direction: row;
    }
    .sample-main {
    }
    .sample-side {
      width: 200px;
    }
  }
</style>