たのしいタグ　Ｎｏ．２

ＨＯＭＥ│エトセトラ│シネマ

た　の　し　い　　タ　グ
[２]

注意！

タグ・ソースはここではスペース、アルファベットとも全角で
表記していますが、もしあなたが実際にお使いになるなら
必ず半角をご使用ください。

＊

公開禁止のタグを気づかずに載せているかもしれません。
そのような場合ご一報ください。すぐ撤去いたします。
（トップページ下方に、連絡用の送信ボタンがあります。）

　水平の区切りの線を引くタグ

　区切り線のタグは知っているととても便利で、私も始終使うのですが、簡単すぎて、すぐ忘れてしまうのもこのタグです。
　＜ｈｒ＞だけはさすがに覚えていますが、「太さ」や「長さ」はそのつど「？」と思い、＜ｈｒ＝２＞とか＜ｈｒ＝６５％＞とかやって見ては、反映されずあわてます。
　そこでこの際、簡単だからと見くびらず、きちんとメモすることにしました。

　【サンプル】①　まずは、なんにもなしの、基本の線です。
　　

　ソース
　　＜ｈｒ＞　　ほんとに簡単、これだけです。なお、この時の線の太さは自動で「２」に設定されています。

　　　　　　↓

　【サンプル】②　線の長さはｗｉｄｔｈで指定します。

Ａ
Ｂ

　　
　ソース
　　Ａ　＜ｈｒ　ｗｉｄｔｈ＝"５００"＞　　「ピクセル数」による指定
　　Ｂ　＜ｈｒ　ｗｉｄｔｈ＝"６５％"＞　　「％」による指定

　「ピクセル数」はいわば絶対値、「％」は相対値になります。「％」はブラウザによる巾の違いに左右されませんし、「ｔａｂｌｅ」のなかに書く時は、「ｔａｂｌｅ」の巾のなかで調整されるので、「ピクセル数」より使いやすい気がしています。
　なお、サンプルの区切り線の引いてある「セル」巾は「５４０」です。Ａ、Ｂそれぞれの区切り線の長さを比べて見てください。違いがお分かりでしょう。

　　　　　　↓

　【サンプル】③　線の色はｃｏｌｏｒで指定します。
　　

　ソース
　　＜ｈｒ　ｃｏｌｏｒ＝"ｔｏｍａｔｏ"＞　私の好きなｔｏｍａｔｏという色にしてみました。

　　　　　　↓

　【サンプル】④　線の太さはｓｉｚｅで指定します。

Ａ
Ｂ
Ｃ

　ソース
　　Ａ　＜ｈｒ　ｓｉｚｅ＝１＞　　　Ｂ　＜ｈｒ　ｓｉｚｅ＝３＞　　　Ｃ　＜ｈｒ　ｓｉｚｅ＝５＞

　　　　　　↓

　【サンプル】⑤　それでは全部を組み合わせて、決めの線といきましょう。
　

　ソース
　　＜ｈｒ　ｗｉｄｔｈ＝"８５％"　ｓｉｚｅ＝３　ｃｏｌｏｒ＝"＃６６３３ｆｆ"＞

　色は私の好きな「ラベンダー」の濃い目の色にしてみました。
　「巾」の８５％というのは、ブラウザの幅に対してですので、あなたのブラウザがどんな大きさでも、
その８５％の長さで表示されているはずです。

▲「上に戻る」

　細い枠線の表を作成するタグ

　ふつう、表の枠線の太さはｂｏｒｄｅｒで指定しますが、この方法で描いた枠線は立体的な感じがして、
ｂｏｒｄｅｒ＝"１" を指定しても実際には枠線は細くなりません。しかし、ｃｅｌｌｓｐａｃｉｎｇというタグを使えば、
細い枠線がかけることが分かりました。　　それでは、レッツ・ゴー♪　(^ ^)

　【サンプル】
　まず、ふつうに描いた場合の「表」です。

Ａ

Ｂ

Ｃ

Ｄ

│
↓ 　次は、ｃｅｌｌｓｐａｃｉｎｇ　タグを使った「表」です。

Ａ

Ｂ

Ｃ

Ｄ

