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

今回はCSSのFlexboxを用いて、代表的なページ構成としてナビゲーションバーとサイドバーのデザインをデスクトップとモバイルで切り替えるレスポンシブデザインについて紹介したい。

参照したCSSのコードと詳しい説明は以下のサイトにあるので、ポイントになる部分と実装・動作例を示す。

1. ナビゲーションバー

ナビゲーションバーを横方向に表示する場合はflex-direction:row;としておき、ディスプレイサイズが480px以下のときはメディアクエリ内でflex-direction:column;とすることで横方向から縦方向のナビゲーションバーに切り替えることができる。なお、デザインが切り替わっているかどうか明示するため、疑似要素beforeを用いてデスクトップのときは.title:before{content:"Desktop";}、メディアクエリ内では .title:before{content:"Mobile";}とすることでタイトルの表示がDesktop/Mobileと切り替わるようにしている。

<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>

.title:before{content:"Desktop";}
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
@media (max-width: 480px) {
  .title:before{content:"Mobile";}
  .container {
    flex-direction: column;
  }
}

コード全体と動作は以下のCodePenで確認できる。

See the Pen Navigation menu by ATATAT (@atatat) on CodePen.

2. サイドバー

　ブログのようなサイドバーの場合は、flex-direction:rowとするが、コンテンツとバーの表示エリアの比率を定義するため、バー(block-1)ではflex-grow:2;,コンテンツ(block-2)ではflex-grow:8;としている。レスポンシブデザインでは上と同様にflex-direction: column;としておくと縦方向に切り替わり、さらにそれぞれのエリアの表示高さheight:42vh;を指定しておく。

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

.container {
  display: flex;
  flex-direction: row;
}
.block-1{
  flex-grow: 2;
}
.block-2{
  flex-grow: 8;
}

@media (max-width: 480px) {
  .container {
    flex-direction: column;
  }
  .title:before{content:"Mobile";}
  .block-1{height: 42vh;}
  .block-2{height: 42vh;}
}