灰色背景がサンプルソース薄緑背景が実際の見た目
特にHTMLの方に記述することはありません。
普通にh1タグを使って見出しを書けばOKです。
border-left:8px solid #ffaa00;
これは、h1タグ内の文字の左側に、太さ8pxで色コードが#ffaa00の直線を表示するという意味です。
border-leftというのが、:より右の指定を見出し左側の枠線のみに適用するという意味。
8pxが太さ、solidが直線、#ffaa00が線の色を表しています。
なので、8pxの数字を変えれば線の太さも変わり、#ffaa00を別の色コードにすれば線の色が変わります。
例)
border-left:10px solid red;
見出しの左側に太さ10pxの赤い直線を表示
灰色背景がサンプルソース薄緑背景が実際の見た目
| セル1 | セル2 |
| セル3 |
出っ張ったテーブルを表示するには、左上から光が当たり右と下に影が出来ていると錯覚させる方法が一般的です。
これにより、平面的なテーブルではなく出っ張って見える立体的なテーブルが擬似的に作れます。
やり方としては、左と上の枠線より1px以上太い枠線を右と下に指定します。さらに、右と下の枠線を山線にすると効果が上がります。
ここでの例では、左と上の枠線は太さ1pxの実線、右と上の枠線は太さ3pxの山線にしてあります。
出っ張って見える様に表示したいテーブルにのみ適用させる為、テーブルにclassを指定します。
ここでは、<table class=”dekotbl”>としています。
■.dekotbl {～}
border-collapse:collapse;
これは、全ての枠線をくっつけて表示するという意味です。詳細はテーブルの枠線をくっつけるへ。
border:1px solid gray;
これは、全ての枠線に「太さ1pxで灰色な実線を表示する」という意味です。詳細はテーブルに直線の枠線を表示するへ。
border-right:3px ridge gray; border-bottom:3px ridge gray;
これが今回のキモです。
右と下の枠線を「太さ3pxで灰色な山線にする」という意味になります。
具体的にはborder-right:～;が右の枠線指定。border-bottom:～;が下の枠線指定。
右枠線と下枠線それぞれに3px(太さ3px)、ridge(山線)、gray(灰色)というのを指定しています。
これにより、上で説明した右と下に影が出来たように見えるテーブルが出来上がります。
■.dekotbl td {～}
border:1px solid #000;
これは、全セルの枠線を太さ1pxで灰色な実線にするという意味になります。
灰色背景がサンプルソース薄緑背景が実際の見た目
| セル1 | セル2 |
| セル3 |
何もしない状態では、<td>と</td>の間に何も書いてない場合、その部分の枠線が表示されません。
でも、何も書かれていないセルも見た目上枠線を表示したいという時にお試し下さい。
空セルも枠線を表示したいテーブルにのみ適用させる為、テーブルにclassを指定します。
ここでは、<table class=”stbl”>としています。
empty-cells:show;
これは、空セルも表示するという意味です。そのまんまですね。
なので、枠線をくっつけたいテーブルにサンプルをコピー＆ペーストするだけでOKです。
但し、古いブラウザでは対応していないものもあります。
この指定はCSS2という規格で規定された内容なので、IE6以前はそれに対応していなかった為です。
ということで、IE6以前のブラウザでも空セルの枠線を表示したい場合は<td>と</td>の間に全角の空白を書くしかありません。
半角の空白では無効なのでご注意を。
灰色背景がサンプルソース薄緑背景が実際の見た目
| セル1 | セル2 |
枠線をくっつけたいテーブルにのみ適用させる為、テーブルにidを指定します。
ここでは、<table id=”ctbl”>としています。
border-collapse:collapse;
これは、隣り合う枠線と枠線を重ねるという意味です。
なので、枠線をくっつけたいテーブルにサンプルをコピー＆ペーストするだけでOKです。
灰色背景がサンプルソース薄緑背景が実際の見た目
| セル1 | セル2 |
点線枠を表示させたいテーブルにのみ適用させる為、テーブルにidを指定します。
ここでは、<table id=”dtbl”>としています。
border:1px dotted #000;
これは、太さ1ピクセルの#000色の点線を表示するという意味です。
1pxが太さ、dottedが点線、#000が線の色を表しています。
なので、1pxの数字を増やせば太い線に。#000を別の色コードにすれば線の色が変わります。
また、dottedをdashedに変えると、点線が荒い点線に変わります。(IEではあまり変化がありませんが)
例)
border:3px dotted red;
太さ3pxの赤い点線枠
なお、.dtbl, .dtbl th, .dtbl tdについてですが、これはidがdtblのテーブル全体、dtblのthタグ、dtblのtdタグ全てに{}内のものを適用するという意味です。
つまりは、テーブルの外枠、thタグの周りの枠、tdタグの周りの枠全てに点線枠を引きますよということになります。
同じ指定をする時は、,で区切って並べれば1箇所にまとめられるので、慣れてきたらこういう記述法を取り入れてみると良いでしょう。