デザインデータからコーディング！ブログサイトのレスポンシブ化

この記事ではレスポンシブWebデザインの基本的な知識を踏まえて、実際にサイトのレスポンシブ化を行います。

実際にレスポンシブ化するものとしては、「デザインデータからコーディング！ブログサイトを作ってみよう」で制作したブログサイトをレスポンシブ化していきます。

デザインデータからコーディング！ブログサイトのレスポンシブ化

レスポンシブに必要な知識まとめ

レスポンシブWebデザインに関しての基本的な情報は、「レスポンシブWebデザインを学ぼう」の記事を参考にしてください。

様々なデバイスに対応するためにレスポンシブを学ぼう

レスポンシブを実践的に学んで、理解を深めていきましょう。

レスポンシブの流れ

レスポンシブのコーディングは、次の流れで進めると良いです。

1. 今の見た目とデザインカンプを見比べる
2. 違いを見つける
3. コードに置き換えて書く

この流れを意識しながら、下記のコーディングの解説を見ると良いでしょう。

レスポンシブに必要なモノ

レスポンシブを扱うときに次の３つを確認しましょう。

ビューポート

メディアクエリ

ブレイクポイント

この3つの要素に関しては、「レスポンシブWebデザインを学ぼう」の記事で紹介しておりますので、詳しくはそちらを参照してください。

様々なデバイスに対応するためにレスポンシブを学ぼう

フレキシブルレイアウト

フレキシブルレイアウトと言うのは「どんな画面幅でもキレイに表示させる手法」です。

ブレイクポイントで綺麗に見せるのはとても重要ですが、実際の世のデバイスはブレイクポイント以外の幅であることの方が多いです。

難しく感じるかもしれませんが、レイアウトのパターンを知っていれば簡単です。

「コーディングしてみよう」の解説に「フレキシブルレイアウトのポイント」を明記するので、一緒に確認をしてみてください。

コーディングしてみよう

それでは実際にコードを書き換えながら説明していきます。

今回扱うブレイクポイント

教材では、ブレイクポイントとして768pxと1080pxを採用しています。

768pxを採用している理由としては、多くのコーディングルールでブレイクポイントとして採用されているからです。

768px以上がパソコンサイズのデザインカンプの対象ですので、次のようにコードを記述します。

.selector {
  /* ベースのスタイル */
}

@media screen and (min-width: 768px) {
  .selector {
    /* パソコンサイズのデザインカンプのスタイル */
  }
}

基本的にはこちらの768pxのブレイクポイントを使っていきますが、場合によってはもう一回り大きい幅の時に切り替えたくなる場合があります。そういった時に使用するのが1080pxのブレイクポイントです。
こちらは、使用する時にまた詳しく解説していきます。

以上を踏まえて、デザインカンプを見ながらコードを記述していきましょう。

また、今回作成するパソコンサイズのデザインカンプは、「トップページ_PC」と言うアードボードですので、使用する値はそちらから確認していきます。

ヘッダーを書き換える

ヘッダーから確認していきます。

上記の手順通り、まずは今のスタイル（スマホサイズのデザイン）と見比べてみます。

次に違いを探します。

すると、スマホサイズのヘッダーと比べて明らかに上下方向の余白が空いていることがわかります。

最後に、値を読み取って、コードに置き換えていきましょう。

余白が上下ともに40pxに変わっているので、次のコードを記述します。

@media screen and (min-width: 768px) {
  .header {
    padding: 40px 0;
  }
}

この要領で細かい箇所も見ていきましょう。

「ZeroPlus Blog」と「日々の学習を記録するブログ」と言う文字も見ていくと、それぞれfont-sizeが変化しています。値を読み取って、次のコードを追記します。

「ZeroPlus Blog」のレスポンシブスタイル

@media screen and (min-width: 768px) {
  .logo {
    font-size: 32px;
  }
}

「日々の学習を記録するブログ」のレスポンシブスタイル

@media screen and (min-width: 768px) {
  .header-heading {
    font-size: 16px;
  }
}

メディアクエリのスタイルは、既存のスタイルのすぐ下に記述する

補足ですが、メディアクエリのスタイルは、ベースのスタイルのすぐ下に書きましょう。

例えば、現在のヘッダーのスタイルが次のコードと同じ状態でしたら問題ありません。

.header {
  padding: 16px 0;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .header {
    padding: 40px 0;
  }
}

.logo {
  color: #ff7f00;
  font-size: 24px;
  font-weight: bold;
  display: inline-block;
}

@media screen and (min-width: 768px) {
  .logo {
    font-size: 32px;
  }
}

.logo-link {
  display: block;
}

.header-heading {
  font-size: 14px;
  margin-top: 8px;
}

@media screen and (min-width: 768px) {
  .header-heading {
    font-size: 16px;
  }
}

メインとサイドバーを横並びにする

コンテンツの入れ物のデザインの違いを見ていくと、次の２点が違います。

メインコンテンツとサイドバーが横並びになっている

フッターとの距離が違う

これらの違いをコードで表すと次のようになります。

@media screen and (min-width: 1080px) {
  .top-container {
    display: flex;
    padding-bottom: 80px;
  }
}

ここではブレイクポイントとして、1080pxを採用しています。

採用している理由は、「768pxより少し大きい時（画面幅800pxの時など）に、見た目が崩れてしまう」というモノに対して必要だからです。

