スタイルシートを使えば画像ファイルを使わなくても、上のような影つき文字を書くことが出来ます。
----------▼スタイルシート
DIV.main{
position: absolute;
z-index: 20;
height: 1.2em;
width: 600px;
padding: 0.1em 0.1em 0.1em 0.1em;
font-size: 2em;
color: #ff66ff;
}
DIV.sub{
z-index: 10;
height: 1.2em;
width: 600px;
padding: 0.1em 0.1em 0.1em 0.15em;
font-size: 2em;
color: #000099;
background-color: #ffffcc;
border-style: none solid solid none;
border-width: 2px;
border-color: #0000ff;
}
----------▲
----------▼ＨＴＭＬ
<DIV class="main">ヤキトリのカンヅメ</DIV>
<DIV class="sub">ヤキトリのカンヅメ</DIV>
----------▲
|
▼----------メインの文字 ←DIVブロックがその位置でページの上に浮く。 ←Ｚ座標。subより大きい値なので、より手前に表示される。 ←高さ：subと同じにする。 ←横幅：subと同じにする。 ←文字の大きさ：subと同じにする。 ▼----------背景の文字 ←Ｚ座標。mainより小さい値なので、より奥に表示される。 ←高さ：subと同じにする。 ←横幅：subと同じにする。 ←左のpaddingだけmainの値より大きいので、右にずれる。 ←文字の大きさ：subと同じにする。 ▼----------ＨＴＭＬ ←手前の文字にmainを指定 ←奥の文字にsubを指定 |
ポイントとしては、まず、DIVブロックを重ねることです。この時、文字がずれないように注意が必要です。topとleftのborderの有無はmainとsubで共通にします。paddingの微調整でずれないようにも出来ますが難しいです。まあ、positionの指定は難しいと思うので色々とやってみてください。