境界線いろいろ

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

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
  td.samp1 { border: solid  12px #9999ff; }
  td.samp2 { border: double 12px #9999ff; }
  td.samp3 { border: dashed 12px #9999ff; }
  td.samp4 { border: dotted 12px #9999ff; }
  td.samp5 { border: groove 12px #9999ff; }
  td.samp6 { border: ridge  12px #9999ff; }
  td.samp7 { border: inset  12px #9999ff; }
  td.samp8 { border: outset 12px #9999ff; }
  td.samp9 { border: none   12px #9999ff; }
-->
</style>
</head>
<body>
<table border="1">
 <tr>
  <td class="samp1">○</td>
  <td class="samp2">×</td>
  <td class="samp3">○</td>
 </tr>
 <tr>
  <td class="samp4">×</td>
  <td class="samp5">○</td>
  <td class="samp6">×</td>
 </tr>
 <tr>
  <td class="samp7">○</td>
  <td class="samp8">×</td>
  <td class="samp9">×</td>
 </tr>
</table>
</body>
</html>

表示サンプル

別窓でサンプルが開きます
注）サンプルは見やすくするためにセルの大きさを指定しています。

解説

ヘッダ内の記述にて、「TD」タグの「samp1」（名前は自由に付けてください）等に関しての表示方法を指定しています。それぞれ個別に、

<td style="border: solid 12px #9999ff;" >○</td>

のように記述をすることも出来ます。「border」を使用することにより、画像の周りの線をいろいろと変更することができます。スタイル、太さ、色を任意の順番にスペースで区切って指定をします。ただし、「border」では上下左右の線を個別に指定することはできません。もし、個別に上下左右の線をいろいろと変更したい場合は

をそれぞれ使用してください（記述方法は「border」と同様です）。

スタイルに関する指定

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

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

線の太さに関する指定

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

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

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

線の色に関する指定

色の指定の際にはＲＧＢカラーを使用してください（ＲＧＢカラーの詳細はこちらを参照ください）。