スタイルシート（CSS）基礎講座
スタイルシートで段組を作ろう
ホームページでよくあるレイアウト、ページが縦に分かれていてメニュー部分と内容の部分に分かれているという形。これをスタイルシートで作りましょう。
HTMLの記述
その前に下準備があります。HTMLの中にメニューである部分と内容である部分とがわかるように記述しておかなくてはなりません。 以下のように、内容部分が記述されているところを
<div class="main"> ～ </div>
で囲み、メニュー部分を
<div class="sitemenu"> ～ </div>
で囲みます。
<html>
<head>
<title>札幌市の和食洋食レストラン「さんぷる」</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>札幌市の和食洋食レストラン「さんぷる」</h1>
<div class="main"> ←ここが追加
<h2>レストラン「さんぷる」のご案内</h2>
<p>ようこそ。
～ ～
お楽しみに。</p>
<br clear="all">
</div> ←ここが追加
<div class="sitemenu"> ←ここが追加
<h3>サイトマップ</h3>
<a href="index.html">トップページ</a><br>
～ ～
<a href="index.html">５ページ</a><br>
</div> ←ここが追加
</body>
</html>
そしてスタイルシートに以下の記述を追加しましょう。<h1>と<h2>の間に書くと見やすいでしょう。こんな感じになるよう記述しましょう。
つづき～～
h1 {
color: #FFFFFF;
background-color: #669900;
padding: 15px;
text-align: center;
}
.main {
background-color: #FFFFFF; /*背景色の指定*/
float: right; /*右に配置の指定*/
width: 80%; /*右部分の幅の指定*/
margin: 0px;
padding: 0px;
}
.sitemenu {
padding: 0px;
float: left; /*左に配置の指定*/
width: 20%; /*左部分の幅の指定*/
}
h2 {
color: #CC3300;
padding: 5px;
margin-left: 30px;
margin-right: 30px;
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #CC3300;
}
～～つづく
いかがですか？こうなりましたか？もう最初のただの白黒のページからは見違えましたね。
次にリンクの表示を少し変えてメニューっぽくしてみましょう。
