○CSSは、下の通りです。
<style type="text/css">
|
|
body {
background-color: #FFFFFF;
color: #000000
}
|
○ページ指定
背景：白（＃FFFFFF)
文字色：黒（＃000000） |
hr {
height:3px;
border-width: 1px;
border-style: solid;
border-color: #FFCC00;
background-color:#FFCC00;
color:#FFCC00
}
|
○罫線
太さ：3ｐｘ
ボーダーの太さ：1px
種類：実線
色：黄色（＃FFCC00）
*罫線に関しては【実験2】でさらに詳しく実験します。 |
.top {
position:absolute;
top:0px;
left:0px
} |
○上の罫線の位置
位置固定
上部と左側の余白なし |
.bottom {
position:absolute;
top:600px;
left:0px
} |
○下の罫線の位置
位置固定
上から600px
左側の余白なし |
.title {
position: absolute;
top:3px;
left:150p
}
|
○タイトル
位置固定
上から3ｐｘ
左から150ｐｘ |
.picture {
position: absolute;
top:3px;
left:0px
} |
○左側の画像
位置固定
上から3px
左側の余白なし |
.left {
position: absolute;
top:160px;
left:170px;
width:220px
} |
○左側のテキスト部分
位置固定
上から160px
左から170px
横幅：220px |
.right {
position: absolute;
top:160px;
left:410px;
width:220px
} |
○右側のテキスト部分
位置固定
上から160px
左から410px
横幅：220px |
.orange {
background-color:#FF6600;
width:220px;
color: #FFFFFF;
font-size: 18px;
font-weight:bold;
padding:1px
}
|
○小見出し、オレンジ
背景色：オレンジ（#FF6600）
横幅：220px
文字色：白（#FFFFFF)
文字サイズ：18px
太字
文字の周りの余白：1px |
.green {
background-color:#00CC00;
width:220px;
color: #FFFFFF;
font-size: 18px;
font-weight:bold;
padding:1px
} |
○小見出し、緑
背景色：緑（#00CC00)
横幅：220px
文字色：白（#FFFFFF)
文字サイズ：18px
太字
文字の周りの余白：1px |
.text {
margin:10px;
line-height:130%;
font-size:12px
} |
○テキスト
余白：10px
行間隔：130%
文字サイズ：12px |
| </style> |
|
