サンプルサイトをコーディングしてみよう⑤【Webサイトコーディングの流れ】

全体のスマホ用CSSを設定する

@media screen and (max-width: 770px) {
  body {
    font-size: 15px; /* 文字サイズ15px */
  }
}

メディアクエリで770pxよりブラウザ幅が小さくなった場合にスマホ用表示に切り替えます。770pxの数値はiPadを縦にした時の横幅が768pxなので、そこから割り出しています。ブレイクポイントの数値は任意なので、自分の扱いやすい数値を設定しましょう。スマホ用のCSSは変更する部分のみ記述します。

ヘッダーのスマホ用CSSを設定する

PCの中のデータをスマートフォンでチェックすることは出来ないので、ここから先はブラウザの幅を縮めて、画面を細長くした状態でチェクしていきましょう。CSSは必ずメディアクエリの{ }の中に記述します。

.header {
    display: block; /* 横並びを解除 */
    padding: 0; /* 内側余白 0 */
    height: auto; /* 内包コンテンツに合わせて高さを自動化 */
}
.logo {
    max-width: 160px; /* 最大幅160px */
    margin: 0 auto; /* センターに寄せる */
    padding: 5px 0; /* 内側余白 上下5px */
}

.headerのdisplayプロパティの値をblockにすることで横並びを解除します。ロゴのサイズなどはバランスを見ながら任意で決めてOKです。

次にナビゲーション部のCSSを設定します。

.nav {
    background: #372521; /* 背景色ブラウン */
}
.nav_list_item {
    flex-grow: 1; /* フレックスボックスの余白を均等に分け合う */
    text-align: center; /* 文字をセンター寄せ */
    margin: 0; /* 外側余白 0 */
}
.nav_list_item a {
    color: #fff; /* 文字色白 */
    padding: 10px 0; /* 内側余白 上下10px */
    font-size: 12px; /* 文字サイズ12px */
}

ナビゲーションが見やすい様に、背景色と文字色を変更します。文字の間隔も均等になる様に調整します。

ヒーローイメージのスマホ用CSSを設定する

ヒーローイメージは表示が崩れているわけではありませんが、パソコン用の横長の画像だとサイズが小さくなってしまいます。そこでスマホ表示の際は、別の画像に差し替わる様に設定をします。

<figure class="hero_img">
      <img class="pc_only" src="images/eyecatch.jpg" alt="Welcome Jewelry Studio FumuFumu" width="2000" height="800" />
      <img class="sp_only" src="images/eyecatch_sp.jpg" alt="Welcome Jewelry Studio FumuFumu" width="1200" height="1200" />
</figure>

HTMLにスマホ用の画像のimgタグを追記します。それぞれにpc_only sp_onlyとclass名も付けておきます。

.pc_only {
  display: block; /* ブロックボックスに変換 */
}
.sp_only {
  display: none; /* 要素を非表示 */
}
@media screen and (max-width: 770px) {
  .pc_only {
    display: none; /* 要素を非表示 */
  }
  .sp_only {
    display: block; /* ブロックボックスに変換 */
  }
}

display: block;とdisplay: none;をメディアクエリで切り替えることで、画面幅に合わせて画像を差し替えます。

「About Us」エリアのスマホ用CSSを設定する

.title {
    font-size: 35px; /* 文字サイズ35px */
    margin: 0 0 1em; /* 外側余白 下１文字分 */
}
.title_sub {
    font-size: 20px; /* 文字サイズ20px */
    margin: 0 0 20px; /* 外側余白 下20px */
}
.about {
    padding: 50px 10px 30px; /* 内側余白 上50px 左右10px 下30px */
}
.about_inner {
    display: block; /* ブロックボックスに変換 */
}
.about_text {
    margin: 20px 0; /* 外側余白 上下20px */
}
.about_desc {
    font-size: 15px; /* 文字サイズ15px */
}

ここでのポイントは.about_innerに適用されていたdisplay: flex;をdisplay: block;にして、横並びを解除している部分です。あとはバランスを見ながらフォントサイズや余白の調整を行います。

「Menu」エリアのスマホ用CSSを設定する

.menu {
    padding: 50px 10px; /* 内側余白 上下50px 左右10px */
  }
.mfg {
    display: block; /* ブロックボックスに変換 */
    padding: 15px; /* 内側余白 全方向15px */
}
.mfg_img {
    margin: 0 0 30px; /* 外側余白 下30px */
}

ここでもポイントは.mfgに適用されていたdisplay: flex;をdisplay: block;にして、横並びを解除する部分です。あとは余白の微調整を行います。

フッターのスマホ用CSSを設定する

.footer_inner {
    display: block; /* ブロックボックスに変換 */
}
.footer_logo {
    width: 160px; /* 幅160px */
    margin: 0 auto; /* センターに寄せる */
}
.copy {
    padding: 20px 0 0; /* 内側余白 上20px */
    text-align: center; /* 文字をセンター寄せ */
}

ここでも.footer_innerに適用されていたdisplay: flex;をdisplay: block;にして、横並びを解除します。これでレスポンシブ対応は完了です。パソコン用から制作した場合は横並び > 縦並び、スマホ用から制作した場合は縦並び > 横並びとレイアウトを調整する流れとなります。