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

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

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

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Amazon:スマホでPC版サイトを開いたらスマホ版に戻れなくなった (12/02)
  • Windows:アプリの音量が勝手に変更される (11/30)
  • かしこいかわいい新PC「エリーチカ」がやってきた(時々ポンコツ) (11/28)
  • Windows:目的毎,ファイルの種類(拡張子)毎に既定アプリを変更 (11/25)
  • Windows:ヘッドホン(イヤホン)から音が出ないときの対処法 (11/23)
  • 管理人より
    2000万アクセス突破しました。ありがとうございます。

    ちゃんと覚えてる?属性を使った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%)はあまり多くないので
    個人サイトなら無視しても大丈夫かなって…。








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




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





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

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

    ブログパーツ