HTML TIPS & TRICKS 2001/04

枠線を制する

QUESTION 2　幾何学模様を描け！

　今度はテーブルの枠線を変更します。テーブルは複雑なレイアウトを行うために使われることが多く、 幾何学的なデザインを行うのにも使われます。しかし、そういったものはソースが複雑になってしまう事が多く、 慣れていないとソースを見て修正するのは大変です。
　そこで、テーブルタグは極力簡潔にして、その代わりに CSS2 を使って幾何学図形を描いてみましょう。

HTML TIPS
& TRICKS 


01 <TABLE class="colorTable">
02     <TR>
03         <TD class="greenCell1">HTML</TD>
04         <TD class="greenCell1">TIPS</TD>
05     </TR>
06     <TR>
07         <TD class="orangeCell">&amp;</TD>
08         <TD class="greenCell2">TRICKS</TD>
09     </TR>
10 </TABLE>

　このように、テーブル関係のタグにはclass属性しかありません。1行目の2つのセルは同じ設定、2行目の2つは色以外は同じ設定です。 


01 .colorTable
02 {
03     font-weight:bold;
04     font-family:sans-serif;
05     height:100px;
06     width:200px;
07     border-style:none;
08     border-collapse:collapse;
09     background-color:yellow;
10 }

　テーブル全体に対するスタイル設定です。

L03〜06

　フォントとテーブルのサイズの設定です。なくても構いません。

L07

　テーブルボーダーが表示されないようにしています。TABLE タグの border 属性がないのでこの行がなくても表示されないはずですが、 念のために付けてあります。

L08

　この行が一番重要で、テーブルセルの境界線(ボーダー)の扱いを設定しています。 このプロパティはCSS2から追加されたもので、 collaps と separate の2つの値があります。collaps のときはセルの境界線にボーダーが引かれ、 separate のときはそれぞれのセルの周りにボーダーが引かれます。
　別の言い方をすれば、隣り合ったセルがボーダーを共有するかどうかと言うことです。今回は collaps なので、ボーダーは共有されます。

　ボーダーを共有するということは部分的に重なるということで、どちらの設定を優先するかという問題が発生します。 競合が発生した場合は、次のようにして優先順位が決定されるとなっています。

  1. いかなる競合においても、'border-style'の値'hidden'は最優先する。この値が適用された箇所にはボーダーを表示しない。
  2. 'none'という値は最も優先度が低い。 その辺に関わるすべての要素についてボーダーのプロパティが'none'という値を取る場合に限って、ボーダーを表示しない。 （ただし、'none'は'border-style'の初期値であることに注意されたい）
  3. 'hidden'という値が全く指定されず、 なおかつ'none'以外の値が少なくとも1つ指定されている場合（要するに上記2項に該当しない場合）、 より幅が太いボーダーを優先する。 複数の候補が同じ幅である場合、ボーダーの種類に関する優先順序は以下の通り:
    'double'、'solid'、'dashed'、'dotted'、'ridge'、'outset'、'groove'、'inset'
  4. ボーダーの種類も幅も同じで色だけが異なる場合、セル要素に対する指定が最優先され、以下優先度が高い順に、行要素、 行グループ要素、列要素、列グループ要素、表要素となっている。

CSS2勧告文書の邦訳より引用

　これらの条件でも決まらない場合は、前にあるセルの設定が優先されるようです。感覚的にはむしろ逆のような気がしますが、 説明が見つかりませんでした。

　次に、border-style プロパティの値で決まります。今回 hidden という値が追加されました。 どちらも意味としては"表示しない"ですが、hidden のほうが強い意味になっています。 つまり、none は隣のセルの設定が none か hidden のときのみ表示されないのに対して、 hidden は隣の設定がどうであっても表示されません。

L09

　テーブル全体の背景色を設定しています。この値は TR や TD に継承されるので、セルの色も同じ色になります。 そこで、セルの色はそれぞれで設定しなおしています。 


01 .greenCell1
02 {
03     border-style:none double double;
04     border-color:#40B040;
05     border-width:20px;
06     background-color:white;
07 }

　セルの設定です。これは1行目の2つのセルのものです。他のセルの設定もほぼ同じなので、ソースコードと説明は省略します。

L03

　ボーダーの種類を上・左右・下で設定しています。このセルの場合は上のボーダーを無しにするので、最初のものだけ none にしています。 2行目のセルは最後が none になります。
　他の方向のボーダーはすべて double で、この場合は2重線になります。線の隙間は TABLE タグの背景色で塗りつぶされます。

　なお、TABLE タグの frame 属性の値を hsides にすることで、このプロパティの値を "double" だけで済ますことも出来ます。

L04〜05

　ボーダーの色と幅です。セルによって違います。

L06

　背景色が TABLE のものを継承しているので、セル自体の背景色を設定しています。

トップページ