HTMLを使って枠線を引くには、tableタグを重ねて設定するなど非常に長くHTML文を書く必要があります。
スタイルシートを使って要素のパディングの外側に境界線を引けば、HTMLをスリム化することが出来ます。]]>
スタイルシートでボーダーを引く場合、線の太さ・線の種類・線の色をプロパティを指定します。指定順番は特に決まりがなく、
省略も可能です。
線の太さは、「1px」「1pt」などの数値で設定するか、「thin(細い)」「medium（中間）」「thick（太い）」
であらわします。指定を省略する場合は太さはmediumがデフォルトとなります。
線の種類は以下の表のようになります。省略すると「none」が選択されます。
borderプロパティに指定できる線の種類
| 値 |
内容 |
| none |
境界線なし |
| dotted |
点線 |
| dashed |
破線 |
| solid |
実線 |
| double |
二重線 |
| groove |
窪みのように見える |
| ridge |
浮き出したように見える |
| inset |
立体的に窪んだように見える |
| outset |
立体的に浮き出したように見える |
線の色は、「#ffffff」のようなRGB値か「white」のような単語で指定します。省略した場合は、
要素の色と同じ色の線が引かれます。
スタイルシートでボーダーを引く
【書き方】
border-top:太さ 線の種類 色; border-bottom:太さ 線の種類 色;
border-left:太さ 線の種類 色; border-right:太さ 線の種類 色;
"スタイルシートでボーダーを引く"のサンプルはコチラをクリック
【スタイルシート】
body{margin: 0px;
background-image: url(http://www.1css.net/img/box2.gif);
}
.c1{
margin: 10px;
padding: 10px;
border-top: dotted 3px #ff0000;
border-bottom: dashed 3px #ff0000;
border-left: double 3px #00ff00;
border-right: solid 3px #00ff00;
}
.c2{
margin: 10px;
padding: 10px;
border-top: groove 3px;
border-bottom: ridge 3px;
border-left: inset 3px;
border-right: outset 3px;
}
【HTML本文】
<html>
<head>
<title>マージンをまとめて設定する。のサンプル</title>
<meta http-equiv="content-type" content="text/html">
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="http://www.1css.net/sample/405.css" type="text/css">
</head>
<body>
<p><font color="red">body要素のマージンを上下左右すべて0pxとしていますので、このように、ページの端々にテキストがぴったり引っ付いてしまいます。</font></p>
<p class="c1">この段落では、上のボーダーは3pxで赤色の点線(dotted)で、<br />下のボーダーは3pxで赤色の破線(dashed)で、<br />左のボーダーは3pxで緑色の二重線(double)で、<br />右のボーダーは3pxで緑色の実線(solid)で引いています。</p>
<p class="c2">この段落では、上のボーダーは3pxのgrooveで、<br />下のボーダーは3pxのridgeで、<br />左のボーダーは3pxのinsetで、<br />右のボーダーは3pxのoutsetで引いています。<br />境界線の色を指定しませんでしたので、文字色と同じ色の線が引かれています。</body>
</html>
|
]]>
