ホームページ作成/テキストの配置・装飾 (HTML,CSS)

画像を使わずに文字に影を付ける

画像にすることなく、文字に影を付ける方法をご紹介!実体は画像ではなく普通のテキスト(文字)ですから、作成は楽ですし書き換えも楽々です。実現は非常に簡単ですので、ぜひお試しを。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

画像を使わずに文字に影を付けよう

見出しに使う場合など、周囲よりも文字を目立たせる方法として、影を付けたいと思うこともあるでしょう。
しかし、影を付けたいがために文字を画像にしてしまうのは、あまり好ましくはありません。できるだけ軽く作ったとしても、テキストより読み込みに時間がかかることは間違いありませんし、文字の書き換えが必要になったときには画像を作成し直す必要がありますから。

IE6.0での画面イメージ Internet Explorerの拡張機能を使えば、画像化することなく、文字に影を付けることができます。
独自拡張機能なので、残念ながらInternet Explorer以外のブラウザでは表示されません。しかし、ほかのブラウザでは「普通の文字」として表示されるだけですから、少なくとも読めなくなるようなことは起こりません。

今回は、文字を画像にすることなく、文字に影を付ける方法をご紹介致します。

表示例

以下に、表示例を掲載しておきます。Internet Explorer 5.x以上であれば、下図のように、「文字」や「文字を囲んでいる枠」に影が付いて見えます。

Internet Explorerでの表示例

Internet Explorerでの表示例

文字そのものに影を付けるだけでなく、文字を囲んだ枠に影を付けることも簡単です。

実現方法

実現方法は、非常に簡単です。 最も短く記述しようと思えば、ソースに1行追加するだけで済ますことも可能です。

それでは次のページへ →

  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます