[CSS] ファイルフォーマット別に異なるスタイルを適用させる方法



  • filecss



filecss

ファイルフォーマット別に異なるスタイルを適用させる方法を紹介します。

  • ファイルフォーマット別に異なるスタイルを適用させる方法


    ✔ 「.pdf」にはPDFアイコンを付ける → PDFを開く

    ✔ 「http://」にはIEアイコンを付ける → IEで開く

    ✔ 「mailto:」にはメールアイコンを付ける → メールを送る


    HTML

    まずid(filefor)付きdivで囲み上記の様に書きます。
    (「http://」・「mailto:」・「.pdf」で各アイコンが表示される様に書いています。)
    id付きで書くと指定した部分だけファイルフォーマット別に異なるスタイルを適用できるので便利です。

    CSS

    CSSではid(filefor)付きdivで囲んだのでdiv#fileforと書きaタグをつけて各ファイルフォーマット別に書きます。あとは、ファイルフォーマット別に適用させたい異なるスタイルを書くだけです。今回はファイルフォーマット別にアイコンを表示させました。

    あまり知られていませんが需要があると思います。参考になれば幸いです。


    コメントしてね!