Home | 目次 | Prev | 枠線表示 | Next

■ 枠線表示の応用

ほとんどの要素に対して、一様に枠線の表示がスタイルシートで可能になります。枠線の形や位置、色などを指定することによって、工夫次第では枠線らしくない面白い効果を表現できます。

当サイト内でも実に様々な枠線を用いていることにお気づきになったことと思います。

■ 枠線の様式

枠線のスタイルは以下の８通りの形状が用意されています。

（分かりやすくするために色をつけました。）

solid直線
double二重線
dotted点線
dashed破線
groove溝線
ridge稜線
inset窪んだ感じの線
outset隆起した感じの線

使用サンプル

h1 { border-style: double }

サンプルの結果

■ 枠線の幅

枠線の幅を決めるスタイルシートは以下の通りです。値には 長さを決める単位と、独自に決められたものが設定されています。ただし、枠線の様式と一緒に指定する必要があります。

（分かりやすくするために色をつけました。）

thin薄い幅の線
thick太い幅の線
mediummediumサイズの幅の線
5pxピクセル単位の幅の線

使用サンプル

h1 { border-width: thick; border-style: solid }

サンプルの結果

■ 枠線の表示位置

要素中に枠線の表示位置を指定します。通常、枠線指定は初期値で上下左右に表示されますが、この設定によって、枠線を表示したい場所を指定します。

また、この設定は、枠線の幅と色も一緒に指定することが可能です。

border-top要素の上側に枠線を表示
border-right要素の右側に枠線を表示
border-left要素の左側に枠線を表示
border-bottom要素の下側に枠線を表示
boder要素の上下左右に枠線を表示

使用サンプル

h1 { border-bottom: 3px double #fc0 }

サンプルの結果

■ 枠線の応用

枠線の形状、幅、位置、そして色を組み合わせることによって、テキストベースで効果的な見栄えを演出することができます。ここでは、サンプルの一例を紹介します。

CSS
h1 { border-left: 3em solid #090; border-right: 3em solid #090; 
     border-bottom: 1px solid #090; border-top: 1px solid #090;
     color: #090; text-align: center; padding: 5px }

HTML
<h1>初心者のためのホームページ作り</h1>
表示結果

初心者のためのホームページ作り

CSS
img { border: 15px inset #fc0 }

HTML
<img src=images/sakura.jpg" width="250" height="180" alt="京都の桜">

京都の桜

This Page is HTML4.01 Valid! 初版公開日 2002年12月4日
Copyright(C) 2002〜2004 banban@scollabo.com