イメージマップを使って商品ごとのリンクを貼っている店舗で、Chromeブラウザで閲覧した際に青い線が表示されることがあります。この青い線は、リンクがフォーカスされたときに表示されるデフォルトのスタイルです。これが気になるという要望を受けたので対応方法を記録しておきます。
解決方法
CSSでarea要素に対して、borderとoutlineをnoneに設定することで、青い線を消すことができます。以下のコードを参考にしてください。
CSS
area {
border: none;
outline: none;
}
これにより、Chromeで閲覧した際の青い線が表示されなくなります。
具体的な使用例
以下に、具体的なHTMLとCSSの使用例を示します。イメージマップを使って特定の領域にリンクを設定し、そのリンクに青い線が表示されないようにしています。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>イメージマップの青い線を消す</title>
<style>
area {
border: none;
outline: none;
}
</style>
</head>
<body>
<img src="your-image.jpg" usemap="#image-map" alt="Sample Image">
<map name="image-map">
<area shape="rect" coords="34,44,270,350" alt="Example" href="https://example.com">
</map>
</body>
</html>
補足情報
最新のブラウザでは、outlineプロパティだけで対応できる場合もあります。また、アクセシビリティの観点から、フォーカスリングを完全に削除することは推奨されていません。
CSS
area {
border: none;
outline: none;
outline: 2px solid transparent; /* フォーカスリングを透明にする */
}
このようにすることで、フォーカスリングの存在を保ちながら、視覚的に見えなくすることはできます。