border: 0; 指定の画像に枠を付ける

  • CSS
  • 現在地

本来リンクを指定された画像には、HTMLやCSSで何の指定もしていない限り、画像に <a>タグの色でボーダー(枠)が表示されます。

しかし、外部から JavScript 等で読み込まれる場合で、border: 0; 指定されていたりすると、その部分の画像だけボーダーが表示されません。

今回は、こういった場合でもCSSを使うことで、ボーダーを表示したように見せる方法を記述しておきます。

画像のマウスオーバー時にボーダーを表示

なお、この方法の場合そもそも border を使用しないので、margin でレイアウトの調節をする必要はありませんが、png 等の透過画像の場合は、あくまで背景変更にしかなりません。

例: リンクを指定した画像にマウスオーバーした場合に、3px 分のボーダーを表示したように見せる場合。通常時はボーダーなし。

CSSへの記述

  • img{
  • border: none;
  • padding: 3px;
  • }

  • a:hover img{
  • background-color: #88AAFF;
  • }

  • a:active img{
  • background-color: #CC1111;
  • }

上記の記述は、領域内の余白をあらかじめ padding: 3px; で拡げることによって、マウスオーバーした時に背景の色を変更し、ボーダーが表示されたように見せるものです。(指定している色はこのサイトで使用しているものです。自由に変更してください。)

実際にこの記述を使用しているので、どういう風になるかは、右のブックマークアイコンの画像の上にマウスを重ねてみてくれればわかります。(なお、IEでは :active の仕様が違うため :focus で同様の記述をしています。)

スポンサードリンク

inserted by FC2 system