　ソース
＜ｔａｂｌｅ　ｂｏｒｄｅｒ＝０　ｂｇｃｏｌｏｒ＝ｆｏｒｅｓｔｇｒｅｅｎ　ｃｅｌｌｓｐａｃｉｎｇ＝1 　ｗｉｄｔｈ＝○○○　ｈｅｉｇｈｔ＝×××＞
＜ｔｒ　ｂｇｃｏｌｏｒ＝"＃ｆｆｆｆｆｆ"＞
＜ｔｄ　ｗｉｄｔｈ＝２５％　ａｌｉｇｎ＝"ｃｅｎｔｅｒ"＞Ａ＜／ｔｄ＞
＜ｔｄ　ｗｉｄｔｈ＝２５％　ａｌｉｇｎ＝"ｃｅｎｔｅｒ"＞Ｂ＜／ｔｄ＞
＜ｔｄ　ｗｉｄｔｈ＝２５％　ａｌｉｇｎ＝"ｃｅｎｔｅｒ"＞Ｃ＜／ｔｄ＞
＜ｔｄ　ｗｉｄｔｈ＝２５％　ａｌｉｇｎ＝"ｃｅｎｔｅｒ"＞Ｄ＜／ｔｄ＞
＜／ｔｒ＞＜／ｔａｂｌｅ＞
　　（ｗｉｄｔｈ＝２５％は表を４つのセルに分けたため、align="center" はＡ・Ｂ・Ｃ・Ｄの文字を各セルの中央に置きたかった
　　　ために、便宜上記入したタグです。）

　　◇ ＜ｔａｂｌｅ＞のｂｇｃｏｌｏｒには枠につけたい色を指定します。
　　　　私は「黒」ではちょっと味気ないので、「ｆｏｒｅｓｔｇｒｅｅｎ」を記入してみました。
　　◇ ｃｅｌｌｓｐａｃｉｎｇは数字が大きいほど、枠線が太くなります。
　　◇ 大切なのは＜ｔｒ＞のｂｇｃｏｌｏｒ＝"＃ｆｆｆｆｆｆ" です。
　　　　これを指定しないと、（下）のように全体が「ｆｏｒｅｓｔｇｒｅｅｎ」の色になってしまいます。

Ａ

Ｂ

Ｃ

Ｄ

　　◇ ｂｇｃｏｌｏｒ＝"＃ｆｆｆｆｆｆ" を各セル（ｔｄ）のなかに書いても同じ効果が得られます。
　　　　さらに、（下）のように、「白」（"＃ｆｆｆｆｆｆ"）以外の色を使えば、セルの区分けに利用できますね。

　【サンプル】

アルファベット	Ａ	Ｂ	Ｃ
あいうえお	あ	い	う

　ソース
＜ｔａｂｌｅ　ｂｏｒｄｅｒ＝０　ｂｇｃｏｌｏｒ＝ｃｈｏｃｏｌａｔｅ　ｃｅｌｌｓｐａｃｉｎｇ＝２　ｗｉｄｔｈ＝○○○　ｈｅｉｇｈｔ＝×××＞
＜ｔｒ＞＜ｔｄ　ｂｇｃｏｌｏｒ＝"＃ｆｆｆｆｂｂ"　ｗｉｄｔｈ＝４０％　ａｌｉｇｎ＝"ｃｅｎｔｅｒ"＞アルファベット＜／ｔｄ＞
＜ｔｄ　ｂｇｃｏｌｏｒ＝"＃ｆｆｆｆｆｆ"　ｗｉｄｔｈ＝２０％　ａｌｉｇｎ＝"ｃｅｎｔｅｒ"＞Ａ＜／ｔｄ＞
＜ｔｄ　ｂｇｃｏｌｏｒ＝"＃ｆｆｆｆｆｆ"　ｗｉｄｔｈ＝２０％　ａｌｉｇｎ＝"ｃｅｎｔｅｒ"＞Ｂ＜／ｔｄ＞
＜ｔｄ　ｂｇｃｏｌｏｒ＝"＃ｆｆｆｆｆｆ"　ｗｉｄｔｈ＝２０％　ａｌｉｇｎ＝"ｃｅｎｔｅｒ"＞Ｃ＜／ｔｄ＞＜／ｔｒ＞

＜ｔｒ＞＜ｔｄ　ｂｇｃｏｌｏｒ＝"＃ｆｆｆｆｂｂ"　ａｌｉｇｎ＝"ｃｅｎｔｅｒ"＞あいうえお＜／ｔｄ＞
＜ｔｄ　ｂｇｃｏｌｏｒ＝"＃ｆｆｆｆｆｆ"　ａｌｉｇｎ＝"ｃｅｎｔｅｒ"＞あ＜／ｔｄ＞
＜ｔｄ　ｂｇｃｏｌｏｒ＝"＃ｆｆｆｆｆｆ"　ａｌｉｇｎ＝"ｃｅｎｔｅｒ"＞い＜／ｔｄ＞
＜ｔｄ　ｂｇｃｏｌｏｒ＝"＃ｆｆｆｆｆｆ"　ａｌｉｇｎ＝"ｃｅｎｔｅｒ"＞う＜／ｔｄ＞＜／ｔｒ＞
＜／ｔａｂｌｅ＞

