すべてのカテゴリ

今回はちょっとしたCSSでのユーザビリティー向上のテクニックです。アンカータグ<a> に、target="_blank" をつけると自動的に別窓アイコンを設置するというものです。疑似要素「::after」と疑似クラス「a[●●] 」を併用したテクニックになります。とりあえず、HTMLとCSSを載せますね。【HTML】<h2>①target="_blank" なしのアンカータグ</h2><p><a href="～～URL～～">別窓アイコンなしリンク</a></p><h2>②target="_blank" ありのアンカータグ</h2><p><a href="～～URL～～" target="_blank">別窓アイコンありリンク</a></p><h2>③target="_blank" ありの .icon-right 指定アンカータグ</h2><p><a href="～～URL～～" class="icon-right" target="_blank">別窓アイコンあり.icon-right 指定リンク</a></p>【CSS】/* ■■■■ 【CSS】別窓マークを自動的に設置 ■■■■ */a[target="_blank"]:after{    content: "\002197";    display: inline-block;    font-w