リンク文字の直後にアイコンを加える - ［ホームページ作成］All About
リンク文字の直後にアイコンを加える ホームページ上では、PDFファイルへのリンクや、Microsoft Wordファイルへのリンクなど、HTMLではないファイルへリンクされることがあります。 気づかないでクリックすると、突然ソフトウェアが起動したりして、驚いたりいらだったりします。 そのようなことを防ぐために、HTMLではないファイルへリンクする際には、 「 アクセス解析結果（PDF） 」のようにカッコを使ってファイルの種類を記しておくと親切です。 「ただテキストで種類を書いておくだけでは芸がない…」と思う場合は、アイコンでリンク先の種類を示してみてはいかがでしょうか。 もちろん、「リンクの末尾に毎回画像を記述する」…などといった面倒なことは必要ありません。 スタイルシートを使って楽に実現してみましょう。 以下は、今回ご紹介する方法を使った例です。リンクの後に、種類を示す
別ウインドウで開くリンクにアイコンを付加 [ホームページ作成] All About
そこで、「新規ウインドウで開くように記述されたリンク」にだけ、新規ウインドウが開かれるという意味を表すアイコン「」が表示されるようにしてみましょう。 とはいえ、対象のリンク1つ1つに対して画像を表示するよう追記するのは面倒です。 そこで、HTML側を修正することなくスタイルシートだけの記述で、新規ウインドウを開くリンクすべてにアイコンを一括表示させる簡単な方法をご紹介いたします。 この方法だと、1つスタイルシートを記述するだけで、すべての「新規ウインドウを開くリンク」に対して装飾できるので楽です。 「属性セレクタ」で装飾対象を限定、 「after疑似要素」でアイコンを付加 『新規ウインドウで開くように記述されたリンク』にだけアイコンが付加されるようにスタイルシートを記述するには、 「属性セレクタ」と「after疑似要素」の2つを使います。 それぞれの意味は以下の通りです。（詳しくは次のペー
![別ウインドウで開くリンクにアイコンを付加 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
