スタート!CSS入門

属性セレクタ

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
特定の属性名や値を持つ要素に対してスタイルを付加するときは、属性セレクタを使います。属性セレクタが持つ複数の書式を紹介します。
講師:
10:17

字幕

このレッスンでは特定の属性名や値を持つ要素に対してスタイルを設定するときに使う属性セレクタについて紹介します。属性セレクタは大きく分けて4種類あります。次のリストを御覧ください。1つめはある属性名を持つ要素を対象にするセレクタです。属性があれば、その値はなんでも構いません。実際に CSS を書いてみましょう。編集画面とウェブブラウザを並べて開きます。ここではコードを編集するIDE の機能を使って編集内容をリアルタイムにウェブブラウザでプレビューできるように設定しています。ウェブブラウザの上部にはそのための注意文が表示されていますが無視してください。通常はコード editor でコードを書き換えてからウェブブラウザで再読み込みすると編集内容が反映されます。ここでは a 要素のように、 href 属性を持つ要素をセレクタにしてみましょう。HTML を確認するとhref 属性を持つ要素がHTML の中にいくつかあることが確認できます。このように、ある属性名を持つ要素を属性セレクタで指定するには属性名をブラケットで囲みます。ブラケットとはこのようなカッコのことです。ブラケットの間に href と入力しセレクタとして完成させます。 このセレクタに対して文字色を赤になるように設定します。ここでは e74c3c という値を入力します。するとウェブブラウザを見ると属性セレクタによってhref 属性を持つ要素の文字色が赤系の色に変わったことがわかります。属性セレクタのリストに戻りましょう。二つ目の属性セレクタはある属性名に加えてある値を持つ要素を対象にするセレクタです。属性名と値は書いた内容は完全に一致する必要があります。実際に CSS を書いてみましょう。もう一度編集画面とウェブブラウザを開きます。ここでは href 属性を持つ要素の中から特定の url を値にした要素をセレクタにしてみましょう。HTML を確認するといくつかの href 属性が存在しますがここではリストの中の二番目の項目であるa 要素の href 属性の値の url を一旦コピーしておきます。この url が href 属性の値として設定されている要素をセレクタとして記述してみましょう。先ほどと同様に属性名をブラケットで囲みます。値を指定するには属性名に続いて記号のイコールダブルコーテーションを二つ入力します。このダブルコーテーションの中に先ほどコピーしておいた値をペーストします。 このような書式でセレクタを指定することで特定の値を特定の属性に持つ要素をセレクタとして設定することができます。ここでは先ほどと違って文字色を青に設定してみましょう。color プロパティを使って文字色を設定します。ウェブブラウザを見るとリストの中の二番目の項目だけ文字色が青系の色になっていることがわかります。属性セレクタのリストに戻りましょう。三つ名の属性セレクタはある属性に加えて複数の値が半角スペース区切りで指定されているときに限りそのいずれかの値を持つ要素を対象にするセレクタです。言葉で表現すると少しわかりにくいので実際に CSS を書いてみましょう。編集画面とウェブブラウザをひらきます。HTML を見るとリストの各項目にある a 要素はdata-license という属性とdata-license2 という属性をそれぞれの a 要素が持っていることがわかります。これは HTML5 のカスタムデータ属性というものでウェブページの制作者がHTML の各要素に独自のデータを埋め込み格納することができる機能です。カスタムデータ属性の値の書式は自分で自由に決めることができます。すでにそれぞれの a 要素のdata-licenseというカスタムデータ属性には半角スペースで区切られて様々なデータが複数入っています。 リストの4番目の項目を見るとこの data-license 属性にだけbusiness という値が持っていることがわかります。これを属性セレクタでセレクタにしてみましょう。先ほどと同様にブラケットで属性名を囲みます。今回は data-license という属性を指定しますのでdata-license と入力します。この属性名に続いて記号のチルダイコールさらにダブルコーテーションを二つこのダブルコーテーションの間に値を入力します。ここでは business と入力します。これでセレクタの完成です。文字色を赤、青とは違い緑色になるように設定してみましょう。color プロパティを使って文字色を設定します。すると意図通りウェブブラウザではリストの4番目の項目の文字色が緑色になっていることがわかります。属性セレクタのリストに戻ります。最後の属性セレクタはある属性名に加えて複数の値がハイフン区切りで指定されてるときその先頭の値を持つ要素を対象にするセレクタです。こちらも言葉表現するとわかりにくいので実際に CSS を書いてみましょう。編集画面とウェブブラウザをひらきます。HTML を確認してみます。 リストの中にある a 要素ではdata-license2 というカスタムデータ属性にハイフンで区切られて複数の値が入力されていることがわかります。この中でリストの最後の項目ではdata-license2という属性の値として唯一フリーという値がdata-license2 属性の先頭に設定されています。これをセレクタにしてみましょう。なお、ハイフン区切りでも先頭以外に指定した値とはマッチしませんので注意してください。では、セレクタを作成します。先ほどと同様に属性名をブラケットで囲みます。ここでは data-license2 という属性を使います。さらに属性名に続いて縦線これはパイプラインとも呼ばれる記号です。続いてイコールそしてダブルコーテーションを入力します。このダブルコーテーションの中にfree という値を入力します。これでセレクタの完成です。これまでの赤、青、緑という文字色と違って最後はオレンジ色になるように設定してみましょう。color プロパティを使って文字色を設定します。ウェブブラウザを見るとリストの最後の項目だけ文字色がオレンジ色になっていることがわかります。属性セレクタによってdata-license2という属性の先頭に free という値をハイフン区切りで持っている要素だけ抽出することができました。 それでは属性セレクタのリストに戻ります。なおこれらの属性セレクタは現在一般に最も普及している CSS2.1 に基づくもので他のバージョンでは若干異なることに注意してください。このレッスンでは特定の属性名や値を持つ要素に対してスタイルを設定するときに使う属性セレクタについて学びました。

スタート!CSS入門

CSSはWebページに視覚的な表現、つまりスタイルを与えるための言語です。HTMLと組み合わせることで、より自由なデザインをウェブ上で実現できます。このコースでは初めてCSSに触れる方でも体系的な理解が得られるように、Web標準としての仕様の成り立ちからさまざまな文法、ボックスモデルなどの基本概念まで幅広い内容を解説します。

5時間21分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年11月25日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。