CSSでは、各要素を「ボックス」と呼ばれる四角形領域の概念に適用されます。
ボックスは内側から順に、内容領域、Padding、border、marginと呼ばれる部分によって構成されます。
[ボックスの概念]
内側から順に、内容領域、padding、border、marginと呼ばれる部分によって構成されます。
実際のソースコードで、その動作を検証してみます。
boxの概念のサンプル
以下のようなboxの設計を考えてみます。
上記boxのHTML/CSSソースコード例は以下のようになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>CSSボックスの概念</title>
<style type="text/css">
<!--
body{
font-family: 'MS Gothic', monospace;
}
.sample-column1{
width: 300px;
height: 300px;
margin: 30px;
border: 30px solid #ff0000;
padding: 50px;
background-color: #ffff00;
overflow: hidden;
}
-->
</style>
</head>
<body>
<div class="sample-column1">内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。</div>
</body>
</html>
上記ソースコードにおける実際の表示イメージ 表示／非表示
内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。内容が表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。表示されるのはこの領域です。
(補足)borderを利用した見出し(タイトル)への使用例
midashi1 : サンプル見出し1
midashi2 : サンプル見出し2
midashi3 : サンプル見出し3
midashi4 : サンプル見出し4
midashi5 : サンプル見出し5
midashi6 : サンプル見出し6
HTML/CSSソースコード例 表示／非表示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>borderを利用した見出し(タイトル)への使用例</title>
<style type="text/css">
<!--
body{
font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
.midashi1{
border-style: solid;
border-color: #ffcc66;
border-width: 1px;
background-color: #ffffcc;
margin-bottom: 20px;
padding: 10px;
font-size: 16px;
font-weight: bold;
color: #000080;
}
.midashi2{
border-style: solid;
border-color: #cc3300;
border-width: 0 0 3px 0;
margin-bottom: 20px;
padding: 10px 0 2px 10px;
font-size: 16px;
font-weight: bold;
color: #000080;
}
.midashi3{
border-style: solid;
border-color: #228b22;
border-width: 3px 0 3px 0;
margin-bottom: 20px;
padding: 5px 0 5px 5px;
font-size: 16px;
font-weight: bold;
color: #000080;
}
.midashi4{
border-style: solid;
border-color: #cc3300;
border-width: 0 0 3px 20px;
margin-bottom: 20px;
padding: 5px 0 5px 5px;
font-size: 16px;
font-weight: bold;
color: #000080;
}
.midashi5{
border-style: solid;
border-color: #228b22;
border-width: 0 0 0 20px;
background-color: #98fb98;
margin-bottom: 20px;
padding: 5px 0 5px 5px;
font-size: 16px;
font-weight: bold;
color: #000080;
}
.midashi6{
border-left: 20px solid #cc3300;
border-right: 2px solid #cc3300;
border-bottom: 2px solid #cc3300;
background-color: #ffdab9;
margin-bottom: 20px;
padding: 5px 0 5px 5px;
font-size: 16px;
font-weight: bold;
color: #000080;
}
-->
</style>
</head>
<body>
<div class="midashi1">midashi1 : サンプル見出し1</div>
<div class="midashi2">midashi2 : サンプル見出し2</div>
<div class="midashi3">midashi3 : サンプル見出し3</div>
<div class="midashi4">midashi4 : サンプル見出し4</div>
<div class="midashi5">midashi5 : サンプル見出し5</div>
<div class="midashi6">midashi6 : サンプル見出し6</div>
</body>
</html>
コメントする