Home > P.389

P.389

  • Last Modified: 2008年12月 2日 00:00

このページは、株式会社技術評論社より刊行されている実践 Web Standards Design に記載しているソースコードのサンプルを呈示しています。 書籍該当部分と照合しやすいように前後の解説文も掲載していますが、あくまで照合用のため、適宜前後を省いたり内容を省略したりしています。 書籍を読みながら実際にサンプルを表示する際の補助資料として活用してください。

また、 XHTML ソースと CSS ソース、関連画像を含めた全サンプルの ZIP アーカイブ (3,104,743 Bytes) もダウンロードできます。 ( ZIP アーカイブには解説文は含まれていません。)

解説 (1)

リンク先が PDF 文書である場合に、 PDF のアイコンを表示させてみましょう。 あらかじめ 16px × 16px のアイコンを用意しておきます。

href 属性によるリンク先は PDF 文書になっているので、この PDF の拡張子である ".pdf" をキーとして、後方一致の属性セレクタを利用します。 href 属性が ".pdf" という文字列で終わる値を持つ a 要素に対しての指定です。

XHTML(1)

<a href="xhtml_css.pdf">(X)HTML+CSSを用いてWebリソースを作成すること</a>

CSS(1)

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

解説 (2)

逆に、前方一致の属性セレクタを利用すれば、 mailto URL スキームで連絡先のメールアドレスをリンク先としている場合には、リンク先がメールアドレスであるということをアイコンで表すこともできます。

href 属性の値が "mailto:" で始まるすべての a 要素に対してメールアイコンが表示されることになります。

XHTML(2)

<a href="mailto:foo@example.com">お問い合わせ</a>

CSS(2)

a[href^="mailto:"] {
  padding-right: 20px;
  background: transparent url(mail_icon.gif) center right no-repeat;
}

解説 (3)

target 属性を利用して、 "_blank" でリンク先が別ウィンドウで開かれるように指定している場合には、その旨を表しておくこともよいかもしれません。 この場合には、 CSS 2.1 の属性セレクタで対応できます。

target 属性を持っており、かつ、その値が厳密に "_blank" であるすべての a 要素に対して上記指定は適用されます。

XHTML(3)

<a href="map.jpg" target="_blank">地図を見る</a>

CSS(3)

a[target="_blank"] {
  padding-right: 20px;
  background: transparent url(window_double.gif) center right no-repeat;
}

Download

Comments:0

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Trackbacks:0

TrackBack URL for this entry
http://lh3.jp/files/system/mtos/mt-tb.cgi/151
Listed below are links to weblogs that reference
P.389 from lh3.jp

Home > P.389

Tag Cloud
Categories
Archives
Search
Feeds
  • Feed by feedburner.jp

Return to page top