スタイルシートもまっ青？な文字の重ねあわせ

注：NN3以上またはIE3(Windows)以外のブラウザではテーブルを使った文字の重ねあわせはうまくいかない事が多いです。

ス

タ

イ

ル

シ

ー

ト

も

ま

っ

青

？

ス

タ

イ

ル

シ

ー

ト

も

ま

っ

青

？

色の違う文字を重ねあわせて、立体のような効果を出しています。

これを応用すると、白抜き文字も作れます。

スタイルシートもまっ青？

スタイルシートもまっ青？

重なり合いを調節することで、影のような効果を出しています。

スタイルシートもまっ青？

スタイルシートもまっ青？

1－1 あ 1－2

2－1 あ

→

あ

あ

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="2" rowspan="2"><font size="7" color="#000000">あ</font></td>
<td height="5"></td>
</tr>
<tr>
<td><font size="7" color="#ffff00">あ</font></td>
</tr>
</table>

↑こうなっています。黒い「あ」の入ったセル1－1と、黄色い「あ」の入ったセル2－1の高さをセル1－1でずらし、黒い「あ」の入ったセル1－1の幅を文字がはみ出るほど狭くします。
セル1－1のrowspanは2です。
IE3では一つのセルで全角文字を一文字しか重ねあわせられません。

1－1 さ 1－2 さ

→

ささ

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="4"><font size="7" color="#000000">さ</font></td>
<td><font size="7" color="#ffff00">さ</font></td>
</tr>
</table>

↑セルの高さをずらさなくても同じような効果が期待できます。

複数の文字をならべる時はこうします。

1－1 あ 1－2 1－3 か 1－4

2－1 あ 2－2 か

→

あか

あか

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="1" rowspan="2"><font size="7" color="#000000">あ</font></td>
<td height="5"></td>
<td width="1" rowspan="2"><font size="7" color="#000000">か</font></td>
<td height="5"></td>
</tr>
<tr>
<td><font size="7" color="#ff0000">あ</font></td>
<td><font size="7" color="#ff0000">か</font></td>
</tr>
</table>

違う文字を重ねあわせるとこんな事もできます。

1－1 ○ 1－2 秘

→

○ 秘

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="12"><font size="7" color="#ff0000">○</font></td>
<td><font size="3" color="#ff0000">秘</font></td>
</tr>
</table>

重なり合いを調節するには、

テーブルのcellpaddingを調節する
テーブルのcellspacingを調節する
セルのwidthを調節する
セルのheightを調節する

以上の四つがあります。
全体のバランスを調節するときはcellpaddingやcellspacingを使います。

背景色を設定するときは、重ねあわせ文字（テーブル）をテーブルに入れて背景色をつけます。
重ねあわせ文字のテーブルで背景色を設定するとネットスケープナビゲータで重ねあわせの表示がうまくいかない事があります。

重ねあわせ文字のテーブルで背景色を設定した場合

重
	重

<table border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td width="2" rowspan="2"><font size="7" color="#000000">重</font></td>
<td height="5"></td>
</tr>
<tr>
<td><font size="7" color="#ffff00">重</font></td>
</tr>
</table>

テーブルに入れて背景色を設定した場合

重

重

<table bgcolor="#ffffff">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="2" rowspan="2"><font size="7" color="#000000">重</font></td>
<td height="5"></td>
</tr>
<tr>
<td><font size="7" color="#ffff00">重</font></td>
</tr>
</table>
</td>
</tr>
</table>

いろいろな影

1-1表

1-2表

→

表

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="7" rowspan="2"><font size="7" color="#000000">表</font></td>
<td><font size="7" color="#ffff00">表</font></td>
</tr>
</table>

1-1	1-2示
2-1示

→

	示
示

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="0"></td>
<td rowspan="2"><font size="7" color="#000000">示</font></td>
</tr>
<tr>
<td width="7"><font size="7" color="#ffff00">示</font></td>
</tr>
</table>

1-1サ	1-2
	2-1サ

→

サ
	サ

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="7" rowspan="2"><font size="7" color="#000000">サ</font></td>
<td height="13"></td>
</tr>
<tr>
<td><font size="7" color="#ffff00">サ</font></td>
</tr>
</table>

1-1	1-2ン
2-1ン

→

	ン
ン

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="13"></td>
<td rowspan="2"><font size="7" color="#000000">ン</font></td>
</tr>
<tr>
<td width="7"><font size="7" color="#ffff00">ン</font></td>
</tr>
</table>

1-1

1-2

スペーサー

プ

2-1プ

→

プ

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="0"></td>
<td rowspan="2">
<table border="0" cellpadding="0" cellspacing="0" with="1" height="16">
<tr><td><spacer type="block" width="1" height="1"></td></tr>
</table>
<font size="7" color="#000000">プ</font></td>
</tr>
<tr>
<td width="7"><font size="7" color="#ffff00">プ</font></td>
</tr>
</table>

影になる文字の高さを調節するのにスペーサータグの入ったテーブルを使っています。
スペーサータグはIEでは認識されないのでテーブルも併用します。
同じ理由で文字の高さ調節は、スペーサータグの入ったテーブルの高さを設定する事でおこないます。

1-1

スペーサー

ル 1-2ル

→

ルル

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="7">
<table border="0" cellpadding="0" cellspacing="0" with="1" height="16">
<tr><td><spacer type="block" width="1" height="1"></td></tr>
</table>

<font size="7" color="#000000">ル</font></td>
<td><font size="7" color="#ffff00">ル</font></td>
</tr>
</table>

以下のように、セルのheightとvalignを使っても同じ効果を出す事ができます。

1-1さ

1-2さ

→

さ

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="7" height="50" rowspan="2" valign="top"><font size="7" color="#000000">さ</font></td>
<td><font size="7" color="#ffff00" valign="bottom">さ</font></td>
</tr>
</table>

1-1	1-2ん
2-1ん

→

	ん
ん

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="0"></td>
<td height="50" rowspan="2" valign="top"><font size="7" color="#000000">ん</font></td>
</tr>
<tr>
<td width="7" valign="bottom"><font size="7" color="#ffff00">ん</font></td>
</tr>
</table>

1-1	1-2ぷ
2-1ぷ

→

	ぷ
ぷ

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="0"></td>
<td height="60" rowspan="2" valign="bottom"><font size="7" color="#000000">ぷ</font></td>
</tr>
<tr>
<td width="7" valign="top"><font size="7" color="#ffff00">ぷ</font></td>
</tr>
</table>

1-1る

1-2る

→

る

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="7" height="50" rowspan="2" valign="bottom"><font size="7" color="#000000">る</font></td>
<td><font size="7" color="#ffff00" valign="top">る</font></td>
</tr>
</table>

テーブルタグ実験室

∧∧
(◎←)
((( ▽ )))
- -

This page hosted by
Get your own Free Home Page