ブログデザイン備忘録～レスポンシブデザイン2

前回に続いてCSSのFlexboxを用いて、今回はブログページでよく見かけるナビゲーションバー, サイドバー, フッターの構成と聖杯レイアウトのレスポンシブデザインについて紹介したい。

atatat.hatenablog.com

1. ブログスタイル

ナビゲーションバー(item-1～item-5)とサイドバー(block-1,block-2)をそれぞれcontainerとcontensにクラスを分けておく。あとはそれぞれ、前回と同様に横方向に表示する場合はflex-direction:row;としておき、ディスプレイサイズが480px以下のときはメディアクエリ内でflex-direction:column;とすることで横方向から縦方向に表示することができる。以下ポイントになる部分のコード例と実装例を示す。

<div class="title">  </div>
<div class="container">
  <div class="item-1">Home</div>
  <div class="item-2">About</div>
  <div class="item-3">Services</div>
  <div class="item-4">Contact</div>
</div>

<div class="contents">
  <div class="block-1">Left</div>
  <div class="block-2">Right</div>
</div>

<div class="footer">footer </div>

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.contents {
  display: flex;
  flex-direction: row;
}
@media (max-width: 480px) {
  .container {
    flex-direction: column;
    align-items: center;
  }
   .contents {
    flex-direction: column;
  }
  .footer{height: 25vh;}
}

See the Pen Blog-style by ATATAT (@atatat) on CodePen.

2. 聖杯レイアウト

聖杯レイアウトは、ヘッダ(A)とフッタ(E)があり、中央にコンテンツ(C)とその左右にサイドバー(B/D)があるレイアウトのこと。

coliss.com

モバイルのときはBだけ非表示にして、残りは縦方向に表示する。非表示はメディアクエリ内で.box-2 {display: none;}とすればよい。

<div class="title">  </div>
<div class="container">
  <div class="block-1">
    <div class="box-1">A</div>
  </div>
  <div class="block-2">
    <div class="box-2">B</div>
    <div class="box-3">C</div>
    <div class="box-4">D</div>
  </div>
  <div class="block-3">
    <div class="box-5">E</div>
  </div>
</div>

.block-1{
  display: flex;
  flex-direction: row;
  gap: 4vh;
}
.block-2{
  display: flex;
  flex-direction: row;
  gap: 4vh;
}
.block-3{
  display: flex;
  flex-direction: row;
  gap: 4vh;
}

.box-1, .box-5 {
  flex-basis: 100%;
  height: 20vh;
}
 
.box-3 {
  flex-basis: 60%;
  height: 44vh;
}
 
.box-2, .box-4 {
  flex-basis: 20%;
}
@media (max-width: 480px) {
  .block-2 {
    flex-direction: column;
    height: 30vh;
  }
  .box-2 {
    display: none;
  }
  .box-3 {
    flex-basis: 80%;
  }
}