画像の周りの線
CSSを使用した記述方法
記述方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <style type="text/css"> <!-- img.samp1 { border: solid 12px #9999ff; } img.samp2 { border: double 12px #9999ff; } img.samp3 { border: dashed 12px #9999ff; } img.samp4 { border: dotted 12px #9999ff; } img.samp5 { border: groove 12px #9999ff; } img.samp6 { border: ridge 12px #9999ff; } img.samp7 { border: inset 12px #9999ff; } img.samp8 { border: outset 12px #9999ff; } --> </style>> </head> <body> <p><img src="../img/smp.gif" class="samp1" alt="サンプル画像" width="150" height="150"><p> <p><img src="../img/smp.gif" class="samp2" alt="サンプル画像" width="150" height="150"><p> <p><img src="../img/smp.gif" class="samp3" alt="サンプル画像" width="150" height="150"><p> <p><img src="../img/smp.gif" class="samp4" alt="サンプル画像" width="150" height="150"><p> <p><img src="../img/smp.gif" class="samp5" alt="サンプル画像" width="150" height="150"><p> <p><img src="../img/smp.gif" class="samp6" alt="サンプル画像" width="150" height="150"><p> <p><img src="../img/smp.gif" class="samp7" alt="サンプル画像" width="150" height="150"><p> <p><img src="../img/smp.gif" class="samp8" alt="サンプル画像" width="150" height="150"><p> </body> </html>
表示サンプル
解説
「border」を使用することにより、画像の周りの線をいろいろと変更することができます。スタイル、太さ、色を任意の順番にスペースで区切って指定をします。ただし、「border」では上下左右の線を個別に指定することはできません。もし、個別に上下左右の線をいろいろと変更したい場合は
- 上の線に関する指定:border-top
- 左の線に関する指定:border-left
- 右の線に関する指定:border-right
- 下の線に関する指定:border-bottom
をそれぞれ使用してください(記述方法は「border」と同様です)。
スタイルに関する指定
スタイルに関する指定は以下のキーワードのいずれかを指定します。
- none
- 線は表示されず、太さも0になります。表のセル等線が重なり合う場合は他の値が優先されます(初期値)。
- hidden
- solid
- 1本線で表示されます。
- double
- 2本線で表示されます。
- dashed
- 破線で表示されます。
- dotted
- 点線で表示されます。
- groove
- 立体的にくぼんだ線で表示されます。
- ridge
- 立体的に隆起した線で表示されます。
- inset
- 上と左の線が暗く、下と右のボーダーが明るく表示されます。
- outset
- 上と左の線が明るく、下と右の線が暗く表示されます。
線の太さに関する指定
線の太さは単語もしくは数値で指定します。単語は
- thin :細い
- medium :普通
- thick :太い
を指定することができます。
ただし、単語で太さを指定した場合、実際に表示される太さはブラウザによって異なりますので注意が必要です。
線の色に関する指定
色の指定の際にはRGBカラーを使用してください (RGBカラーの詳細はこちらを参照ください)。