このホームページを作るためにいくつかテスト的にCSSで作成したけれど、今回は使わなかったものがあります。今後使うかもしれないし、誰かのためになるかもも知れないから、メモのついでに掲載しています。
１．基本
CSSを作るにあたって基本的に以下のようなおまじない（初期化）をしています。
style.css
html,body,div,p {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
list-style:none;
}
html {
height: 100%;
}
body {
width: 100%;
height: 100%;
background: #fff;
}
２．ヘッダーとフッター構成
何はともあれホームページにはヘッダーとフッターが必要だろうと、ここから作業を始めました。
フッターは本文が短くても一番下になるようにしました。
ヘッダーとフッターがいらない人はhtmlの<div id=”header”>と<div id=”footer”>の二つのタグをを削除すればいい。
サンプルはこちら。
style1.css(『2.ヘッダーとフッター構成』のstyle.cssに追加）
#page {
color: #000;
width: 100%;
height: 100%;
min-height: 100%;
background: #444;
}
#wrapper {
background: #fff;
width: 100%;
min-height: 100%;
}
#header {
color: #fff;
width: 100%;
height: 110px;
background: #444;
}
#container{
width: 100%;
}
#footer {
clear: both;
color: #fff;
width: 100%;
height: 40px;
margin-top: -40px;
background: #444;
}
<!doctype html> <html> <head> <meta charset="utf-8"> <title>ヘッダー・フッターサンプル</title> <link rel="stylesheet" type="text/css" media="all" href="style1.css" /> </head> <body> <div id="page"> <div id="wrapper"> <div id="header"> <p>header</p> <!-- header --></div> <div id="container"> <!-- container--></div> <!-- wrapper --></div> <div id="footer"> <p>footer</p> <!-- fotter --></div> <!-- page --></div> </body> </html>
３．２段組み（左枠：幅可変 右枠：幅固定）
メニューやアーカイブ情報などを右側に配置して、左側にコンテンツを配置する場合のレイアウト。コンテンツ側の幅は可変になるようにしています。
サンプルはこちら。
style2.css(『2.ヘッダーとフッター構成』のstyle.cssに追加）
#contents {
float: left;
width: 100%;
margin-right:-230px;
color: #000;
}
#main {
min-height: 100%;
margin-right: 230px;
background: #00D936;
}
#sidebar {
float:right;
width: 220px;
min-height: 100%;
background: #4D4DFF;
}
<!doctype html> <html> <head> <meta charset="utf-8"> <title>左枠：幅可変・右枠：幅固定 サンプル</title> <link rel="stylesheet" type="text/css" media="all" href="style2.css" /> </head> <body> <div id="page"> <div id="wrapper"> <div id="header"> header <!-- header --></div> <div id="container"> <div id="contents"> <div id="main"> <p>左枠内のコンテンツ</p> <!-- main --></div> <!-- contents--></div> <div id="sidebar"> <p>右枠内のコンテンツ</p> <!-- sidebar --></div> <!-- container--></div> <!-- wrapper --></div> <div id="footer"> footer <!-- fotter --></div> <!-- page --></div> </body> </html>
４．２段組（左枠：幅固定 右枠：幅可変）
メニューやアーカイブ情報などを右側に配置して、コンテンツを右側に配置するレイアウト。３のサンプルと同様にコンテンツは幅が可変になるようにしています。
サンプルはこちら。
style3.css(『2.ヘッダーとフッター構成』のstyle.cssに追加）
#sidebar {
float: left;
width: 150px;
min-height: 100%;
background: #4D4DFF;
}
#contents {
color: #000;
margin-left: 155px;
overflow: hidden;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
min-height: 100%;
}
#main {
width: 100%;
min-width: 600px;
background: #000;
background-color: #00D936;
}
<!doctype html> <html> <head> <meta charset="utf-8"> <title>左枠：幅固定・右枠：幅可変 サンプル</title> <link rel="stylesheet" type="text/css" media="all" href="style3.css" /> </head> <body> <div id="page"> <div id="wrapper"> <div id="header"> header <!-- header --></div> <div id="container"> <div id="sidebar"> <p>右枠内のコンテンツ</p> <!-- sidebar --></div> <div id="contents"> <div id="main"> <p>左枠内のコンテンツ</p> <!-- main --></div> <!-- contents--></div> <!-- container--></div> <!-- wrapper --></div> <div id="footer"> footer <!-- fotter --></div> <!-- page --></div> </body> </html>