リンクの後ろにリンクのカテゴリを示すアイコンを表示するコードを紹介します。
概要
HTMLのリンクでリンクの直後にリンクのカテゴリを示すアイコンが表示されているものがあります。
よくある例では、外部サイトに遷移するリンクに外部遷移を示すアイコンが表示されていることがあります。
この記事では、HTMLのリンクの直後にアイコンを表示するコードを紹介します。
実装方針
Aタグにクラスを設定し、CSSでafter疑似クラスを指定し、contentプロパティにアイコン画像を指定します。
この記述で、リンクの後ろにアイコンを表示できます。
displayプロパティをinline-blockに設定し、ブロック要素として表示します。
書式
CSSの記述書式は次の通りです。
[セレクタ名]:after {
display: inline-block;
content:url([画像ファイル、またはURL]);
}
[セレクタ名]:after {
display: inline-block;
content: url(data:image/svg+xml;base64,[Base64のデータ]);
}
事前準備:アイコンの作成
リンクの後ろに表示するアイコンを作成します。今回は下図のアイコンを作成します。
作成した画像をsvg形式で書き出します。
コード
以下のHTMLファイルとCSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="anchor-link-attribute-icon.css" />
</head>
<body>
<h1>リンクにアイコンを表示するデモ</h1>
<p>
ページのテキストです。テキスト。<a class="extenal-link" href="https://www.ipentec.com">こちらのページ</a>に
アクセスしてください。テキスト。あいうえお、ABCDE,あいうえお、ABCDE,あいうえお、ABCDE<br />
</p>
<p>
コンテンツです。<a href="https://www.ipentec.com">コンテンツ</a>ページです。<br />
外部リンクです。<a class="extenal-link" href="https://www.ipentec.com">外部サイト</a>のページです。<br />
</p>
</body>
</html>
.extenal-link:after {
padding: 0 0 0 0.2rem;
display: inline-block;
width: 1rem;
content:url('out-link.svg');
}
解説
external-link クラスを指定しているリンクには、リンクの後ろにアイコンが表示されます。
<a class="extenal-link" href="https://www.ipentec.com">...</a>
クラスを指定していないリンクは、通常のリンクの表示になります。
<a href="https://www.ipentec.com">...</a>
CSSのexternal-link クラスでは、padding-left の値を設定してリンクとアイコンの間に余白を開けます。
また、displayプロパティをinline-blockに設定します。
画像の大きさはwidthで設定します。下記コードでは横幅1remでアイコンが表示されます。
アイコン画像は、contentプロパティにurlで指定します。
.extenal-link:after {
padding: 0 0 0 0.2rem;
display: inline-block;
width: 1rem;
content:url('out-link.svg');
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
extenal-link クラスを指定したリンクの後ろにはアイコンが表示されています。
CSSに画像データを埋め込む場合
先に紹介した手順では、画像のURLをcontentプロパティに指定しましたが、画像のデータをCSSに埋め込む方法もあります。
SVGデータの準備
先の手順で作成したSVGファイルをテキストエディタで開きます。
<svg> ～
</svg> タグ部分をコピーします。
Base64エンコードでSVGドキュメントを変換します。
Base64エンコードツールはどのようなツールを利用しても良いです。
なお、iPentecのWebアプリBase64変換ツールは
こちらのページです。
変換した文字列をCSSのcontentプロパティに設定します。
contentプロパティの書式
contentプロパティにBase64でエンコードされた、SVGデータを埋め込む場合の書式は以下になります。
content: url(data:image/svg+xml;base64,[Base64のデータ]);
コード
作成したコードは以下になります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="anchor-link-attribute-icon-embedded.css" />
</head>
<body>
<h1>リンクにアイコンを表示するデモ</h1>
<p>
ページのテキストです。テキスト。<a class="extenal-link" href="https://www.ipentec.com">こちらのページ</a>に
アクセスしてください。テキスト。あいうえお、ABCDE,あいうえお、ABCDE,あいうえお、ABCDE<br />
</p>
<p>
コンテンツです。<a href="https://www.ipentec.com">コンテンツ</a>ページです。<br />
外部リンクです。<a class="extenal-link" href="https://www.ipentec.com">外部サイト</a>のページです。<br />
</p>
</body>
</html>
.extenal-link:after {
padding: 0 0 0 0.2rem;
display: inline-block;
width: 1rem;
content: url(data:image/svg+xml;base64,PHN2ZyBpZD0iX+ODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OTkuNTEgNTAwLjQ5Ij4KCTxkZWZzPgoJCTxzdHlsZT4uY2xzLTF7ZmlsbDojOGM4YzhjO30uY2xzLTJ7ZmlsbDpub25lO3N0cm9rZTojOGM4YzhjO3N0cm9rZS1taXRlcmxpbWl0OjEwO3N0cm9rZS13aWR0aDo0OHB4O308L3N0eWxlPgoJPC9kZWZzPgoJPGc+CgkJPGxpbmUgY2xhc3M9ImNscy0yIiB4MT0iMTg5IiB5MT0iMzEwLjQ5IiB4Mj0iNDAyLjA4IiB5Mj0iOTcuNDEiLz4KCQk8cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iNDQ5Ljk3IDE4NC45MiA0OTkuNTEgMCAzMTQuNTggNDkuNTMgNDQ5Ljk3IDE4NC45MiIvPgoJPC9nPgoJPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNDAzLDIzMS45OXYxOTguNzRjMCwxMi05Ljc2LDIxLjc2LTIxLjc2LDIxLjc2SDY5Ljc2Yy0xMiwwLTIxLjc2LTkuNzYtMjEuNzYtMjEuNzZWMTE5LjI1YzAtMTIsOS43Ni0yMS43NiwyMS43Ni0yMS43NmgxOTYuNzRWNDkuNDlINjkuNzZDMzEuMjMsNDkuNDksMCw4MC43MiwwLDExOS4yNVY0MzAuNzRjMCwzOC41MywzMS4yMyw2OS43Niw2OS43Niw2OS43NkgzODEuMjRjMzguNTMsMCw2OS43Ni0zMS4yMyw2OS43Ni02OS43NlYyMzEuOTloLTQ4WiIvPgo8L3N2Zz4=);
}
実行結果
作成したHTMLファイルをWebブラウザで表示します。CSSに埋め込まれているSVG画像が表示されます。
参考:display:inline-block を利用しない場合
display:block を指定した場合はアイコンがリンクの後ろに表示されますが、アイコンの前後で改行されてしまいます。
display:inlineまたは、displayプロパティを何も指定しない場合は、下図の表示となります。アイコン画像が横幅いっぱいに表示されます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2023-04-09
作成日: 2022-12-06
