このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2012.05.19

CSS3 属性セレクタ 活用方法

CSS3の属性セレクタで利用できるBegins withEnd withの機能を利用し、属性値によっての指定することが可能になります。
Begins withとは「〇〇で始まる属性」End withはその逆で「〇〇で終わる属性」となっております。
どうやって使うかというと
Begins with
(要素名)[(属性名)^=”始まりの値”]{}
End with
(要素名)[(属性名)^=”終わりの値”]{}
と記述します。
有効な使い方の一つとして「リンクの属性判別によるアイコン付与」の使用方法があります。
「http://とhttps://で始まるリンク」 → 外部リンクを表すアイコンを付与
「mailtoで始まるリンク」 → メールを表すアイコンを付与
「.pdfで終わるリンク」 → pdfファイルを表すアイコンを付与
などに使用すると便利でしょう。
以下のようなHTMLがあるとすれば、
HTML
<ul class="linkLi">
  <li><a href="http://www.webcyou.com">Web帳</a></li>
  <li><a href="http://www.google.co.jp">google</a></li>
  <li><a href="index.php">サイト内リンク</a></li>
  <li><a href="sample.pdf">PDFファイル</a></li>
  <li><a href="mailto:info@sample.com">Eメール</a></li>
</ul>

以下のようなcssでそれぞれのリンクにあったアイコンを付与することができます。
.linkLi a{
padding-left: 20px;
background: url(sp.gif) no-repeat;
}
.linkLi a[href^="http://"],
.linkLi a[href^="https://"]{
background-position: 0 -28px;
}
.linkLi a[href^="mailto"]{
background-position: 0 -53px;
}
.linkLi a[href$=".pdf"]{
background-position: 0 -77px;
}
便利になりましたねー。
  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。