【office f】トップ＞スタイルシート＞スタイルシート雛形＞ボックス関係

＞

スタイルシート

＞

ボックス（枠）用雛形

●マージンの指定　→　サンプルを見る　

↓[box_margin.css]

body { margin: 0 }
p {
text-align: center;
padding: 10px;
border: solid 2px #999999;
color: #008000;
font-size: 11pt;
background: #e0ffff
}
#sample1 { margin: 0 }
#sample2 { margin: 50px }
#sample3 { margin: 100px }
#sample4 { margin-right: 50% }
#sample5 { margin-left: 50% }

ページマージン

●ページ内容の周りのマージンの指定　→　サンプルを見る　

↓[page_margin.css]

p {
border: solid 2px #999999;
color: #008000;
font-size: 11pt;
background: #e0ffff
}
#sample1 { padding: 0 }
#sample2 { padding: 10px }
#sample3 { padding: 30px }
#sample4 { padding-right: 50% }
#sample5 { padding-left: 50% }

ボックスの枠線

●ボックスの枠線の太さを指定　→　サンプルを見る　

↓[box_waku.css]

p {
text-align: center;
padding: 10px;
border: solid #999999;
color: #008000;
background: #e0ffff
}
#sample1 { border-width: 1px }
#sample2 { border-width: 5px }
#sample3 { border-width: 10px }
#sample4 { border-width: 20px }
#sample5 { border-width: 30px }
#sample6 {
border-left-width: 100px;
border-right-width: 100px;
}

ボックスの枠線の色

●ボックスの枠線の色を指定　→　サンプルを見る　

↓[box_wakucolor.css]

body { margin: 10px }
p {
text-align: center;
font-size: 11pt;
color: #008000;
padding: 10px;
border: solid 5px;
}
#sample1 { border-color: red }
#sample2 { border-color: blue }
#sample3 { border-color: yellow }
#sample4 { border-color: green }
#sample5 {
border-top-color: #ff0000;
border-bottom-color: #0000ff;
border-left-color: #ffff00;
border-right-color: #008000
}

ボックスの枠線の種類

●ボックスの枠線の種類を指定　→　サンプルを見る　

↓[box_wakutype.css]

p {
text-align: center;
font-size: 11pt;
padding: 10px;
border: solid 6px #999999;
}
#sample1 { border-style: none }
#sample2 { border-style: solid }
#sample3 { border-style: double }
#sample4 { border-style: dashed }
#sample5 { border-style: dotted }
#sample6 { border-style: groove }
#sample7 { border-style: ridge }
#sample8 { border-style: inset }
#sample9 { border-style: outset }