スイーツショップサイトを作ろう！　デイトラWeb制作初級編5~10　ゼロからサイトを作ってみよう！その③「レスポンシブ対応編」

※①「事前準備編」はこちら。②「メインコンテンツ編」はこちら。

レスポンシブ対応しよう！

②「メインコンテンツ編」ではスマートフォンサイトのコーディングを完了させました。
ですが、このままではタブレットやパソコンでサイトにアクセスした際、画面の表示が合わなくなってしまいます。

そこで、タブレットやパソコンで見た時に表示されるサイトを作成します。これをレスポンシブ対応と言います。

レスポンシブWebデザイン(Responsive Web Design, RWD)は、パソコン、タブレット、スマホなど、どんな大きさのデバイスでも見やすいWebサイトにするためのものです。

ブレイクポイントを設定しよう

ブレイクポイントとは、ウェブサイトが異なる画面サイズ（スマートフォン、タブレット、デスクトップなど）に適応するために、デザインやレイアウトが切り替わる境目のことです。

この場合、７６８ピクセルがブレイクポイントです。

「@media」を使用してパソコン表示の時のレイアウトを設定しよう

「@media 」はメディアクエリと言います。ユーザーがWebサイトを閲覧するデバイスに合わせて、最適な画面サイズになるように、スタイルやレイアウトを調整する機能です。

例えば、特定の画面幅以下でのみ適用されるCSSルールを設定し、ウェブページが異なるデバイスで見やすくなるように調整することが可能です。具体的には以下のようなコードをCSSに書きます。

@media screen and (min-width: 768px)｛
各セレクタ{
各プロパティと値
…
}
…
｝

上記コードの場合、幅が768ピクセル以上のデバイスに対して、中括弧{}内に記述されたCSSスタイルを適用します。(min-width: 768px)は最小幅が768ピクセル以上であることを定義しています。

@media screen内のコードを全て書いていくと、以下のようなコードになります。

/*タブレット、PCサイズの表示*/
@media screen and (min-width: 768px) {
  .body {
    letter-spacing: 0.05em;
    color: #3c301e;
  }

  .header {
    padding: 16px;
  }
  .header-logo {
    margin: 0;
  }

  .header-inner {
    max-width: 1080px;
    padding: 0 40px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .header-nav-list {
    gap: 40px;
  }

  .header-nav-link {
    transition: opacity 0.3s;
  }

  .header-nav-link:hover {
    opacity: 0.7;
  }

  .inner {
    max-width: 1080px;
    padding: 0 40px;
    margin: 0 auto;
  }

  .section-heading-main {
    font-size: 64px;
  }
  .about {
    padding: 100px 0;
  }
  .about-contents {
    display: flex;
    gap: 40px;
    align-items: center;
  }

  .about-img {
    width: 300px;
  }

  .about-text-contents {
    margin-top: 0;
  }

  .about-text {
    font-size: 15px;
  }

  .about-text + .about-text {
    margin-top: 30px;
  }

  .menu {
    padding: 0 0 100px;
  }

  .menu-list {
    display: flex;
    gap: 20px;
  }

  .menu-item + .menu-item {
    margin-top: 0;
  }
  .shop {
    background-image: url(../img/bg-shop.png);
    background-position: center center;
    background-size: cover;
    padding: 60px 0;
  }

  .shop-inner {
    max-width: 600px;
    margin: 0 auto;
  }

  .form {
    display: flex;
    gap: 20px;
  }

  .form-submit {
    margin-top: 0;
    transition: opacity 0.3s;
  }

  .form-submit:hover {
    opacity: 0.7;
    cursor: pointer;
  }

  .footer-text {
    margin-top: 12px;
  }

  .footer-nav-list {
    gap: 40px;
  }
  .footer-copylight {
    font-size: 13px;
  }
}

これでサイトのコーディングは完成です！

最後のチェックと細かい修正までがサイト制作です！

レスポンシブ化が終わったら、最終チェックを行います。

すべて確認が終わり細かい調整も完了し、ついにケーキショップのサイトが完成しました！

まとめ　次はゼロからのコーディングに挑戦！

今回、①～③まではデイトラ講師のライブコーディング動画を見ながら一緒に作成していました。
次回は出来るだけ動画を見ずにゼロからコーディングに挑戦した記録を紹介します！