htmlとcssを使ってWebページを作成する場合、多くの知識が必要です。カラム・レイアウトとレスポンシブWebデザインについて理解するためには、できるだけ単純な構造のコードから少しずつ複雑なコードを考えていくと理解しやすくなります。
以下の図は、[小川裕之]レスポンシブWebデザイン入門 P 96で紹介されているレイアウトの構成図です。 floatを使って要素を横に並べることで、カラム・レイアウトを実現しています。cssのメディアクエリーを指定して、画面の幅に応じて、異なるレイアウトに切り替えることで、レスポンシブWebデザインを実現しています。
テンプレートのhtmlファイルに、レイアウト構成をもとに、要素を配置します。
html文書の基本的な構造
最初に、htmlの基本的な構造について確認することにしましょう。
htmlは、開始タグと終了タグの中に、別のタグを入れることができます。これは、入れ子構造と呼ばれます。そこで、まず、基本的なタグの構造を理解しておく必要があります。
表示されない内容をheadタグの中に、表示される内容をbodyタグの中に記述します。
<!DOCTYPE html> <!-- 文書型に、html5を使うことを宣言する -->
<html lang="ja"> <!-- htmlタグでは、。グローバル属性のlang属性を指定して文書の言語を示す（推奨） -->
<head>
<!-- ここに表示されない文書の情報を記述する -->
</head>
<body>
<!-- ここに表示される内容を記述する -->
</body>
</html>レイアウト構成に基づいて、領域を定義する
先程示したレイアウトの構成図に従い、タグを追加します。
表示される要素（ナビゲーション、左側の枠、右側の枠（サイドバー）、フッター）がすべて、bodyタグ内に記述されていることを確認してください。
<!DOCTYPE html> <!-- 文書型に、html5を使うことを宣言する -->
<html lang="ja"> <!-- htmlタグでは、。グローバル属性のlang属性を指定して文書の言語を示す（推奨） -->
<head>
<!-- ここに表示されない文書の情報を記述する -->
</head>
<body>
<div id="wrapper">
<header>
<nav>
<!--ナビゲーションの内容-->
</nav>
</header>
<div id="content" class="clearfix">
<div id="contentInner">
<article>
<!-- 左側の枠の内容（メインコンテンツ）-->
</article>
</div><!-- /#contentInner -->
<aside>
<!--右側の枠の内容（サイドバー）-->
</aside>
</div><!--/#content -->
<footer>
<!-- フッターの内容 -->
</footer>
</div><!--/#wrapper-->
</body>
</html>表示される要素を追加する
表示される幅で変化するレイアウトを確認するために、headタグ内の内容を追加し、背景色を指定したボックス要素を配置します。
<!DOCTYPE html> <!-- 文書型に、html5を使うことを宣言する -->
<html lang="ja"> <!-- htmlタグでは、。グローバル属性のlang属性を指定して文書の言語を示す（推奨） -->
<head>
<!-- ここに表示されない文書の情報を記述する -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="author" content="Horio Kazuhiko(kukekko)">
<title>Layout Check</title>
<meta name="description" content="表示幅の変化に応じたレイアウトの変化を確認します。">
<meta name="keywords" content="">
<link rel="stylesheet" href="css/normalize.css" type="text/css">
<link rel="stylesheet" href="css/base.css" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<nav>
<!--ナビゲーションの内容-->
<div style="height: 50px; background-color:greenyellow; color: black">ナビゲーション</div>
</nav>
</header>
<div id="content" class="clearfix">
<div id="contentInner">
<article>
<!-- 左側の枠の内容（メインコンテンツ）-->
<div style="height: 150px; background-color:blue; color:cornsilk">メインコンテンツ</div>
</article>
</div><!-- /#contentInner -->
<aside>
<!--右側の枠の内容（サイドバー）-->
<div style="height: 50px;background-color:cornflowerblue" >サイドバー</div>
</aside>
</div><!--/#content -->
<footer>
<!-- フッターの内容 -->
<div style="height: 50px; background-color:green">フッタ</div>
</footer>
</div><!--/#wrapper-->
</body>
</html>これで、ブラウザで表示することが可能です。
この状態では、ブラウザのウィンドウ幅を変化させてもレイアウトは、変化しません。
ブラウザの幅に応じてレイアウトを変更する
cssを変更して、表示される幅が広い時、 #contentInnerの横に、aside が回り込み、狭い時、下に表示されるように、floteが変更されるように定義します。この回り込みが生じる領域が、content領域の中で行われていることに注目してください。content領域には、この領域の外では、回り込み設定が解除されるclearfixクラスが指定されています。
cssを定義します。
@charset "UTF-8";
/*初期設定
----------------------------------------------------*/
body {
color: #cbd9e7;
background-color: rgb(24, 25, 32);
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
}
.ie8 img{
width: auto;
}
/*clearfix*/
.clearfix {
zoom: 1;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
/*layout
----------------------------------------------------*/
#wrapper {
margin-bottom: 20px;
}
#contentInner {
float: left;
width: 100%;
margin-right: -300px;
}
article {
margin-right: 300px;
}
aside {
float: right;
width: 300px;
}
/*IEで要素がズレるのを対応*/
.ie7 aside ul li,
.ie8 aside ul li,
.ie9 aside ul li{
display: list-item;
padding: 0;
}
@media only screen and (max-width: 960px) {
#wrapper{
margin: 0 auto;
}
}
@media only screen and (max-width: 720px) {
#wrapper{
max-width: 960px;
margin: 0 auto;
}
#contentInner {
float: none;
margin-right: 0;
}
article {
margin-right: 0;
}
aside {
float: none;
width: 100%;
}
}ブラウザの幅を変更するとレイアウトが変化します。
