恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

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

投稿日:2018-04-05 更新日:




luquid_layout

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

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

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

なので、ブラウザの幅が従来のものと異なる新しいデバイスが登場したとしても、その規格に合わせて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では必要な要素を加えたりとデザインの幅は広がります。

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




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

TOM

TOM

Webデザイナー、UI/UXデザインと共にJavascript、PHP等のプログラミング言語について日々勉強中。