SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2021.07.30
  • CATEGORY
TITLE

【CSS】特定のファイルへのリンクだけにアイコンを指定しよう!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【CSS】特定のファイルへのリンクだけにアイコンを指定しよう!
の解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • 属性セレクタについて学びたい方へ
  • 今回は特定のファイル(PDF、ZIP、Excel)などにアイコンを指定について解説しております。

今回は、PDFファイルやZIPファイルなどといった特定のファイルのみにアイコンを指定
する解説になります。
イメージは下記のようになります。

属性セレクタ  + ::afterを指定し、要素の「直後」にアイコン指定します。
補足:::beforeは、要素の「直前」になります。

属性セレクタについて

属性セレクタについて

今回、指定する属性セレクタは、次のような記述方法になります。
[href$=".pdf"]このように、「属性$=”値”」の形になります。
上記の記述方法は、拡張子が「.pdf」のときだけにCSSが適用されるようになっています。

拡張子が「.zip」の場合は[href$=".zip"]と指定します。
書き方は以下のようになります。

属性セレクタについて

<ul>
	<li>after... <a href="sample.pdf">資料...</a></li>
	<li>before... <a href="sample.pdf">資料...</a></li>
	<li>border... <a href="cssboder/">詳細...</a></li>
</ul>
/*--一部省略しております--*/
a[href$=".pdf"] {
	color: #FD6158;
	text-decoration: none;
	background-color: #fff;
	padding: 1em 1.4em;
	border: solid 1px #FD6158;
	border-radius: 5px;
}

ul.file-list li a:hover[href$=".pdf"] {
	color: #fff;
	background: #E09694;
}

a[href$=".pdf"]::after {
	content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: url(pdf-icon.png);
    background-size: 20px 20px;
    margin-left: .5em;
}

a[href$=".pdf"]には、文字色、背景色、ボーターなど、リンクに対してCSSを記述しております。
a[href$=".pdf"]::afterとは、「資料のダウンロードはコチラ」の直後にアイコンを指定しております。

ポイント!
background: urlに画像を指定する際には、contentの中には何も記述しないようにしましょう。
content: '' ← この状態にしておきましょう。
また、サイズを変更する際には、display: inline-blockを指定してからサイズの指定をしましょう。

上記で解説したように、「.pdf」ファイルが指定されている場合はアイコンが表示され、
それ以外は、通常のリンクとして表示します。
毎回、HTMLに「pdf」のアイコンをimgタグで指定するよりかはCSSで指定した方が楽ですよね。

PDFのリンクの貼り方について

主にファイル(pdf、画像)をダウンロードする際に指定をおこないます。

まとめ

今回はこれで以上です。

POINT
  • 今回は、属性セレクタ+::afterを指定し、要素の「直後」にアイコン指定します。
  • [href$=".pdf"]このように、「属性$=”値”」の形になります。
  • background: urlに画像を指定する際には、contentの中には何も記述しないようにしましょう。
  • サイズを変更する際には、display: inline-blockを指定してからサイズの指定をしましょう。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top