コーディングをする際に、PDFやエクセル、ワードなどのファイルへのリンクのアイコンを変えたい場合があるかと思います。その際に、都度クラスを付けたり、JSで対応する事無くCSSのみでアイコンの付け替えが出来る方法を解説していきます。
正規表現でセレクタを指定する
正規表現とは、簡単に言えば文字のパターンで判別する方法です。
今回は各ファイルの判別をしたいので「PDFファイル」や「エクセルファイル」だったらアイコンを付けるという正規表現を使用していきます。
まずは、例として以下のPDFだったらという正規表現の使用方法を紹介します。
a[href*=".pdf"] {
.....
}上記のa[href*=”.pdf”]という記述で、aタグのhref属性の値に.pdfが含まれていたらという内容となります。
これを利用して拡張子を判別してアイコンを付けたり装飾を変えたりできます。
使用例と各ファイルの指定方法
次は実際に各アイコンの指定をしていきます。
今回は各aタグの疑似要素::afterにアイコンの指定をしていきます。
a {
color: #4D98BF;
text-decoration: underline;
display: inline-block;
}
a::after {
content: "";
display: inline-block;
width: 25px;
height: 25px;
margin-left: 5px;
background-position: center center;
background-repeat: no-repeat;
background-size: 25px auto;
}
/* PDF */
a[href*=".pdf"]::after {
background-image: url(../imgs/icon_pdf.pdf);
}
/* Word */
a[href*=".docx"]::after {
background-image: url(../imgs/icon_word.pdf);
}
/* Excel */
a[href*=".xlsx"]::after {
background-image: url(../imgs/icon_excel.pdf);
}今回のアイコンは画像にしていますが、アイコンフォントなどを使うとキレイにレスポンシブにも対応出来るかと思います。
さいごに
いかがでしたでしょうか。
正規表現を利用する事で、ファイルの種類以外にもいろいろ対応が出来るようになりますので、ぜひ覚えておいてください。
