【CSS】リンク先のURLやファイルの拡張子に合わせてアイコンを表示する方法。2.0【CSS】リンク先のURLやファイルの拡張子に合わせてアイコンを表示する方法。ONZEhttps://on-ze.com/archives/1032HomeBlog【CSS】リンク先のURLやファイルの拡張子に合わせてアイコンを表示する方法。Google普通のリンクだと思ってクリックしてみたら、実はそれがPDFファイルへのリンクだったり、意図せずメール・アプリケーションが起動したり、またはワードやエクセルのファイルだったりするとさらに最悪...。ネットサーフィンをしていると、そんなフラストレーションが貯まるような機会に遭遇することがしばしばあります。自分が運営するサイトでは、ユーザーにそんな嫌な思いをさせないために、PDFへのリンクの場合はPDFのアイコン、メール・アプリケーションが起動する場合はメールのアイコンを表示させるなどのような、細かい気配りが大切だと考えています。以下のHTMLを見てください。href="example.pdf">example.pdf</a>ごく普通の、何の変哲も無いHTMLの記述スタイルです。class="pdf">example.pdf</a>のように、個別にクラスやIDを指定してCSSで背景画像を指定していく方法もありますが、今回は上記ソースのように、HTMLにはクラスやIDを記述せずに、CSSのみを用いてアイコンを表示する方法を紹介します。center;}上記CSSセレクタは、リンクにtarget="_blank"が指定されている場合にアイコンを表示させるというものになっています。href="http://example.com">http://example.com</a>例えば上記ソースのようなHTMLの場合、以下のCSSでアイコンを指定することができます。始まる場合にアイコンを付けるというものになっています。始まる全てのリンクに対してアイコンが付いてしまい、アイコンを付けたくない箇所にも付いてしまいますので、アイコンを付けたくないURLに対してのスタイルも同時に指定します。none;}上記CSSを追記することで、URLが「http://」から始まっている場合でも、「https://on-ze.com」の場合はアイコンが付かないようになります。これとは逆に特定のURLに対してアイコンを表示させるといった指定もできます。href="http://wordpress.org">WordPress</a>上記ソースの場合、以下のCSSで各アイコンを指定します。center;}「http://google.co.jp」の場合はGoogleアイコン、「http://wordpress.org」の場合はWordPressのアイコンというように、URLごとにそれぞれアイコンを付けることができます。有名なサイトである場合はロゴなどのアイコンを付けることによって、ユーザーが一目でリンク先がどこなのかがわかります。サンプル:https://on-ze.com/demo/css-link-icon/CSSで「mailto:」を識別リンク先が「mailto」の場合、以下のCSSでアイコンを指定することができます。center;}上記CSSセレクタで、リンクにmailto:が指定されている場合にアイコンを付けるというものになっています。サンプル:https://on-ze.com/demo/css-link-icon/CSSで拡張子を識別.xlsの場合はExcelアイコン、.pdfの場合はPDFアイコンというように、拡張子によって(リンク文字列の末尾によって)アイコンを付ける方法です。複数の拡張子に対して同じ指定をしたい場合は、Excelのように複数のセレクタを記述するだけです。center;}以上。各リンク先の種類に応じて特定のアイコンを表示させる方法でした。ちなみに当然のように、IE6には非対応です。(←苦笑)以下より、サンプルをどうぞ。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comTwitterFacebookFeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【CSS】意外と知られていない[text-overflow:ellipsis;]の使い方。marqueeを再現する方法。Japanese]を使う。【CSS3】要素をクルクル回転させる。