フレキシブルレイアウトの説明でも触れたように、世のデバイスはブレイクポイント以外の幅であることの方が多いので、このように、場合によっては複数のブレイクポイントを使い分ける必要が出てくるというわけです。

また、コンテンツの入れ物の横幅の指定は、次のように、ベースのスタイルにすでに書いてあります。

.top-container {
  max-width: 1080px; /* 全てのサイズでの最大幅 */
  width: 92%; /* 最大幅より小さい時に適用される幅 */
}

max-width: 1080px;の記述により、コンテンツの入れ物（.top-container）は1080pxよりも大きくなる事はありません。

また、画面幅が1080pxを下回った時は、ブレイクポイント関係なく、横幅の92%の幅を保って表示されます。

この書き方も、全てのデバイスでキレイに見せるための書き方です。

ここでのフレキシブルレイアウトのポイント

• ブレイクポイントを使い分ける
  → ブレイクポイント前後で確認した時に、見た目が崩れた場合。
• max-widthでpx指定 & widthで%指定
  → コンテンツ幅など、最大幅が決まっている場合。

横並びのみだと、メインコンテンツとサイドバーの横幅と余白の調整ができていないので、これらを指定するコードも記述していきます。

@media screen and (min-width: 1080px) {
  .main {
    width: 720px;
  }
}

@media screen and (min-width: 1080px) {
  .aside {
    margin-top: 0;
    margin-left: 40px;
  }
}

実は、ここでもフレキシブルレイアウトを意識した書き方をしています。

.mainにwidthを指定して、.asideにwidthを指定しない理由としては、「1080pxより少し大きい幅で、.mainを優先して見せたいから」です。

画面の幅が1080pxよりも少し大きい時（1100pxなど）に、.mainと.asideの横幅が縮まるのですが、その時に「.mainはwidth: 720pxで固定、40pxの余白を開けて.asideの横幅を小さくする」という表示の仕方をすることで、どの幅でもキレイに表示させることができます。

 

また、flexboxで横並びにした時に、「指定した幅よりも縮まらないようにする」記述としてflex-shrink: 0;をつけましょう。今回はベースのスタイルに書いてあると思います。

flex-shrinkについて確認したい方は、「CSSのFlexboxを学ぼう」の記事をチェックです。

デザインデータからコーディング！ブログサイトのレスポンシブ化

 

ここでのフレキシブルレイアウトのポイント

• 優先順位が高い方にwidthの指定 & flex-shrink: 0;をつける
  → 横並びの時に、特定の幅で潰れてしまう場合。

記事の変更部分のスタイルを追加する

記事のレイアウトを変更していきます。

まずは見比べて、違いを洗い出します。

画像と文章が横並びになっている

細かい余白の大きさや位置が変わっている

まずは、画像（.post-thumb-wrapper）と文章（.post-txts）を横並びにしましょう。

@media screen and (min-width: 768px) {
  .post {
    display: flex;
    align-items: center;
  }
}

.post-thumb-wrapperと.post-txtsの上下方向の揃え方として、今回はalign-items: center;を使っています。

理由としては、タイトルが１行の時と２行になった時のデザインで、両方とも上下中央揃えだからです。
デザインカンプから、どこが基準で揃えられているかを読み取ることは注意すると良いです。

また、横並びにともなった横幅の指定や余白の変更も行っていきます。

@media screen and (min-width: 768px) {
  .post-thumb-wrapper {
    width: 344px;
  }
}

@media screen and (min-width: 768px) {
  .post-txts {
    margin-top: 0;
    margin-left: 16px;
  }
}

ここでも、.post-thumb-wrapperのベースのスタイルでflex-shrink: 0;が使われていますね。

最後に、.post-txts内の細かい余白を調整していきます。

@media screen and (min-width: 768px) {
  .post-desc {
    margin-top: 16px;
  }
}

@media screen and (min-width: 768px) {
  .post-btn-wrapper {
    margin-top: 16px;
  }
}

サイドバーの中身のスタイルを追加する

ほとんど変更がないように見えて、一箇所だけパソコンサイズでの変更があるので、スタイルを追加します。

@media screen and (min-width: 768px) {
  .bnr-item:not(:first-child) {
    margin-top: 18px;
  }
}

細かい変更も見落とさないように、違いを確認することが大切です。

フッターのスタイルを追加する

フッターでも変わらず、違いを見つけていきます。

余白が大きくなっている

文字が大きくなっている

コードにすると、以下のようになります。

余白が大きくなっている

@media screen and (min-width: 768px) {
  .footer {
    padding: 24px 0;
  }
}

文字が大きくなっている

@media screen and (min-width: 768px) {
  .footer-copyright {
    font-size: 16px;
  }
}

完成

今回の流れを実際に行った場合のサンプルコードをご用意しましたので、以下のボタンからダウンロードし自分が制作したものと見比べてみてください。

まとめ

今回伝えたかったこととしては、

レスポンシブの流れ

フレキシブルレイアウトを意識してコーディングする

の２点が中心で、他はそのためのテクニックです。

はじめのうちは難しく感じるかもしれませんが、慣れてくるとレスポンシブの流れが自然にできるようになるので、数をこなしていくことが大事です。

ただし細かいコツは、練習していく中でのレスポンシブのコツを、自分の中で引き出しのように取り出せるように整理をしておく必要があります。

初めは時間がかかってしまうかもしれませんが、やればやるほど早くなるものなので、たくさん練習してたくさん覚えていきましょう！

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー