どうも7noteです。ちょっとした自動化の小技を紹介。

フッターなどで、外部サイトにリンクする際によく使われる別窓マークを自動で付ける方法を紹介。
今回マークはフォントオーサム4で付けています。

<head>内で以下を読み込んで起きます。

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

つけ方

index.html

<ul>
  <li><a href="https://hogehoge.com" target="_blank" >ほげほげサイトへ飛ぶ</a></li>
</ul>

style.css

ul li a[target="_blank"]::after {
  content: '\f08e';
  font-family: FontAwesome; /* font-awesomeを使うための呪文 */
  margin-left: 0.5em;
}

aタグの属性で、target="_blank"を使用することで、「別窓で開く」ことができます。
多くの場合、外部サイトへリンクさせる時は別窓で開くことが多いので、この属性値を利用して、css側で

a[target="_blank"]

という書き方をすることで、別窓で開くaタグにのみcssを当てることが可能になります。

そして、疑似要素のafterにアイコンフォントのフォントオーサムを指定することで別窓マークが自動的に付くようになります。

特定のクラスなどをわざわざ書かなくても済むのでhtmlがすっきりしますし、経験者が見れば一目で何しているかが伝わりやすい書き方になるので覚えて起きたいところです。

簡単で地味ですが、コーディングの業務は様々なところに気をつかわないといけないので、今後のメンテナンスの事も考え自動化できるところは自動化する方が効率的です！