リキッドレイアウトのデザインをCSSで作成する

今回はリキッドレイアウトのデザインについて紹介します。

DEMO

大抵のレスポンシブデザインのサイトはメディアクエリのブレークポイントを設定して、スマホ、タブレット、PC用と３つの領域に分けていますが、将来、新しいデバイスの登場によってブラウザの幅に対応できない可能性があります。

リキッドレイアウトのデザインはメディアクエリのブレークポイントを用いずとも、ブラウザの横幅に応じてサイトの表示サイズを変更してくれます。

なので、ブラウザの幅が従来のものと異なる新しいデバイスが登場したとしても、その規格に合わせてCSSを変更する必要はありません。

では、さっそくコードを見ていきましょう。

HTML

<header>
  Liquid layout
</header>
<nav>
  nav
</nav>
<section>
  <div class="item1">item1</div>
  <div class="item2">item2</div>
  <div class="item3">item3</div>
</section>

CSS

* {
  margin: 0px;
  padding: 0px;
}

body {
  width: 90%; /* リキッド */
  max-width: 1200px; /* 幅の上限 */
  min-width: 200px; /* 幅の下限 */
  margin: 0px auto;
}

header{
  width: 100%; /* リキッド ヘッダー*/
  box-sizing: border-box;
  padding: 1em;
  background: #333;
  color: white;
  text-align: center;
}

nav {
  width: 30%; /* リキッド ナビ */
  float: left;
  height: 600px;
  background-color: #696969;
　color:white;
}

section {
  width: 70%; /* リキッド セクション */
  height: 600px;
  float: left;
}

.item1 {
  width: 100%; /* リキッド item1 */
  height: 200px;
  background-color: #c0c0c0;
}

.item2 {
  width: 100%; /* リキッド item2 */
  height: 200px;
  background-color: #d3d3d3;
}

.item3 {
  width: 100%; /* リキッド item3 */
  height: 200px;
  background-color: #dcdcdc;
}

ブラウザ幅に応じて滑らかにレイアウトが相対的に可変します。

これではレスポンシブよりリキッドの方が良いのでは？と疑問が出てくるかもしれませんが、レスポンシブデザインでは設定したブラウザ幅ごとにCSSを変更することが可能なので、スマホではいらない要素を消したり、PCでは必要な要素を加えたりとデザインの幅は広がります。

両者とも一長一短な部分があるので、時と場合に応じて使い分けていく必要があります。