ファイルの拡張子を見てアイコンを自動でつける方法
excelへのリンクを貼りたい場合、pdfへのリンクを貼りたい場合、ユーザビリティを上げるためにもどんなファイルなのかアイコンを入れたい時がありますが、その場合imgタグを使ってませんか？
リンク先の拡張子をみてimgタグを打たなくてもcssだけで自動的につけることができます。
目次
完成イメージの確認
答えを早く知りたいかたはこちらリンクの右横にアイコンをいれれたら、なんのファイルへのリンクなのかユーザーがわかりやすくなります。
普通にリンクを並べるとこう
こんな風にアイコンがあるとリンク先のファイルがわかりやすい
こんな風にリンクを貼るのaタグの中や右にimgタグを打ってる方はこの続きをぜひ読んでおいてください。
アイコンをリンクの右側につける方法
指定はとても簡単！ 属性セレクタを使います。後方一致で指定します。
属性セレクタに関してわからない方は過去の記事を参照してください。
文字サイズが違ってもちょうど良いサイズで表示できるようにサイズ指定の単位にemを使ってます
CSSはこんな感じ
a[href$=".pdf"] {
padding-right: 1.7em;
display: inline-block;
background: url("/svg/pdf.svg") no-repeat 100% 50%;
background-size: 1.5em 1.5em;
}
a[href$=".doc"],
a[href$=".docx"] {
padding-right: 1.7em;
display: inline-block;
background: url("/svg/word.svg") no-repeat 100% 50%;
background-size: 1.5em 1.5em;
}
a[href$=".xls"],
a[href$=".xlsx"] {
padding-right: 1.7em;
display: inline-block;
background: url("/svg/excel.svg") no-repeat 100% 50%;
background-size: 1.5em 1.5em;
}
a[href$=".ppt"],
a[href$=".pptx"] {
padding-right: 1.7em;
display: inline-block;
background: url("/svg/ppt.svg") no-repeat 100% 50%;
background-size: 1.5em 1.5em;
}
htmlはこんな感じ
<a href="file.docx">Wordリンク</a> <a href="file.xlsx">Excelリンク</a> <a href="file.pptx">Power Pointリンク</a> <a href="file.pdf">Pdfリンク</a>
たったこれだけで、簡単にリンクにアイコンを付与することができます。
別ウィンドウで開くリンクにも使えます
おまけですが、この属性セレクタを用いれば拡張子をみる以外にも特定の属性の値を見て指定をすることができるので、別ウィンドウで立ち上げるリンクにアイコンをつけることも簡単です。
CSSはこんな感じ
a:[target="_blank"] {
padding-right: 1.7em;
display: inline-block;
background: url("/svg/blank.svg") no-repeat 100% 50%;
background-size: 1.5em 1.5em;
}
a[href$=".pdf"] {
padding-right: 1.7em;
display: inline-block;
background: url("/svg/pdf.svg") no-repeat 100% 50%;
background-size: 1.5em 1.5em;
}
htmlはこんな感じ
<li><a href="file.pdf" target="_blank">Pdfリンク</a></li> <a href="#">画面遷移のリンク</a> <a href="#" target="_blank">別ウィンドウで開くリンク</a>
ここで注意しなければならないこととしては、css上の順番です。
pdfに関してはブラウザ上で表示するためにtarget指定を同時にすることもあると思います。
この場合css上の記述順序を逆にしてしまうとpdfアイコンがblankアイコンに上書きされてしまうので記述順は注意です。
