アジェンダ

レスポンシブデザインの考え方
実践

レスポンシブデザインの考え方

レスポンシブデザインは、一つのHTMLファイルを、様々な表示形態に合わせることが出来るデザイン。
画面のサイズを取得し、最適なCSSを反映する。

実践

メディアクエリを使用して、index.html、style.cssを作成した。

index.html

<!DOCTYPE html>

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <title>レスポンシブなサイト</title>
  </head>
  <body>
    <div class="main_content">
      <h1 class="contact">お問い合わせ</h1>
      <div class="message">
        <p>御用の方は、こちらよりご連絡ください。</p>
      </div>
      <div class="address">
        <p class="sub_headding">連絡先</p>
        <ul class="contact_info">
          <li>xxx@hogehoge.mail.com</li>
          <li>03-0000-0000</li>
          <li>@hogehoge_taro</li>
        </ul>
      </div>
      <div class="footer">
        <p>2020-07-15</p>
      </div>
    </div>
  </body>
</html>

style.css

body {
  background-color: lightcyan;
}

.main_content {
  background-color: white;
  height: 80%;
  margin: 1em auto;
  padding: 1em 2em;
  width: 80%;
}

.contact {
  text-align: center;
  width: 100%;
}

.message {
  float: left;
  width: 60%;
}

.address {
  float: right;
  width: 40%;
}

/* 画面が小さい場合、縦に表示する. */
@media screen and (max-width: 680px) {
  .message, .address {
    float: none;
    width: 100%;
  }
}

.sub_headding {
  font-weight: bold;
  margin: 0em;
  padding: 0em 0em 0em 2em;
}

.contact_info {
  margin: 0.5em 0em 1em 0em;
}

.footer {
  border-top: solid 2px lightgray;
  clear: both;
  color: gray;
  text-align: center;
  width: 100%;
}

これをWebブラウザに表示させるとこんな感じ。
まずは、一般的なモニタサイズに合わせて大きく表示した場合。

メッセージと連絡先が横に並んでいる。

次に、ブラウザの横幅を狭くした場合。

メッセージと連絡先が縦に並んでいる。

このように、画面サイズが変化しても表示が崩れないように、表示形態を整えることが出来る。

ちなみに、メディアクエリを使用しなかった場合、以下のようになってしまう。

狭い幅で開業されて見づらい上に、メールアドレスが見切れてしまっている。

おわりに

今回は、レスポンシブデザインの実践の回だった。
設定方法はわかったので、あとはどの時にどのように表示するかを設計するだけである。

今回でレスポンシブWebデザインの講座はおしまい。

参考

4-1 レスポンシブデザインの考え方（レスポンシブウェブデザイン）
4-2 切り替えポイントを作る（レスポンシブウェブデザイン）
4-3 段落を切り替える（レスポンシブウェブデザイン）
4-4 更に見た目を整える（レスポンシブウェブデザイン）