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

ターゲット疑似クラス

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ページ内の特定の要素に対するリンクを設定したとき、リンク先の要素に対して移動後に限ってスタイルを付加するときは、ターゲット疑似クラスを使用します。ここでは、ターゲット疑似クラスの使い方について紹介します。
講師:
03:43

字幕

ページ内の特定の要素に対するリンクを設定したときリンク先の要素に対して移動後にかぎってスタイルを適用するときはtarget 疑似クラスを使います。このレッスンでは target 疑似クラスの使い方について紹介します。画面では左側に HTML と CSS の編集画面、右側にその表示結果をレンダリングするウェブブラウザを表示しています。HTML を見ると少し下の a 要素にhref 属性の値として記号の # とposition という値が設定されています。これはある id 属性に対してページ内のリンクを設定するという記法になります。ここでは position という文字列が設定されていますのでこの position という名前を id 属性に持つ要素に対してページ内リンクが適用されます。少し上の h2 要素を見るとこの h2 要素の id 属性にposition が設定されています。そのためこの「見出しに戻る」という文字列をクリックすると「一 午後の授業」と書かれた部分までページ内リンクが実行されます。ここでは target 疑似クラスを使ってこのページ内リンクを実行し後、移動した後のスタイルを適用するようにしてみましょう。 CSS では違いが分かりやすいようにすでにposition id に対して赤の文字色、赤のボーダーが設定されています。ウェブブラウザを見てもそのように表示されていることが分かります。それではこの position id に対して target疑似クラスを使ってセレクタを記述します。まず同様に position id をセレクタとして記述します。さらにこれに続いて : そして targetという決められた文字列を入力します。こういう風に記述することで position id にページ内リンクで移動した後のスタイルを適用することができます。ここでは文字色を黒にカラープロパティを使って設定します。さらにボーダーはなしに設定してみましょう。ここで設定したスタイルはページ内リンクを使ってジャンプした後のスタイルになりますので新しく書き加えた状態はまだレンダリング結果に反映されていません。それではこの「見出しに戻る」リンクをクリックしてみましょう。「見出しに戻る」をクリックします。いかがでしょうか。元々適用されていた赤の文字色と赤のボーダーが無くなり新しく書いた黒の文字色、ボーダーなしというスタイルが適用されていることが分かります。 このレッスンではページ内の特定の要素に対するリンクを設定したときリンク先の要素に対して移動後にかぎってスタイルを適用するときに使うtarget 疑似クラスの使い方について学びました。

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

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

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

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

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

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