ＣＳＳの基礎 Lesson_４ 2005-07-01

各要素の表示位置設定

文章全体のレイアウト・デザインの設定

前項までのレクチャーを基本にし、文章全体をどの位置に表示するかを考えて見ましょう。
文章を解りやすく表示するためには、下記の項目を各ページに必ず表示し、閲覧者が、すばやく希望する 内容を見ることが出来るようにレイアウトを考える必要があります。

1. 文章の表紙を用意する <title>
2. 文書のアウトラインを示す、見出しを用意する <hn>
3. 文章は、段落ごとに区切り、解りやすいものにする。 <div> <p>
4. 文章の製作者と、更新日を明確に示す。 <address>
5. 文章の表示位置には、id属性、class属性をつけ、解りやすく表示する。 <div#header> <div.menu>など

具体的なレイアウトとは、例のようなものです。 ＣＳＳは下記の様になっています。
絶対配置を使用しているため、文字の拡大などを、おこなうとレイアウトが、崩れる事があります。20060801

レイアウトが崩れないように、するにはfloat属性、clear属性、属性を相対値で指定する必要があります。

body{
margin: 0px;
padding: 0px;
}
#header{
width:98%;
height: 10%;
color: #000000;
background-color: #ffffee;
padding: 10px;
border: solid;
border-color: #999999;
border-width: 1px;
position: absolute;
top: 10px;
left: 10px;
text-align:center;
}
#content{ padding: 10px;
position: absolute;
top:110px;
left:0px;
}
#sidebar{ width: 20%;
height:600px;
float: left;
color: #000000;
background-color: #eeeeee;
border: solid;
border-color: #999999;
border-width: 1px;
padding: 10px;
text-align: center;
}
#migisidebar{ width: 20%;
height:600px;
float: right;
color: #000000;
background-color: #eeeeee;
border: solid;
border-color: #999999;
border-width: 1px;
padding: 10px;
text-align: center;
}
#main{ margin-left: 21%;
margin-right: 21%;
height:600px;
color: #000000;
background-color: #ffffee;
border: solid;
border-color: #999999;
border-width: 1px;
padding: 10px;
text-align: center;
}
#futter{ width:98%;
height: 10%;
color: #000000;
background-color: #ffffee;
padding: 10px;
border: solid;
border-color: #999999;
border-width: 1px;
position: absolute;
top: 750px;
left: 10px;
text-align:center;
}

ここでは解りやすいように、背景に色をつけていますが、実際には画像を背景に使用してみたり、 枠線を利用してみるなどして、全体の雰囲気をページの内容にふさわし物にいます。