WANtaroHP
これは css によるレイアウトのテストです．
以下に，このページに適用している css を示します．このページに適用している css は，レイアウト・テスト用のものであり，本サイトに全体に適用しているものとは異なります．
全領域で margin と padding を 0 セットします．
*{margin:0;padding:0;}
|
行間 150%，文字色は White，背景色は Black，フォントは"メイリオ"で，事前成形部（< pre >）のフォントは"IPAゴシック"とします．
/******************************************/
/* 本文書式 文字色：#FFFFFF:White */
/* 背景色：#000000:Black */
/******************************************/
body{
line-height:150%;
color:#ffffff;
background-color:#000000;
font-size:1.0em;
font-family:'メイリオ',sans-serif;
}
pre{
font-family:'IPAゴシック',monospace;
}
|
< h1 > ：フォントサイズを 2em に指定．
< h2 > ：フォントサイズを 1.5em に指定．背景色は Navy です．紺色の帯の中に白い文字が表示されます．
< h3 > ：フォントサイズを 1.25em に指定．幅1文字分の白い矩形と下線の上に文字が表示されます．
< h4 > ：フォントサイズを 1.15em に指定．幅1文字分の白い矩形の横に文字が表示されます．
< h5 > ：フォントサイズを 1.15em に指定．
/******************************************/
/* 見出し書式 #000080:Navy */
/******************************************/
h1{
font-size:2.0em;
}
h2{
margin-top:1em;
margin-bottom:1em;
background-color:#000080;
padding-top:0.5em;
padding-bottom:0.5em;
padding-left:0.5em;
font-size:1.5em;
}
h3{
margin-top:1em;
margin-bottom:1em;
border-left:solid 1em #ffffff;
border-bottom:solid 1px #ffffff;
padding-left:0.5em;
font-size:1.25em;
}
h4{
margin-top:1em;
margin-bottom:1em;
border-left:solid 0.7em #ffffff;
padding-left:0.5em;
font-size:1.15em;
}
h5{
font-size:1.15em;
}
|
まずフォントサイズを 95% に，行間を 110% にします．背景色はヘッダーは SlateGray，内部は DarkBlue としています．
/******************************************/
/* 表書式 */
/* #708090:SlateGray */
/* #00008B:DarkBlue */
/******************************************/
table{
font-size:0.95em;
line-height:110%;
}
td,th{
padding-top:0.1em;
padding-bottom:0.1em;
padding-left:0.5em;
padding-right:0.5em;
}
th{background-color:#708090;}
td{background-color:#00008B;}
|
背景色をMidnightBlue，文字は中央配置とします．
/******************************************/
/* ヘッダー書式 #191970:MidnightBlue */
/******************************************/
#header{
padding:20px;
background-color:#191970;
text-align:center;
}
|
背景色は Teal で，文字は右寄せとします． 本文の先頭右寄せで，ページの終わりにジャンプするリンクを配置するためのものです．
/******************************************/
/* 後ヘッダー書式 #008080:Teal */
/******************************************/
#postheader{
margin-left:190px;
padding:0px;
background-color:#008080;
text-align:right;
}
|
これは「Top page」にリンクするボタンを左端に配置するためのものです．背景色は Yellow としました．
/******************************************/
/* 前フッター書式 #FFFF00:Yellow */
/******************************************/
#prefooter{
padding-left:10px;
padding-top:5px;
padding-bottom:5px;
margin-top:0em;
margin-bottom:0em;
background-color:#FFFF00;
}
|
背景色はヘッダーと同様に MidnightBlue とし文字は中央は位置です．
/******************************************/
/* フッダー書式 #191970:MidnightBlue */
/******************************************/
#footer{
padding:15px;
background-color:#191970;
text-align:center;
}
|
左側に配置するメニュー分の余白を 190px とります．背景色は DarkSlateGray です．
/******************************************/
/* 右側本文書式 #2F4F4F:DarkSlateGray */
/******************************************/
#bodycontent{
margin-left:190px;
padding:10px;
background-color:#2F4F4F;
}
|
幅は 190px とし，position は絶対値で左寄せとします．html文書中で，左側メニューを本文より前に配置することにより，ヘッダーの下に左寄せでメニューを配置します．
左側メニューの中に配置する，menu1 と menu2 を書式を指定します．menu1 の背景色は MediumBlue，menu2 の背景色は SteelBlue です．
/******************************************/
/* 左側メニュー書式 */
/******************************************/
#bodymenu{
width:190px;
position:absolute;
left:0;
font-size:0.9em;
line-height:120%;
}
/*----------------------------------------*/
/* mwnu1 書式 #0000CD:MediumBlue */
/*----------------------------------------*/
#menu1{
background-color:#0000CD;
padding:10px;
}
/*----------------------------------------*/
/* menu2 書式 #2482B4:SteelBlue */
/*----------------------------------------*/
#menu2{
background-color:#2482B4;
padding:10px;
}
|
リンク部は太字，文字色をAquaとし，カーソルが載ると文字色が黄色に変化する設定です．
/******************************************/
/* リンク設定書式 #00ffff:Aqua */
/******************************************/
a{text-decoration:none;}
a:link{color:#00ffff;font-weight:bold;}
a:visited{color:#00ffff;font-weight:bold;}
a:active{color:#00ffff;font-weight:bold;}
a:hover{color:#ffff00;font-weight:bold;}
|