CSS3の基本 - レベルアップCSS

属性クラスタ

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

ぜひご覧ください。

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

字幕

特定の属性名や値を持つ要素に対してスタイルを付加するときは属性クラスタを使います。このレッスンでは CSS3 で追加された属性セレクタの書式を紹介します。ウェブブラウザではさまざまな a 要素がリストになって表示されています。HTML を見るとa 要素のリンク先である href 属性にはさまざまなリンク先が設定されています。ここでは特定の属性名が特定の値を持つようにセレクタを作成してみましょう。ここで紹介する属性セレクタの3つの書式はCSS3 で加えられた新しい書式です。順に紹介していきましょう。まず1つ目は属性の値が指定した値で始まるという指定です。例えば現在の HTML ではほとんどの href 属性の値が http:// という通常の URL の形式で始まっています。そのためここではこれに対してセレクタを作ってみましょう。まず属性セレクタでは指定したい属性をブラケットという括弧で括ります。ブラケットはこのような括弧のことです。そしてブラケットの中に指定したい属性の名前を書きます。ここでは href 属性を指定したいのでhref と入力します。そして指定した値で始まるという指定は記号の ^ さらに記号の =こちらを入力して値をダブルクオーテーションで囲みます。 ここで指定する値は http:// という値です。このセレクタを書くことによって属性の値がhttp:// で始まる場合このセレクタが有効になるという指定になります。ここでは文字色に赤を指定してみましょう。カラープロパティを使って赤を指定します。ウェブブラウザを見ると先ほどまで青かったリンク先の色が赤く変わっていることが分かるかと思います。続いて属性の値が指定した値で終わるという属性セレクタを紹介します。ここではリストの中に含まれる a 要素でリンク先を示す href 属性の値が最後に .com/ で終わっているこちらの要素だけをセレクタとして抽出するように設定してみましょう。それでは CSS を書いていきます。属性セレクタを指定しますので同じようにブラケットを入力します。そして今回も href 属性です。これに対して指定した値で終わるという指定をするには記号の記号の $ 記号そして同じように = の記号。この後に指定した値をダブルクオーテーションで囲みます。ここでは .com/ という値で終わってほしいのでこのように入力してセレクタを作成します。ここでは文字色を青系の色に設定してみましょう。 指定がうまくいけばこちらのウェブブラウザではこの「 Sublime Text 」という文字列が青に変化するはずです。それでは書いてみましょう。カラープロパティを使って青系の色に2980b9という値を指定します。ウェブブラウザを見ると予定通りこの「 Sublime Text 」という文字列のリンク色だけが青系の色に変化しました。それでは最後に属性の値に指定した値が含まれるという属性セレクタを作ってみます。これは値の位置が最初であったり最後であったりといったことに関係なく属性の値の中のいずれかの位置に文字列が含まれていれば合致するというセレクタになります。それでは CSS を書いていきます。同じようにブラケット href と入力します。ここでは指定した値が含まれるという指定をするために記号の * と = を入力します。さらに値を指定するダブルクオーテーションで囲み値を指定します。さてどういう値を指定するかですがリストに含まれる a 要素を確認してみると冒頭の2つの a 要素の中にはstorm という言葉が含まれていることが分かります。ここではこの冒頭の2つの要素に対して文字色を設定するためstorm という文字列を設定してみましょう。 先ほど作ったダブルクオーテーションの中に storm と入力します。これでセレクタは完成です。storm という文字列が href 属性の値の中に場所を問わず含まれていれば合致します。最後に指定するのは緑色のカラープロパティです。2ecc71 という値を指定します。ウェブブラウザを見るとリストのリンクの1項目目と2項目目だけのリンクの文字色が緑色になっていることが確認できました。このレッスンでは特定の属性名や値を持つ要素に対してスタイルを付加するときに使う属性セレクタについてCSS3 で追加された属性セレクタの書式を勉強しました。

CSS3の基本 - レベルアップCSS

CSS3はこれまでのCSSとの互換性を保ちつつ、より豊かな表現力を備えたCSSの新しいバージョンです。このコースでは、CSS3の膨大な仕様の中から比較的幅広い環境で動作する機能を中心に解説していきます。また異なるWebブラウザによる表示のされ方の違いに対しても、プログレッシブ・エンハンスメントに代表されるようないくつかのアプローチを取り上げ、紹介します。

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

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

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

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