★HTML・CSSの基本
★JavaScript ライブラリ
<目次>
@ボックスとは?
A枠線の種類と色を指定する
B枠線の太さを指定する
Cマージンを指定する
Dパディングを指定する
E横幅と高さをを指定する
ボックス
@ボックスとは?
ボックスとは、それぞれの要素(タグ)が持っている四角形の範囲内のことをいいます。
例えば、<P>〜</P>の範囲が一つのボックスになります。
ボックス内の上下左右にスペースを入れたり(マージン)、色々な枠線で囲んだりすることができます。
ソースコード |
<HTML>
<head>
<title>ボックス</title>
<style type="text/css">
<--
.box { background-color:aquamarine;
margin:10pt;
padding:10px;
border:2px solid #dc143c;
}
-->
</style>
</head>
<body>
<p class="box">
ボックスとは、それぞれの要<br>
素(タグ)が持っている四角形<br>
の範囲内のことをいいます。</p>
</body>
</HTML>
|
A枠線の種類と色を指定する
1.枠線の種類を指定する
ボックスの枠線の種類を設定するには、border-styleプロパティを使います。
border-styleプロパティの値は、上、右、下、左の順で設定できます。
値が一つのとき上下左右同じ設定、 値が二つのとき上下、左右の設定、 値が三つのとき上と左右と下の設定、 値が四つのとき上、右、下、左の順で設定されます。
また、border-top-style、border-left-style、border-right-style、border-bottom-styleプロパティを使うと個別に設定することができます。
ソースコード |
<HTML>
<head>5
<title>ボックスの枠線</title>
<style type="text/css">
<--
body {background-color:#ffffe0;}
.box1 {background-color:yellow; width:100px; border-style:solid; }
.box2 {background-color:yellow; width:100px; border-style:double; }
.box3 {background-color:yellow; width:100px; border-style:groove; }
.box4 {background-color:yellow; width:100px; border-style:ridge; }
.box5 {background-color:yellow; width:100px; border-style:outse; }
.box6 {background-color:yellow; width:100px; border-style:inset; }
.box7 {background-color:yellow; width:100px; border-style:dotted; }
.box8 {background-color:yellow; width:100px; border-style:dashed; }
-->
</style>
</head>
<body>
<p class="box1">solidです</p>
<p class="box2">doubleです</p>
<p class="box3">grooveです</p>
<p class="box4">ridgeです</p>
<p class="box5">outsetです</p>
<p class="box6">insetです</p>
<p class="box7">dottedです</p>
<p class="box8">dashedです</p>
</body>
</HTML>
|
2.枠線の色を指定する
枠線の色を設定するには、border-colorプロパティを使います。
border-colorプロパティの値は、上、右、下、左の順で設定できます。
値が一つのとき上下左右同じ設定、 値が二つのとき上下、左右の設定、 値が三つのとき上と左右と下の設定、 値が四つのとき上、右、下、左の順で設定されます。
border-top-color、border-left-color、border-right-color、border-bottom-colorプロパティを使うと個別に設定することができます。
ソースコード |
<HTML>
<head>
<title>ボックスの枠線の色</title>
<style type="text/css">
<--
body {background-color:#ffffe0;}
.box1 {width:230px; border-style:solid; border-color:green;}
.box2 {width:230px; border-style:double; border-color:blue;}
.box3 {width:230px; border-style:groove; border-color:blue red;}
-->
</style>
</head>
<body>
<p class="box1">緑色の枠線です</p>
<p class="box2">青色の枠線です</p>
<p class="box3">上下が青色で、左右が赤色です。</p>
</body>
</HTML>
|
B枠線の太さを指定する
ボックスの枠線の太さを指定するには、border-widthプロパティを使います。
値には数値にptなどの単位を付けて細かく指定する方法と、thin(細い線)、medium(通常の線)、thick(太い線)などのキーワードをつかって大まかな設定も出来ます。
border-widthプロパティの値は、上、右、下、左の順で設定します。
値が一つのとき上下左右同じ設定、 値が二つのとき上下、左右の設定、 値が三つのとき上と左右と下の設定、 値が四つのとき上、右、下、左の順で設定されます。
また、border-top-width、border-left-width、border-right-width、border-bottom-widthプロパティを使うと個別に設定することができます。
ソースコード |
<HTML>
<head>
<title>ボックスの枠線の色</title>
<style type="text/css">
<--
body {background-color:#ffffe0;}
p { border-style:solid; border-color:green; }
.box1 { width:230px; border-width:thin; }
.box2 { width:230px; border-width:medium; }
.box3 { width:230px; border-width:thick; }
.box4 { width:230px; border-width:10pt; }
-->
</style>
</head>
<body>
<p class="box1">thin(細い線)です。</p>
<p class="box2">medium(通常の線)です。</p>
<p class="box3">thick(太い線)です。 </p>
<p class="box4">10ptの太さの線です。</p>
</body>
</HTML>
|
Cマージンを指定する
marginプロパティを使えば、ボックス周りにマージン(余白)を設定することが出来ます。
marginプロパティの値は、上、右、下、左の順で設定します。
値が一つのとき上下左右同じ設定、 値が二つのとき上下、左右の設定、 値が三つのとき上と左右と下の設定、 値が四つのとき上、右、下、左の順で設定されます。
また、margin-top、margin-left、margin-right、margin-bottomプロパティを使うと個別に設定することができます。
ソースコード |
<HTML>
<head>
<title>ボックスの枠線の色</title>
<style type="text/css">
<--
body {background-color:#ffffe0;}
p { background-color:yellow; }
.box1 { width:200px; margin: 25px; }
.box2 { width:200px; margin: 50px; }
.box3 { width:200px; margin-left: 40px; }
.box4 { width:200px; margin: 30px 15px; }
.box5 { width:200px; margin: 10px 20px 50px; }
-->
</style>
</head>
<body>
<p class="box1">この段落の<br>
上下左右のマージンは、25pxです。</p>
<hr>
<p class="box2">この段落の<br>
上下左右のマージンは、50pxです。</p>
<hr>
<p class="box3">左のみに<br>
40pxのマージンを設定</p>
<hr>
<p class="box4">上と下に30px<br>
左と右に15pxのマージンを指定</p>
<hr>
<p class="box5">上に10px、<br>
左右に20px、下に50pxのマージンを指定</p>
<hr>
</body>
</HTML>
|
Dパディングを指定する
ボックスの枠線からそのボックス内のテキストの間隔を指定するには、paddingプロパティを使います。
paddingプロパティの値は、上、右、下、左の順で設定します。
値が一つのとき上下左右同じ設定、 値が二つのとき上下、左右の設定、 値が三つのとき上と左右と下の設定、 値が四つのとき上、右、下、左の順で設定されます。
また、padding-top、padding-left、padding-right、padding-bottomプロパティを使うと個別に設定することができます。
ソースコード |
<HTML>
<head>
<title>ボックスの枠線の色</title>
<style type="text/css">
<--
body {background-color:#ffffe0;}
p { background-color:yellow; }
.box1 { width:200px; padding: 25px; }
.box2 { width:200px; padding: 50px; }
.box3 { width:200px; padding: 10px 20px 50px; }
-->
</style>
</head>
<body>
<p class="box1">この段落の<br>
上下左右の余白は、25pxです。</p>
<hr>
<p class="box2">この段落の<br>
上下左右の余白は、50pxです。</p>
<hr>
<p class="box3">上が10px、<br>
左右が20px、下に50pxの余白を指定しています。</p>
<hr>
</body>
</HTML>
|
E横幅と高さをを指定する
widthプロパティでボックスの横幅を、heightプロパティでボックスの高さをそれぞれ指定することが出来ます。
大きさを設定する値には、数値にptなどの単位をつけて指定するほか、パーセントや、キーワードのautoで指定します。
ソースコード |
<HTML>
<head>
<title>ボックスの枠線の色</title>
<style type="text/css">
<--
body {background-color:#ffffe0;}
p { background-color:yellow; }
.box1 { width:100px; height:100px; }
.box2 { width:200px; height:50px; }
-->
</style>
</head>
<body>
<p class="box1">
この段落の横幅は、100pxで
高さは、100pxです。</p>
<hr>
<p class="box2">
この段落の横幅は、200pxで
高さは、50pxです。</p>
<hr>
</body>
</HTML>
|