マウスがホバーしたときに枠線をつけたい
outlineプロパティは、要素のボックスに外枠線をつけるのに使われてます。borderプロパティと同じところに線が引かれ、設定する値もまったく同じです。唯一違うのは、outlineプロパティで引かれた枠線は、要素のボックスモデルには影響しないことです。outlineプロパティを実際のWebデザインで使うことはあまり多くありません。
なぜborderプロパティではなくoutlineプロパティを使う方がよいのか？リンクの通常時とホバーのときで、borderプロパティで設定するボーダーがあったりなかったりすると、ボックスのサイズが変わってしまいます。その結果、リンクテキストにホバーすると、そのテキストの位置がずれてしまいます。少し違和感がある動作になるので、borderプロパティではなくoutlineプロパティを使用しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプル</title>
<style>
a{
color: #ea6357;
text-decoration: none;
}
a:hover{
outline:1px solid #ea6357;
}
</style>
</head>
<body>
<h1>代表的な検索エンジン</h1>
<ul>
<li><a href="#">Google</a></li>
<li><a href="#">MSN</a></li>
</ul>
</body>
</html>実行結果
