なるWeb 
どうも7noteです。ちょっとした小技を紹介。
ファイルを表示したり、ダウンロードする時にそのファイルがどんなファイルなのかがアイコンがついて一目で分かれば見やすいサイトですよね。
たくさんファイルがあるサイトを作るときに1つ1つclass名を付けたり、アイコン画像を用意してリンク先を1つ1つ変える必要がありますが、この手間をなくします。
ファイルのリンク先の拡張子を読み取って、自動でアイコンを変える方法があります。
CSSでファイルのリンク先の拡張子を絞り込み
CSSの属性セレクタを使います。属性セレクタで[href*=”.hogehoge”]とすることで.pdfがファイル名に含まれるものにのみCSSを当てることができます。
アイコンにはフォントオーサムを使います。
pdfファイルの例
index.html
<head>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <!-- フォントオーサムを読み込み。 -->
</head>
<a href="./abc.pdf">ABCファイル（PDF）</a>
a[href*=".pdf"]::after {
content: "\f1c1";
font-family: "Font Awesome 5 Free";
color: #F30401;
}
*（アスタリスク）を付けることで、「含まれるかどうか」という条件判定になります。
pdf以外の場合であれば、以下の通りで対応することができます。
wordやエクセルはバージョンによって拡張子が違うので注意が必要。
ワード
index.html
<a href="./abc.doc">ABCファイル（ワード）</a>
a[href*=".doc"]::after,
a[href*=".docx"]::after {
content: "\f1c2";
font-family: "Font Awesome 5 Free";
color: #0061C2;
}
エクセル
index.html
<a href="./abc.xls">ABCファイル（エクセル）</a>
a[href*=".xls"]::after,
a[href*=".xlsx"]::after {
content: "\f1c3";
font-family: "Font Awesome 5 Free";
color: #1F6F43;
}
まとめ
クラス名付ける方が誤作動は少ないかもしれないですが、99%この方法で大丈夫だと思います。
ファイル名やディレクトリ名に.pdfとか.docがはいってしまうと誤作動してしまいますが。
属性セレクタを指定するときに「.」（ピリオド）を入れていないと、ファイル名にたまたまpdfという文字がはいっていても反応してしまうので、必ず「.」（ピリオド）も入れることをおすすめします。
・他のアイコンをお探しの方はこちら
