@ RWD

Fluid Grid:フルードグリッド

フルードグリッドとは、ページの構成要素を任意のグリッドに沿って配置する「グリッドレイアウト」の手法と、ブラウザのウィンドウサイズに応じて各要素の大きさを伸縮させる「リキッドレイアウト」の手法を組み合わせたレイアウト手法です。

この「フルードグリッド」をシステム化した可変グリッド・システムが RWD には必要不可欠です。

fluid_grid

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
header,
main,
footer{
  max-width: 960px;
  margin: 0 auto;
}
header {
  width: 100%;
  height: 100px;
  border: 5px solid #fff;
  background: #eaeaea;
}
main {
  overflow: hidden;
  width: 100%;
}
article {
  height: 100px;
  border: 5px solid #fff;
  background: #eaeaea;
}
aside {
  height: 100px;
  border: 5px solid #fff;
  background: #eaeaea;
}
footer {
  width: 100%;
  height: 100px;
  border: 5px solid #fff;
  background: #eaeaea;
}

/* 768px or more */
@media screen and (min-width: 768px) {
  article {
    float: left;
    width: 70%;
    height: 300px;
  }
  aside {
    float: right;
    width: 30%;
    height: 300px;
  }
}
</style>
</head>

<body>
<header>header</header>
<main>
  <article>article</article>
  <aside>aside</aside>
</main>
<footer>footer</footer>
</body>

</html>

demo

グリッド・システム

フルードグリッドはシンプルなモノですが、フルードグリッドに汎用性を持たせ、より複雑なレイアウトパターンにも使えるようにシステム化したのがグリッド・システムです。

960 Grid System などによりウェブ製作者のなかに浸透しています。

可変グリッド・システム

1140 CSS Grid はデスクトップで最大幅を 1140px にした 12 カラムのシンプルなグリッド・システムです。

demo

デバイスの画面サイズと向きを出力する

デバイス別の導線設計やデバイスに応じた表示の最適化を行う場合に、画面サイズと向の取得が必要な場合があります。

以下に、デバイスの画面サイズと向きを出力する JavaScipt ソースコードを示します。

screen_size

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <div id="screen"></div>
  <script>
  window.onorientationchange = screenInfo;
  screenInfo();
  function screenInfo(){
    document.getElementById("screen")
    .innerHTML =
    "画面の幅 = " + screen.width + " px<br />" +
    "画面の高さ = " + screen.height + " px<br />" +
    "画面内の幅 = " + window.innerWidth + " px<br />" +
    "画面内の高さ = " + window.innerHeight + " px";
  }
  if (window.innerWidth > window.innerHeight) {
    alert("横向き");
  }else{
    alert("縦向き");
  }
  </script>
</body>

</html>

demo

グリッド・レイアウトを可視化するツール

griddle.it は URL に3つのパラメータを指定することで、グリッドの画像を生成できる便利なツールです。
CSSでこのURLを背景画像として指定することで、制作中のサイトのグリッドを簡単に可視化できます。

format

http://griddle.it/[レイアウト幅]-[グリッド数]-[ガターサイズ]?[グリッドの背景色]&[ガターの色]&[文字の色]&[サイズ表示]&[水平線]

example

background: url(http://griddle.it/940-12-20?color=fafafa&background=fff&text=fff&num=true&horizontal=20) repeat-y center top;

griddle.it を使って背景にグリッドを表示します。

griddle_it-01.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>sample</title>
  <style>
  body {
    margin: 0;
    padding: 0;
  }
  
  body {
    background: url(http://griddle.it/940-12-20?color=fafafa&background=fff&text=fff&num=true&horizontal=20) repeat-y center top;
  }
  </style>
</head>

<body>
</body>

</html>

demo

メディアクエリを使って、背景のグリッドをスクリーンサイズに応じて切り替える。

griddle_it-02.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>sample</title>
  <style>
  body {
    margin: 0;
    padding: 0;
  }

  body {
    background: url(http://griddle.it/450-1-15?color=fafafa&num=false&horizontal=20) repeat-y center top;
  }

  /* 768px or more */
  @media screen and (min-width: 768px) {
    body {
      background: url(http://griddle.it/708-12-30?color=fafafa&num=false&horizontal=20) repeat-y center top;
    }
  }

  /* 960px or more */
  @media screen and (min-width: 960px) {
    body {
      background: url(http://griddle.it/900-12-30?color=fafafa&num=false&horizontal=20) repeat-y center top;
    }
  }
  </style>
</head>

<body>

</body>

</html>

demo