このページの本文へ
ナビゲーション

サンプルダウンロード

トップページ > サンプルダウンロード > 法則65 リンク先のファイルタイプを利用者に明示する

法則65 リンク先のファイルタイプを利用者に明示する

:after擬似要素と属性セレクタを使用する

CSSソース

/* PDFファイルへのリンクの場合 */
a[href$=".pdf"]:after {
     content: url(./pdf_icon.gif);
     vertical-align: middle;
     margin: 0 2px;
}
 
/* 圧縮ファイルへのリンクの場合 */
a[href$=".zip"]:after,
a[href$=".lzh"]:after {
     content: url(./zip_icon.gif);
     vertical-align: middle;
     margin: 0 2px;
}
 
/* CSSファイルへのリンクの場合 */
a[href$=".css"]:after {
     content: url(./zip_icon.gif);
     vertical-align: middle;
     margin: 0 2px;
}
 
/* 画像ファイルへのリンクの場合 */
a[href$=".jpg"]:after,
a[href$=".gif"]:after,
a[href$=".png"]:after,
a[href$=".bmp"]:after {
     content: url(./img_icon.gif);
     vertical-align: middle;
     margin: 0 2px;
}

属性セレクタとbackgroundプロパティを使用する

CSSソース

a[href$=".pdf"] {
     padding-right: 15px;
     background: url(./pdf_icon.gif)
     no-repeat center right;
}

classセレクタを使用する

XHTMLソース

<a href="sample.pdf" class="pdf">サンプルPDF</a>
<a href="sample.jpg" class="image">サンプル画像</a>

第4章 ユーザビリティを向上させるCSSデザインの法則 一覧

  1. 法則60 CSSのみでロールオーバー効果を実現する
  2. 法則61 パンくずリストは階層構造を考えて作る
  3. 法則62 文書構造が明確にわかる縦並びのメニューを作成する
  4. 法則63 CSSのみでドロップダウン型メニューを作る
  5. 法則64 クリック領域を大きくしてユーザビリティを高める
  6. 法則65 リンク先のファイルタイプを利用者に明示する
  7. 法則66 リンク先が新規ウィンドウで開くことを明示する
  8. 法則67 CSSで擬似フレームを作成する
  9. 法則68 代替スタイルシートを利用して複数のスタイルシートを切り替える
  10. 法則69 印刷に適した印刷用スタイルシートを作成する
  11. 法則70 フィードにCSSを適用してユーザビリティを向上させる

このページのトップへ


取り扱いオンラインショップ
  • インプレスダイレクト
  • Amazon
  • 楽天ブックス
  • Kinokuniya BookWeb
  • 7&Y セブンアンドワイ
  • livedoor BOOKS