CSSで文字に影をつける・マウスを載せると画像が変わる

当サイトではレンタルサーバーの紹介を行なっていますが、その中で以下のようなボタンを使っています。

全て画像のように見えるかもしれませんが、これはCSSでテキストに影をつけて、背景として画像を読み込ませていて、マウスを載せると背景画像が変わるようにしてあります。

特に難しいことをやっているわけではありませんが、初心者の方はどうやっているのか気になる部分かもしれません。文章に影があると読みづらくなりますので、見出しやバナー、強調したいテキストなどで使うのが良いと思います。

CSSで文字に影をつける

text-shadow: 1px 1px 1px #000; 

「text-shadow」が文字に影を付けるためのCSSプロパティです。「1px 1px 1px」という部分で影を表現しています。

始めの1pxが横方向のズレ、次の1pxが縦方向のズレ、次の1pxがボカシ具合です。最後に影の色を指定します。冒頭で載せたテキストリンクの影は、このままの設定になっています。

text-shadow: 0 -1px 1px #fff,  1px 1px 1px #000; 

このようにカンマで区切ることで、複数の影を指定することができます。

CSSで文字に影(ドロップシャドウ)を付けるというのは、2010年頃から行われるようになった手法ですが、これは、CSS3以降に利用できるようになった手法です。ですので、CSS3に対応していないブラウザで見ると影は見られません。

image01

上がFirefoxやGoogle Chromeで見た場合で、下がInternet Explorerで見た場合です。文字の影が付くだけでだいぶ印象が変わりますよね。今後はInternet Explorerでも影付き文字が見られるようになると思いますが、古いバージョンのブラウザを使っている人には見えませんのでご注意ください。

マウスを載せた時に画像を変更する

次に、マウスを載せた時に背景画像を変更する為のCSSです。

このボタンにマウスを載せると背景画像が変わるのが分かると思います。

a {background-image: url(/img/gazo.jpg);}    
a:hover {background-image: url(/img/gazo2.jpg);}

テキストリンクのaタグに対して、背景画像を設定し、マウスオーバーのa:hoverで、異なる画像を指定しています。これは良く使われるCSS設定ですので覚えておくと良いと思います。先に説明した影を付けるCSSと同時に使っても良いでしょう。

以上が、文字に影を付けるCSSとマウスを載せると画像が変わるCSSの設定例です。ホームページ制作初心者の方は、CSSが難しいと感じるかもしれませんが、基本的な部分を学んでしまえば後は応用ですし、使うCSSは決まってきますので、とにかく色々と使ってみるのが良いと思います。

管理人イチオシのレンタルサーバー

当サイトでも使っているエックスサーバーは、ディスク容量が200Gと大きく、MySQLが50個まで使えますので、1つの契約でいくつものサイトを運営することができます。

転送量が月2,000G、メモリ192Gと他の格安サーバーでは見られないスペックとなっており、アクセス数の多いサイトや複数のWordPressサイトを運営するのにも向いています。

自動バックアップと電話サポートが付いているので、初心者の方でも安心!

エックスサーバーでは無料SSLが利用できます。Googleはhttpsのサイトを評価する傾向があり、今後はSSL化が必須になってくるでしょう。無料SSLは簡単に導入できるのでとても助かっています。

エックスサーバーの公式サイトへ

サブコンテンツ

このページの先頭へ