【コピペOK】自動でPDFのアイコンをつけるCSS（Excelファイルや、Wordファイルも）

  • 投稿日
  • 更新日
  • 著者 アバター しんぺー
  • カテゴリー CSS
  • カテゴリー HTML

自動でファイルのiconを表示するCSS

PDFとかExcelファイルある時に自動でアイコン付けれないかな？
毎回クラス付けるの大変だし、どうしたらいいんだ？

ファイルの拡張子を認識して、自動でアイコンがつくようなテンプレートを共有します。
実用的で使いやすいですよ。

ボタンバージョンもあります

【コピペOK】自動でPDFのアイコンがつくボタン（Excelファイルや、Wordファイルも） | sinpe-Blog
自動でPDFファイルのアイコンがつくボタン PDFファイルのアイコンがつくボタンは毎回クラス付けたり面倒だな。…
sinpe-pgm.com

完成形のイメージ

See the Pen file-icon by shimpei (@shimpei) on CodePen.

解説

基本のHTML

aタグにfile-iconのクラスを付けています。
href内の拡張子に.pdf、.xls、.docなどがついたときにそれぞれスタイリングを切り分けています。
おまけでサブクラスの.-afterもつけました。アイコンの位置を後ろ側に変更したい時に使います。

<ul>
  <li><a class="file-icon" href=".pdf">PDFファイルダウンロード</a></li>
  <li><a class="file-icon" href=".xls">Excelファイルダウンロード</a></li>
  <li><a class="file-icon" href=".doc">Wordファイルダウンロード</a></li>
  <li><a class="file-icon -after" href=".pdf">PDFファイルダウンロード｜.file-icon .-after</a></li>
</ul>

このHTMLを基本に、もっと楽にスッキリ記述する方法も紹介します。
まずは肝心のCSSを解説します。

SCSS

href内の拡張子によってFontAwesomeのアイコンを変更しています。
ちょっと長いですが、色付きのところがぽいんと

  • hrefの中に.pdfがあるとき
    • [href$=".pdf"]{.pdfの時のスタイル}
  • hrefの中に.xlsがあるとき
    • [href$=".xls"]{.xlsの時のスタイル}
  • hrefの中に.decがあるとき
    • [href$=".doc"]{.docの時のスタイル}
.file-icon {
  color: #000;
  text-decoration: none;
  display: inline-block;
  position: relative;
  margin-left: 1em;

  &::before {
    content: "";
    color: #E04545;
    text-decoration: none;
    position: absolute;
    left: -1em;
    top: 3px;
    font: var(--fa-font-solid);

    font: {
      weight: 900;
      size: 16px;
    }
  }

  &:hover {
    color: #000;
    text-decoration: underline;
  }

  &[href$=".pdf"] {
    &::before {
      content: "\f1c1";
    }
  }

  &[href$=".xls"],
  &[href$=".xlsx"],
  &[href$=".xlsm"] {
    &::before {
      content: "\f1c3";
      color: #106834;
    }
  }

  &[href$=".doc"],
  &[href$=".docx"] {
    &::before {
      content: "\f1c2";
      color: #1A62C3;
    }
  }

  &.-after {
    margin-left: 0;

    &::before {
      left: unset;
      right: -1em;
    }
  }
}

応用編

エクステンドでもっと楽にスッキリ記述する

SCSSのエクステンドを使って、.file-icon-list内のaタグに.file-iconをぶち込みます。
なんかわかりにくいですが、aタグに毎回クラスを書かなくても、ulタグにクラスをつけるだけでよくなります。
aタグの数が多くなるとこっちのが楽ですね。

SCSS

.file-icon-list {
  >li {
    >a {
      @extend .file-icon;
    }
  }
}

HTML

ulタグに.file-icon-listのクラスをつければOK！

<ul class="file-icon-list">
  <li><a href=".pdf">PDFファイルダウンロード</a></li>
  <li><a href=".xls">Excelファイルダウンロード</a></li>
  <li><a href=".doc">Wordファイルダウンロード</a></li>
</ul>

実践編

これまでの全てを活用して、お知らせのリストに適用してみます

先程のエクステンドと同様ですが、お知らせリストのaタグに.file-iconとサブクラスの.-afterを適用しています。
これで、お知らせ記事がPDFファイルだったり、Excelファイルだった時に自動でアイコンが付きます。

HTML

<ul class="news-list">
  <li>
    <div class="data-box">
      <time datetime="2023-02-04">2023.02.04</time>
      <span class="tag">お知らせ</span>
    </div>
    <a href=".pdf">お知らせのタイトルが入ります。</a>
  </li>
</ul>

SCSS

ul.news-list {
  >li {
    a {
      @extend .file-icon;
      @extend .-after;
    }
  }
}

最後に

今回は地味ですがサイトを運用していく中で便利な記述を紹介しました。
普段は使用する必要がなくても、依頼されたときに「パッと」コピペで実装できると嬉しいですね。
そのように、この記事があなたの助けになっていれば幸いです。

最後までありがとうございました。