• web制作

【CSS】要素の内側にborderを

佐藤
このエントリーをはてなブックマークに追加

先日夜中に両肩に激痛が走り眠れぬ夜を明かしました。
接骨院行ってエレキバンとか貼ってるうちに治りましたが、
あれはいったいなんだったんでしょうね?

さて、今回は最近使ったCSSです。

画像の内側にborderを引く

画像や要素にhoverした時などでborderで囲うようにすることはよくあるかと思います。

その際、要素の外側にborderを表示すると、borderのpx分だけズレが出てしまい、
ソレ以降のレイアウトが崩れて汚くなってしまいます。

そんな時に教えてもらったのがこちら。

デモページ

サンプルソース

html

<body>
<ul>
  <li><a href="#"><img src="img.gif"></a></li>
  <li><a href="#"><img src="img.gif"></a></li>
  <li><a href="#"><img src="img.gif"></a></li>
</ul>
<ul>
  <li><a href="#"><img src="img.gif"></a></li>
  <li><a href="#"><img src="img.gif"></a></li>
  <li><a href="#"><img src="img.gif"></a></li>
</ul>
<br>
<p>ボーダーを内側に入れてみるテスト<br>ボーダーを内側に入れてみるテスト</p>
</body>

CSS

a {
overflow: hidden;
float: left;
}
a:hover {
border: 3px solid #FFD7D7;
}
a:hover img {
margin: -3px;

こちらのCSSを必要な箇所に追加すると、
使用している画像の内側にborderを入れることができます。

imgにmargin: -3pxを指定して、内側に入れてる感じです。
割と簡単でしたね!

いまさらな感じがしますが、役に立ったので書いてみました〜。

参考サイト:Image Rollover Borders That Do Not Change Layout

rss登録
このエントリーをはてなブックマークに追加