このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

ちゃんと覚えてる?属性を使ったCSSの記述方法

このエントリーをはてなブックマークに追加
イメージ


こんにちは、さち です。

サイト制作、Stylish を使ったCSS改造 など
CSS を使う機会は色々とあります。

しかし、属性を使った CSS の記述方法が中々覚えられない!
特に、前方一致,後方一致 あたりをすぐに忘れてしまう…。
どの記号を、どう使うと、どうなるん出るんだっけ?

今回は、属性を使った CSS の記述法についてまとめていきます。



「属性」って何?

HTML でいう「属性」とは
タグに埋め込まれた付加情報のことを指します。

例えば、次のような<a>タグなら赤字部分が「属性」
「=」の後の「"(ダブルクォート)」で囲まれた緑字部分が「属性値」です。
「属性」は情報の種類を、「属性値」は情報の内容を表しています。
属性値は半角スペースを挟むことで複数記述できます。
サンプル

このような「属性」「属性値」を CSS に活用すれば
id, class がないタグでもスタイルを指定できます。

属性によるCSSセレクタの記述は [ ](角括弧) で囲みます。
このようなセレクタを「属性セレクタ」と言います。
(IE6 以前は属性セレクタ未対応)
サンプル

例えば、上記の CSS の記述なら
属性「target」に属性値「_blank」を持つ<a>タグは
文字の色を赤くするという意味になります。



属性セレクタの書き方

<a>タグを使ったサンプルを見ていきます。
CSS が適用された<a>タグは文字の色が赤くなります。


a[target] (属性 完全一致)
属性「target」を持つ<a>タグにスタイルを適用。

CSS
a[target] {color: red;}

HTML
<a href="example1.html" target="_blank">まどか</a><br>
<a href="example2.html">ほむら</a><br>

サンプル結果
まどか
ほむら



a[title="madoka"] (属性値 完全一致)
属性「title」に属性値「madoka」を持つ<a>タグにスタイルを適用。

CSS
a[title="madoka"] {color: red;}

HTML
<a href="example1.html" title="madoka">まどか</a><br>
<a href="example2.html" title="kaname madoka">かなめ まどか</a><br>
<a href="example3.html" title="kaname-madoka">かなめ-まどか</a><br>

サンプル結果
まどか
かなめ まどか
かなめ-まどか



a[title^="mi"] (属性値 前方一致)
属性「title」の属性値が「mi」で始まる<a>タグにスタイルを適用。
「=」の前に「^(サーカムフレックス)」を付けると前方一致になります。

CSS
a[title^="mi"] {color: red;}

HTML
<a href="example1.html" title="miki-sayaka">みき さやか</a><br>
<a href="example2.html" title="akemi-homura">あけみ ほむら</a><br>
<a href="example3.html" title="tomoe-mami">ともえ まみ</a><br>

サンプル結果
みき さやか
あけみ ほむら
ともえ まみ



a[title$="mi"] (属性値 後方一致)
属性「title」の属性値が「mi」で終わる<a>タグにスタイルを適用。
「=」の前に「$(ドル)」を付けると後方一致になります。

CSS
a[title$="mi"] {color: red;}

HTML
<a href="example1.html" title="miki-sayaka">みき さやか</a><br>
<a href="example2.html" title="akemi-homura">あけみ ほむら</a><br>
<a href="example3.html" title="tomoe-mami">ともえ まみ</a><br>

サンプル結果
みき さやか
あけみ ほむら
ともえ まみ



a[title*="mi"] (属性値 部分一致)
属性「title」の属性値に「mi」を含む<a>タグにスタイルを適用。
「=」の前に「*(アスタリスク)」を付けると部分一致になります。

CSS
a[title*="mi"] {color: red;}

HTML
<a href="example1.html" title="miki-sayaka">みき さやか</a><br>
<a href="example2.html" title="akemi-homura">あけみ ほむら</a><br>
<a href="example3.html" title="tomoe-mami">ともえ まみ</a><br>

サンプル結果
みき さやか
あけみ ほむら
ともえ まみ



a[title~="madoka"] (属性値 部分一致)
属性「title」に属性値「madoka」を持つ<a>タグにスタイルを適用。
「=」の前に「~(チルダ)」を付けると特殊な部分一致になります。
属性値を「半角スペース」で区切って一致するものを探します。

CSS
a[title~="madoka"] {color: red;}

HTML
<a href="example1.html" title="madoka">まどか</a><br>
<a href="example2.html" title="kaname madoka">かなめ まどか</a><br>
<a href="example3.html" title="kaname-madoka">かなめ-まどか</a><br>

サンプル結果
まどか
かなめ まどか
かなめ-まどか
※ 完全一致の a[title="madoka"] だと2行目は適用されない
※ 前方一致の a[title^="madoka"] だと2行目は適用されない
※ 後方一致の a[title$="madoka"] だと全部適用される
※ 部分一致の a[title*="madoka"] だと全部適用される



a[lang|="ja"] (属性値 部分一致)
属性「lang」に属性値「ja」を持つ<a>タグにスタイルを適用。
「=」の前に「|(バーティカルバー)」を付けると特殊な部分一致になります。
属性値を「-(ハイフン)」で区切って一致するものを探します。

CSS
a[lang|="ja"] {color: red;}

HTML
<a href="example1.html" lang="ja-JP">魔法少女</a><br>
<a href="example2.html" lang="la-VA">PUELLA MAGI</a><br>
<a href="example3.html" lang="en-US">MAGICAL GIRL</a><br>

サンプル結果
魔法少女
PUELLA MAGI
MAGICAL GIRL

※ 文法に則るとラテン語表記は「PUELLA MAGA」らしい



属性セレクタは同時に複数使える

属性セレクタを複数記述することで
スタイル適用先をAND条件で絞り込むことが可能です。

a[title^="ka"][title$="ka"]
属性「title」の属性値が「ka」で始まり「ka」で終わる<a>タグにスタイルを適用。

CSS
a[title^="ka"][title$="ka"] {color: red;}

HTML
<a href="example1.html" title="kaname-madoka">かなめ まどか</a><br>
<a href="example2.html" title="kamijo-kyosuke">かみじょう きょうすけ</a><br>
<a href="example3.html" title="miki-sayaka">みき さやか</a><br>

サンプル結果
かなめ まどか
かみじょう きょうすけ
みき さやか


上記のような記述方法は
「div#madoka」と同様にセレクタを続けて記述したものなので
AND条件になるのは当たり前なのですが
属性での記述方法ではそのことを忘れてしまいがち。
ぜひ、覚えておきましょう。

例では、属性セレクタを2つ使いましたが
何個続けて記述しても構いません。



属性セレクタとプロパティ「content」を併用すれば
リンク先のファイル形式を表すアイコンや
外部ページへのリンクを表すアイコンを
リンク横に自動配置するなんてことも簡単にできます。

ちなみに、タグ名(要素名)は無記入でも構いません。
その場合、タグの種類はなく
指定した 属性,属性値 を持つすべてのタグに
スタイルが適用されます(*[title="madoka"] と同じ)。

慣れると便利な属性を使ったCSS記述法ですが
IE6 以前は対応していません
ただ、IE6 のシェア(約6%)はあまり多くないので
個人サイトなら無視しても大丈夫かなって…。



このエントリーをはてなブックマークに追加




ブログ移転に伴い、コメント受付は終了しました。



記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

2008-2019 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

ブログパーツ