閉じる
閉じる

あまめも

HTMLで簡単に拡張子に合ったアイコンを設定する方法【css】

アイコン

こんにちは! あますた(@amaguristar)です。

  • 「サイトでファイルをダウンロードさせたい時に拡張子で表示するアイコンや文字を変えたい」

そんな時ありませんか? 属性セレクタを使用すると簡単に作成可能です。

 

cssの設定で簡単に対応

今回は試しにリンク先がpdfファイルだった時に下記アイコンをリンクの先頭に表示する様に設定します。

pdf-icon
pdf-icon

css編集

a[href$=".pdf"]{
    padding: 10px 20px;
    border: 1px solid #1396c0;
    background-color: #e0f4ff;
    border-radius: 3px;
    text-decoration: none;
}

a[href$=".pdf"]::before{ 
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 5px;
  background-image: url(https://tsuredure.info/icon/icon-pdf.png);
  background-size: contain;
  vertical-align: middle;
}

上記cssを適用すると、

ダウンロード >> sample.pdf

この様にiconが表示される様になります。

自分の場合はアイコンのサイズを指定したいので直接幅と高さを指定しましたが、文字のサイズに合わせて表示したい場合は単純に、

a[href$=".pdf"]{
    padding: 10px 20px;
    border: 1px solid #1396c0;
    background-color: #e0f4ff;
    border-radius: 3px;
    text-decoration: none;
}

a[href$=".pdf"]::before{ 
  content: '';
  display: inline-block;
  width: 2em;
  height: 2em;
  margin-right: 5px;
  background-image: url(https://tsuredure.info/icon/icon-pdf.png);
  background-size: contain;
  vertical-align: middle;
}

ダウンロード >> sample.pdf

と文字の2倍位のサイズになる様に設定した方が、何かと楽だと思います。

画像は少し大きめを縮小すると綺麗に表示されます。

まとめ

リンクでファイル形式を判断する場合は、

a[href$="拡張子"]        例) a[href$=".pdf"]

セレクタを使用して判断する。

判断したファイルで画像を表示する場合は、

a[href$="拡張子"]::before
a[href$="拡張子"]::after

を設定する。

関連記事

  1. HTML

    サイトの情報を消した時は<del>タグで削除した部分…

  2. WordPressで<div>の様なHTMLタグを表…

  3. タイプライター

    段落の始まりを一文字自動でインデントする

  4. キーボード

    【HTML】入力する文字をキーボード風に表示したい【CSS】

  5. list

    定義リスト<dl><dt><dd&…

  6. 文字

    【HTML】略語の正式名称を簡単に表示する方法

こんなメモもありますよ♪

  1. take091-thumbnail
  2. 外観

Twitter

ページ上部へ戻る