CSSでは、回り込みや数値指定により段組みをレイアウトすることができます。今回は、floatプロパティ（回り込み）を使って基本的な２段組を作成します。
CSSでレイアウトを指定する前にあらかじめHTMLコード内のコンテンツをブロックごとに分割しておきます。
２段組構成のレイアウト
floatプロパティによる回り込み指定で、段組レイアウトが可能です。２段組レイアウトを作成する方法として、各ブロックコンテンツの左右にfloatプロパティの回り込み指定でレイアウトする場合と片方だけを回り込み指定してもう片方にはマージンを指定して段の位置を決める方法の２パターンが存在します。
floatプrパティで回り込みを指定する場合には、要素の幅（width）が指定されているか、あらかじめ幅が決まっている必要があります。
要素の幅を決めないでウィンドウサイズの幅に合わせて段のサイズを変更させたい場合には、もう片方のブロックコンテンツにマージンを指定する方法を使います。
段組作成のポイント
・HTMLのdiv要素を使って、コンテンツをブロックごとに分ける
・CSSファイルは要素のデザイン用ファイルとレイアウト用ファイルに分けると整理しやすい
回り込み指定のみによる段組の注意点
２つのブロックコンテンツにfloat属性を指定する場合には、ブロックコンテンツ全体をまとめているボックスに幅を指定していないと、回り込みによる段組レイアウトが崩れてしまいます。
また、幅を100％や100％に近い数値で指定すると、ブラウザによってはウィンドウサイズを変更した際にレイアウトが崩れることがあるので、回り込み指定による段組指定のときに幅を割合で指定するには注意が必要です。なお、片側コンテンツのマージン指定のレイアウト方法ではこれに該当しません。
HTMLコード
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
…略…
<div id="container">
<div id="nav">
<h3>ナビゲーション</h3>
<ul id="nav">
<li><a href="a">メニュー1</a></li>
<li><a href="a">メニュー2</a></li>
<li><a href="a">メニュー3</a></li>
</ul>
</div>
<div id="contents">
<h1>タイトル</h1>
<h2>サブタイトル</h2>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
</div>
<div style="clear: both;"></div>
</div>
…略…
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
CSSコード
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
body{
line-height:2em;
margin:0;
padding:0;
}
#container{
width:600px;
border:solid 2px #999;
}
#nav{
width:30%;
float:left;
background-color:#69f;
}
#contents{
width:70%;
float:right;
background-color:#ffc;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
架空のラーメン店の２段組ページを作成
応用編ということで、架空のラーメン店のWEBページを作成してみました。
使用した画像やロゴは自分で作成したり、フリー素材をインターネットからダウンロードしています。
HTMLコード
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<!DOCTYPE html>
<html>
<head>
<meta ="Shift_JIS">
<taitle>2段組レイアウト</taitle>
<link rel="stylesheet type="text/css" href="mystyle.css">
<link rel="stylesheet type="text/css" href="layout.css">
<link rel="stylesheet type="text/css" href="nav.css">
</head>
<body>
<div id="container">
<div id="nav">
<img src="tyotin.jpg" width="160" height="90"/>
<h3>インフォ</h3>
<ul>
<li><a href="info.html">店舗紹介</a></li>
</ul>
<h3>メニュー</h3>
<ul>
<li><a href="menu.html">ラーメン</a></li>
<li><a href="menu.html">ごはんもの</a></li>
<li><a href="menu.html">飲み物</a></li>
</ul>
<h3>アクセス</h3>
<ul>
<li><a href="jyusyo.html">店舗所在地</a></li>
</ul>
<h3>コンタクト</h3>
<ul>
<li><a href="address.html">出前受付</a></li>
<li><a href="address.html">メール</a></li>
</ul>
</div>
<div id="contents">
<h1><img src="logo.jpg" alt="まるおかラーメン" width="420" height="90"/></h1>
<h2>濃い味 煮干しラーメン まるおかラーメン</h2>
<img src="men.jpg" alt="煮干しラーメン" width="420" height="280">
<p>ようこそまるおかラーメンのホームページへ。</p>
<p>まるおかラーメンのおススメは濃厚背脂煮干しラーメンです。<br>
煮干しダシをベースとしたスープに平打ち麺を使用しています。</p>
<p>スープの味の濃さ（濃、中、薄）、麺の固さ（かため、ふつう、やわらかめ）は
3段階でご注文いただけます。<br>
ぜひ、当店の煮干しラーメンをご堪能ください。</p>
</div>
<div style="clear: both;"></div>
</div>
<address>Copyright (C) 2020 Okamaruramen. All Rights Reserved.</address>
</body>
</html>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
CSSコード（ページ全体のレイアウト）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
#contents{
width:430px;
margin: auto;
}
h1{
margin: 0px 0px 0px 0;
padding: 20px 0px 0px 0px;
}
h2{
margin: 0px 70px 0 70px;
}
p{
margin: 0px 0px 0px 0px;
padding: 15px;
}
#nav{
margin-top: 20px;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
CSSコード（ナビゲーションのレイアウト）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
#nav{
text-align: left;
}
#nav img{
margin:0px;
padding: 0 0 30px 0;
}
#nav h3{
margin: 40px 10px;
padding: 2px 5px;
background-color: #525247;
color: #ffffff;
}
#nav ul{
font-size: small;
margin: 10px 20px;
padding: 0 10px;
}
#nav li{
list-style-type: none;
line-height: 1.5em;
}
#nav a{
text-decoration: none;
color: #333333;
}
#nav hover{
color: #ff6600;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
CSSコード（ブロック単位のレイアウト）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
#container{
margin: 0;
padding: 0;
}
#nav{
width:160px;
float:left;
}
#contents{
margin-left: 160px;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
