TOPページ >  段落の表示(表示位置、表示/非表示など...) > 表示位置の指定を使って文字を影付きにする1

表示位置の指定を使って文字を影付きにする1

P、DIV などのブロックタグで括られた文字や文章などを、表示位置を指定を使って 影付きのように見せることができます。

文字に影を付けるには専用のスタイル指定がありますが、Netscape が対応していません。この方法は、 非対応ブラウザでも見映えを損なわないようにするのに有効です。

影付きSAMPLE
影付きSAMPLE

このサンプルは、2つの段落に同じ文字を表示し、2つ目の段落が1つ目の段落に覆い被さるように表示位置を指定した上、文字色を変えることで、1つ目の段落の影のように見せています。

このため、Netscape などのフィルター効果が有効でないブラウザでも同じように見せることができます。

このソースは、次のようになります。

<style type="text/css">
<!--
.sampleover {
font-size:24px;
font-weight:bold;
color:#FFD700;
line-height:1em;
position:relative;
top:-27px;
left:-3px;
}
.sampleunder {
font-size:24px;
font-weight:bold;
line-height:1em;
color:#FF8C00;
}
-->
</style>

<div class="sampleunder">影付きSAMPLE</div>
<div class="sampleover">影付きSAMPLE</div>

『表示位置を指定する』の基本は、こちらをご覧ください。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
文章の表示方法を指定する(ブロック/インライン/非表示)
文章の表示順序(奥行き)を指定する
表示位置の指定を使って文字を影付きにする1
タグで括られた文字や文章、画像などの表示位置を指定する
段落の表示位置を指定する際の指定方法
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス