こんにちは。
今回は、CSSプロパティtargetの説明をします。
その悩みには、リンクターゲットに関するプロパティをまとめて指定するCSSプロパティtargetが使えます。今回は、CSSプロパティtargetの
・便利な疑似クラス
について説明します。
目次
targetとは
targetの読み方
「target」とは「ターゲット」と読みます。意味は「目標」という意味です。
targetプロパティの説明
一般に擬似クラスと呼ばれているプロパティです。
クリックしたリンク先の要素に対し、CSSでの装飾を一括で指定するときに使います。例えば、リンク先の文字の色や背景を同時に変えるとか、いうことができます。
アンカーリンクによって移動した先を分かりやすくするためや、目次などで利用されることが多いです。他にも、拡大・縮小したり、スライダーやアコーディオンにしたりと色々なことができます。
要素が、URLで参照先（アンカーリンク）になっている時だけ、スタイルが適用されます。
以下でもう少し詳しくサンプルコードを入れた説明をします。
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 12 |
| Firefox | 完全対応 |
| Internet Explorer | 9 |
| Opera | 9.5 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 2 |
| Android版Chrome | 18 |
| Android版Firefox | 4 |
| Android 版 Opera | 10.1 |
| iOS版Safari | 2 |
| Samsung Internet | 完全対応 |
targetプロパティの基本的な使い方
targetプロパティの使い方
targetプロパティは疑似クラスです。疑似クラスは、要素名の後に「：（コロン）」を付けて記述します。
要素名:target {プロパティ: 値;}
ある要素を装飾したいとき、要素名の後に：target疑似クラス、装飾したいプロパティと値を入れます。
例として、リンクをクリックすると、リンク先が非表示になるサンプル、文字色が変更するサンプルの2つを見てみましょう。
例えば、#link01というアンカーリンクをクリックすると表示しないようにするときは、#link01の後に:target擬似クラス、displayプロパティの値noneを記述すると
|
1 2 3 |
#link01:target{ display:none; /*表示をしない*/ } |
CSSが適用され、リンクを表示しないようにできます。
今度は、#link02というアンカーリンクの文字の色を変えたい時（この場合は赤色）です。link02のリンクをクリックすると、#link02に:target擬似クラスのCSS
|
1 2 3 |
#link02:target{ color: #ff4e4f; /*--文字色--*/ } |
が適用され、文字色が赤色になります。
See the Pen
QWGErjK by Sachiko (@yivliriy)
on CodePen.
このように、:targetを付けることで指定したアンカーリンクに対して、装飾ができます。
この他にもアンカーリンクをクリックすると、移動先の要素の文字が太くなったり背景色が変わったりといった様々な指定ができます。
便利な疑似クラスの説明と、関連する疑似クラスのサンプル例
targetのように疑似クラスと呼ばれているプロパティは他にもあります。
疑似クラスとは選択された要素に対して、スタイルを適用できる指定方法です。CSSでスタイルの対象を指定する役割があります
疑似クラスが指定する要素は、特定の状態を持っている場合に限ります。。ざっくりいうと、条件によって違うCSSを当てる事が可能になるのです。
では、targetのようにリンクに関する疑似クラスhoverを使って説明します。hoverは対象の要素が、マウスが合わせられた状態である場合を指し示します。
例えば、下記のようにセレクタを書けば、p要素の上にマウスポインタが載っているときにだけ適用されるスタイルを表示することができます。
|
1 |
p:hover { プロパティ: 値; } |
hoverを使ったサンプルと、使っていないサンプルとを比べてみましょう。
See the Pen
yLVJqqJ by Sachiko (@yivliriy)
on CodePen.
このように指定したい要素にhoverを使うと、カーソルを当てた時にリンクの文字色が赤色になります。
targetプロパティのようにリンクに関連する疑似クラス
link
a:link {プロパティ: 値;} 指定した要素（aタグ）が、まだ訪れていない状態を表します。一度でもリンク先に訪れた場合、「:link」の対象ではなくなります。
visited
a:visited {プロパティ: 値;} 「:link」との反対の疑似クラスです。aタグに対して、リンク先に訪問済の状態を表します。
See the Pen
oNYLMJy by Sachiko (@yivliriy)
on CodePen.
リンクを未訪問の時はブルーですが、一度訪問すると赤色に変わりました。他にも色々な疑似クラスがあります。
まとめ
いかがでしたか？
今回は、リンクターゲットに関するプロパティをまとめて指定するCSSプロパティtargetの基本的な使い方と便利な疑似クラスについて説明しました。
使うことが多いプロパティですので、覚えておいてください。
参考文献：:target – CSS: カスケーディングスタイルシート | MDN 、 Selectors Level 4
