画像の周りの線

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」と同様です)。

スタイルに関する指定

スタイルに関する指定は以下のキーワードのいずれかを指定します。

none
線は表示されず、太さも0になります。表のセル等線が重なり合う場合は他の値が優先されます(初期値)。
hidden
線は表示されず、太さも0になります。表のセル等線が重なり合う場合はこの値が優先されます
solid
1本線で表示されます。
double
2本線で表示されます。
dashed
破線で表示されます。
dotted
点線で表示されます。
groove
立体的にくぼんだ線で表示されます。
ridge
立体的に隆起した線で表示されます。
inset
上と左の線が暗く、下と右のボーダーが明るく表示されます。
outset
上と左の線が明るく、下と右の線が暗く表示されます。

線の太さに関する指定

線の太さは単語もしくは数値で指定します。単語は

  • thin :細い
  • medium :普通
  • thick :太い

を指定することができます。

ただし、単語で太さを指定した場合、実際に表示される太さはブラウザによって異なりますので注意が必要です。

線の色に関する指定

色の指定の際にはRGBカラーを使用してください (RGBカラーの詳細はこちらを参照ください)。