スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

画像サイズを変更せずにCSSのborderで画像に枠をつける方法

update : 2016/01/04

画像サイズを変更せずにCSSのborderで画像の枠を装飾するテクニックです。

リンク画像にマウスオーバーでborderをつけることがよくありますが、
リンクエリアのサイズを変えずに、かつ、画像サイズを変えずに、となると少しテクニックが必要です。

例えば以下のような例です。
マウスオーバーで10pxの太さの赤いborderを表示させていますが、カクっとサイズが変わる感じが嫌ですね。

てんとう虫
※分かりやすくするために極端な太さを例にしています。

単純にaタグにボーダーを追加してしまうと、その分だけリンクエリアが広がってしまいます。
てんとう虫

そこで、以下のようにCSSを用意してあげれば、borderを追加してもリンクエリアのサイズは変わりません。

a{
	border: 10px solid red;
	overflow: hidden;
}
a img{
	margin: -10px;
}

てんとう虫

この方法を活用すれば、マウスオーバーによるボーダー装飾のリンクサイズをうまくコントロールできますね。

a{
	overflow: hidden;
}
a:hover{
	border: 10px solid red;
}
a:hover img{
	margin: -10px;
}

てんとう虫

以上、単純だけど意外と見落としがちなテクニックのご紹介でした。

B!

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Monthly Archives