ホームページで画像にリンクをつける基本のやり方と設定

• Twitter
• facebook
• Google+
• LINE

こんにちは。ビータイズのWeb職人まいたけでごぜいます。

今回は画像にリンクをつけたい時の基本の「き」です。 マウスを画像にあてた時、CSSで簡単に変化をつける方法もご紹介します。ちょっとした動きや変化があると、より「リンク画像に触った」という感覚が分かりやすくなりユーザの利便性も向上するので、是非取り入れてみてくださいね。

 

※本ページの内容は、html及びCSSの基本を理解していることを前提に掲載しています。

それぞれ基本知識をまとめた記事もありますので、ホームページ作成やhtml、CSSにあまり詳しくない方はこちらも参考にしてみてください。

 

画像にリンクをつけるときの基本

まずはサンプルコードから見てみましょう。

サンプルコード：

画像を表示するimgタグを、リンクをつけるaタグで囲むだけというシンプル構造ですね。

リンクに限ったことではないですが、imgタグには代替テキストのaltを必ずつけましょう。音声で読み上げたり、画像が表示できない環境ではaltのテキストが画像の代わりに表示、何が書いてあるのか分かるようにするための属性です。
また、検索エンジンにはその画像が何の画像か（現在のところ）判別はしないので、SEO的にもaltは必須です。

今回CSSでつけているのは、ブラウザやスタイルシートの設定によって画像にリンクをつけた時に自動で外枠（border）がつくことがあるので、これを防ぐために書いています。

リセットスタイルシート※などを使用していて、画像に対する枠線（border）を一括で消している場合はこのCSSは不要です。

また、今回は使用する画像が少し大きかったのでサイズ指定をCSSでしています。こちらはお好みと状況によって設定してください。
※画像のサイズ指定は、基本的にCSSで行いましょう。

リンクした画像にCSSで変化をつける その1

少し前に、マウスを重ねると画像が変わるようにするやり方を記事にしているのですが、リンクは見ている人が「押した」「マウスが当たっている」ということをより分かりやすくしてあげると、何もしない状態より動きが出てメリハリがつきます。

その1では、画像にリンクを付ける場合の（おそらく）一番簡単な変化の付け方をご紹介しますね。
サンプルコードの右側（Result）にサンプルが表示されているので、マウスを乗せてみてください。

サンプルコード：

マウスを乗せると、ボタンの画像がふわっと薄くなるのがおわかり頂けたかと思います。これだけでも「あ、画像をさわったな」というのが分かりやすくなります。

.btn-img:hover

サンプルコードの中のCSSコメントにも記載していますが、クラス名の後ろに「:hover」をつけると「マウスを乗せたときの動作」を設定することができます。今回はリンクに対してつけていますが、どんな要素にもつけることができます。

例えば、ちょっとかわったキャラクターのホームページを作成していて、マウスを乗せるとキャラクターの顔が変わるとか、そういうときのトリガー的な使い方ができます。

opacity: 0.6;

「opacity」は、要素に対する「透明度」を指定するものです。プロパティ値は、0〜1までの間で指定します。0が0%=透明、1が100%=不透明で、その間は小数点で指定します。今回は0.6にしているので、60%の透明度で表示されます。

transition: 0.8s;

「transition」は、要素に対する「アニメーションの設定」をまとめて指定するものです。今回は変化にかかる時間を設定します。
プロパティ値は、0以上で指定します。1sと設定すると1秒かけてアニメーションするようになります。今回は、0.8秒かけて変化させています。

---

■参考記事：

リンクした画像にCSSで変化をつける その2

こちらは応用編ですが、もっと動きをつけたい！といった場合に下記のようなライブラリを活用すると、コピペだけで簡単にオシャレなエフェクトをつけることができます。JavaScriptを使わなくてもCSS3だけで表現可能なものがたくさんあります。是非ためしてみてくださいね。
※下にスクロールするとサンプルがたくさんあります。

Imagehover.css – An Image Hover CSS Library

まとめ

ホームページを作成していて、画像にリンクをはるときの諸々をご説明しました。簡単にオシャレな動きをする画像ボタンも作成できますので、是非ためしてみてください。

書いた人：

大人気！まいたけのホームページ作成関連記事はこちら：

• Twitter
• facebook
• Google+
• LINE