画面の大きさに応じてカラムを変更する

前回、レスポンシブデザインとしてブラウジングサイズに合わせて拡縮する画像をやってみたのだけども、２カラムが１カラムに変化するのもすごい！

PC表示の、この２カラムが…

スマホでは、こう１カラムになる！右メニューは下に回り込むのだ。

いったいどういう仕組みなんだと調べてみた。スタイルシートで、表示幅により変化するように指定できるみたい。MTのRainierみたいに、右メニューを回り込ませてみよう。

まず、HTMLの記述は単純にこんな感じ。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="./ColumnChange.css" type="text/css" />
<title>レスポンシブ</title>
</head>
<body>
<div class="header">ヘッダー</div>
  <div class="wrapper">
    <div class="content">コンテンツ</div>
    <div class="content sidebar">サイドバー</div>
  </div>
<div class="footer">フッター</div>
</body>
</heml>

コンテンツとサイドバーを wrapper で挟む。

スタイルシートはこう。

.header, .content, .footer, .sidebar {
  border: 2px solid #000;
}

@media screen and (min-width : 501px) { /* 500px以下だったら無効 */

  .wrapper {
    display: table;
    width: 100%;
  }

  .wrapper .content {
    display: table-cell;
    vertical-align: top; /* 縦位置を揃える */
  }

  .wrapper .sidebar {
    width: 200px; /* サイドバーのサイズ */
  }

}

@media の部分が「メディアクエリ」というもので、条件によって要素を指定できるみたい。

以下にサンプルを作ってみた。
カラム変更サンプル

3年ほどHTMLを触ってなかったら、知らない間にこんな手法が当たり前になってた。すごい。

あと、様々なブラウズ環境をエミュレートできるこのサイト便利。右上にURLを入力する。
Demonstrating Responsive Design (jamusreynolds)

参考
CSSでつくるレスポンシブなテーブレイアウトサンプル集 (web屋tM)
これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方 (OXY NOTES)

　

　

　

コメント(0)