画像の周りの線

HTMLを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<p><img src="../img/smp.gif" border="1" alt="サンプル画像" width="150" height="150"></p>
<p><img src="../img/smp.gif" border="15" alt="サンプル画像" width="150" height="150"></p>
</body>
</html>

表示サンプル

サンプル画像

解説

「IMG」タグ内に「border」属性として指定をします。見てもらっての通りピクセル指定にて線の太さを決めることが出来ます。線の色を変えたり線種を変えたりする方法は、次の「画像の周りの線いろいろ」を参照下さい。

ＣＳＳを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
img.samp1 { border-width: 3px; }
img.samp2 { border-width: 3px 6px; }
img.samp3 { border-width: 3px 6px 9px; }
img.samp4 { border-width: 3px 6px 9px 12px; }
-->
</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>
</body>
</html>

表示サンプル

サンプル画像

解説

スタイルシートを使用しても画像の周りに線を表示することが出来ます。HTMLでの記述と違い、スペースで区切り複数の値を指定することによって上下左右を異なった幅にすることもできます。

上記例で分かるかと思いますが、

値を1つ指定：上下左右が指定幅
値を2つ指定：記述した順に上下、左右が指定幅
値を3つ指定：記述した順に上、左右、下、が指定幅
値を4つ指定：記述した順に上、右、下、左が指定幅

となります。

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

thin ：細い
medium ：普通
thick ：太い

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