　　◇ 今度は枠の色（ｂｇｃｏｌｏｒ）は「ｃｈｏｃｏｌａｔｅ」に、枠線の太さ（ｃｅｌｌｓｐａｃｉｎｇ）は「２」にして見ました。
　　◇ 左端のセル（ｔｄ）だけ、色を薄く着けて見ました。サンプルの色は「＃ｆｆｆｆｂｂ」という色です。

　このタグを使うことで、ずいぶん「表｣の使い勝手がよくなったような気がします。
　私は今のところ、【とまとの年間ベスト５】はあえて半透明の立体的な感じを生かして、何も手を加えない「表」、【５０音表】や【国名表】はこのタグを使って、枠の色は「ｓａｎｄｙｂｒｏｗｎ」、枠線の太さは「１」にした「表」、という具合に使い分けています。

　（「付録」です）
　このタグを何重か入れ子のように組み合わせることで、すっきりしたページを作ることもできますね。
中央に写真を入れたりしても、素敵になりそうです。

夏の葉の
ホームページ

へようこそ！

これからも
どうぞ遊びに
おいでくださいね。

　ソース
＜ｔａｂｌｅ　ｗｉｄｔｈ＝７００　ｈｅｉｇｈｔ＝４００　ｂｇｃｏｌｏｒ＝＃９ｆ６０６０＞
＜ｔｒ＞＜ｔｄ　ａｌｉｇｎ＝"ｃｅｎｔｅｒ"　ｖａｌｉｇｎ＝"ｍｉｄｄｌｅ"＞
（これは背景部分のタグですので、「表の枠線」のタグとは関係ありません。）

＜ｔａｂｌｅ　ｂｏｒｄｅｒ＝０　ｂｇｃｏｌｏｒ＝８０００００　ｃｅｌｌｓｐａｃｉｎｇ＝５　ｗｉｄｔｈ＝３００　ｈｅｉｇｈｔ＝３５０＞
＜ｔｒ＞＜ｔｄ＞
＜ｔａｂｌｅ　ｂｏｒｄｅｒ＝０　ｂｇｃｏｌｏｒ＝＃ｂｆ８０４０　ｃｅｌｌｓｐａｃｉｎｇ＝８　ｗｉｄｔｈ＝１００％　ｈｅｉｇｈｔ＝１００％＞
＜ｔｒ　ｂｇｃｏｌｏｒ＝＃ｆｆｆｆｂｂ＞＜ｔｄ　ａｌｉｇｎ＝"ｃｅｎｔｅｒ"　ｖａｌｉｇｎ＝"ｍｉｄｄｌｅ"＞

　　（夏の葉のホームページへようこそ！
　　これからもどうぞ遊びにおいでくださいね。）

＜／ｔｄ＞＜／ｔｒ＞＜／ｔａｂｌｅ＞
＜／ｔｄ＞＜／ｔｒ＞＜／ｔａｂｌｅ＞
＜／ｔｄ＞＜／ｔｒ＞＜／ｔａｂｌｅ＞

　◇ 入れ子にする時は《ｗｉｄｔｈ》《ｈｅｉｇｈｔｈ》を「１００％」にすることに要注意！
　◇ 《ａｌｉｇｎ》は「左右」、《ｖａｌｉｇｎ》は「上下」の「中央」に設定するために書いているタグです。
「表の枠線」のタグとは直接関係ありません。

それでは最後に一番シンプルな枠線を・・・。ただ単に四角い形。
でもこれが今のところ一番よく使っているタグなんですよ。

　【サンプル】

　ソース
＜ｔａｂｌｅ　ｂｏｒｄｅｒ＝０　ｂｇｃｏｌｏｒ＝ｓａｎｄｙｂｒｏｗｎ　ｃｅｌｌｓｐａｃｉｎｇ＝１　ｗｉｄｔｈ＝４００　ｈｅｉｇｈｔ＝３５０＞
＜ｔｒｂｇｃｏｌｏｒ＝ｗｈｉｔｅ＞＜ｔｄａｌｉｇｎ＝”ｃｅｎｔｅｒ” ｖａｌｉｇｎ＝”ｍｉｄｄｌｅ”＞

　　（愛犬ルビーの写真）

＜／ｔｄ＞＜／ｔｒ＞＜／ｔａｂｌｅ＞

うひゃ、私がいうのもなんだけど、ルビー、なんていいお顔してるんだろう～♪

▲「上に戻る」