CSSfacebookTweethatenaline2019.06.10レシピエフィクトファイルのダウンロードリンクにアイコンをつけるファイルのダウンロードリンクにアイコンをつける方法について解説します。この記事のポイントdownload属性をもつa要素にアイコンを表示する拡張子によって表示するアイコンを切り替える目次download属性にCSSを適用するファイルの拡張子ごとにアイコンを切り替えるdownload属性にCSSを適用するa要素を使ったファイルのダウンロードリンクに、通常のリンクと差別化するためにアイコンを表示します。表示例ダウンロードリンクのみに記述するdownload属性をCSSのセレクタにすることで、class属性などの余計な追記をせずにアイコンを表示することができます。HTMLのコード例<p>こちらのPDFファイルをご確認ください。no-repeat;}ファイルの拡張子ごとにアイコンを切り替えるCSSセレクタでは簡単な正規表現を使うことができ、属性の値によって適用するCSSを切り替えることができます。この機能を利用して、次のようにファイルの拡張子にあわせたアイコンを表示します。拡張子によってアイコンを切り替えるHTMLのコード例<h2>ダウンロードリンクにアイコンをつける</h2><p>こちらのPDFファイルをご確認ください。KB)</a></p><p>参考イメージはこちら。no-repeat;}CSSセレクタの「download$」の「$」は、値の末尾が「=”値”」で指定した内容で終わるものにCSSを適用する、という指定になります。「download$=”.pdf”」であれば、download属性の値が「.pdf」で終わるものに対してCSSを適用する指定となります。続く「download$=”.jpg”」はdownload属性の値が「.jpg」で終わるものにCSSを適用します。今回は2種類ですが、同様の方で「.csv」「.mp4」など必要に応じて様々な拡張子に対応したアイコンを表示することができます。こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。)PHP2019-11-16フォームの基本構造を作成するPHP2019-11-16はしご高など旧字体漢字の文字化けを防ぐRECOMMEND人類を前に進めたいチームラボ代表・猪子寿之さんと評論家・宇野常寛さんによる、チームラボの目指す「境界のない世界」についての対談がまとまった一冊。内容はもちろん、フルカラーで写真も綺麗でした。