特定のコンテンツを罫線(border)で囲み、修飾したい場合はどうすれば?

特定のコンテンツを罫線で囲み、修飾したい場合は、次のように行います。

最初に罫線で囲みたいコンテンツを
<div>
</div>
で表してグループ化する。

この範囲を特定できるようにするため、id属性(その名まえは半角英数でなければならない)で指定する。(例:<div id=”container”>)

続いて、罫線を表示するためにスタイルシートに下記のように記述する。

div#container {border-style: solid;
border-width: 2px;
border-color: #bbffaa}

上記のものを一つにまとめて記述することも可能。
div#container {border: solid 2px #bbffaa}

罫線の内側に余白を入れたい場合は、
div#container {border: solid 2px #bbffaa;
padding: 20px}
のように記述する。

これで、上下左右に20pxの余白のある一つの表ができあがる。

なお、div#containerのタグを省略し、#container と記述しても良い。

solidは実線を表すが他にも下記のものがある。

none 罫線を表示しない
dotted 点線
dashed 破線
double 二重線
groove 立体的な線の一種
ridge 立体的な線の一種
inset 立体的な線の一種
outset 立体的な線の一種

下だけに罫線をつけたい場合は、下記のように記述する。
h3 {font-size: 0.875em;
border-bottom: solid 2px #66aa66}

border-bottom以外に、

border-top
border-right
border-left

がある。

なお、罫線で囲んだ部分の背景に色をつける場合は、
div#container {border: solid 2px #bbffaa;
padding: 20px;
background-color: #ffffff}
のように記述する。

 

 

 

 

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA