今回は【CSS】target擬似クラス lang擬似クラスの使い方
についての解説になります!
こんな方に読んでほしい
- CSSを学び始めた方へ
-
:target、:lang
の使い方について学びたい方へ - 今回はターゲット擬似クラスと言語情報擬似クラスを学習しよう
今回はtargetとlangについての解説になります。
ターゲット擬似クラス(target)とは、アンカーリンクのターゲット先の要素にスタイルを適用します。
言語情報擬似クラス(lang)とは、特定の言語が指定された要素にスタイルを適用します。
target ターゲット擬似クラス
:target
とは、アンカーリンクのターゲット先の要素にスタイルを適用します。
書き方は以下のようになります。
/*--target--*/
要素:target {プロパティ: 値;}
htmlのアンカータグ(#link01)に対して、CSSでの装飾を指定します。
指定する際には、#link01:target
の様な形で指定します。
1つ目の要素をクリックすると、targetによりボックスの背景色が変更します。
2つ目の要素をクリックすると、targetにより線が追加します。
3つ目の要素をクリックすると、targetにより背景色と文字色が変更します。
target ターゲット擬似クラス
1:box
2:targetによりボーダー線が追加します
3:targetにより背景色と文字色が変更します
<ul class="target-list">
<li><a href="#link01">1:targetによりボックスの色が変更します</a></li>
<li><a href="#link02">2:targetによりボーダー線が追加します</a></li>
<li><a href="#link03">3:targetにより背景色と文字色が変更します</a></li>
</ul>
<div class="area">
<div id="link01">1:box</div>
<div id="link02">2:targetによりボーダー線が追加します</div>
<div id="link03">3:targetにより背景色と文字色が変更します</div>
</div>
/*--以下省略--*/
/*--1つめ目 target--*/
#link01{
width: 150px;
height: 150px;
/*--以下省略--*/
}
#link01:target{
background: #ff4e4f; /*--背景色--*/
color: #fff; /*--文字色--*/
}
/*--2つめ目 target--*/
#link02:target{
border: solid 4px #ff4e4f; /*--ボーダー線--*/
color: #fff #ffffff; /*--文字色--*/
}
/*--3つめ目 target--*/
#link03:target{
background-color: #ffffff; /*--背景色--*/
color: #ff4e4f; /*--文字色--*/
}
lang 言語情報擬似クラス
:lang
とは、特定の言語が指定された要素にスタイルを適用します。
書き方は以下のようになります。
/*--target--*/
要素:lang {プロパティ: 値;}
主に、日本語は=ja、英語は=en、アメリカ英語は=en-USになります。
1つ目は、ja(日本語)に対して、文字色をyellowに指定しています。
1つ目は、en(英語)に対して、文字色をlimeに指定しています。
<p lang="ja">こんにちは</p>
<p lang="en">Hello</p>
/*--日本語に適用--*/
p:lang(ja) {color:yellow;}
/*--英語に適用--*/
p:lang(en) {color:lime;}
まとめ
今回はこれで以上です
- POINT
- ターゲット擬似クラス(target)とは、アンカーリンクのターゲット先の要素にスタイルを適用します。
- 言語情報擬似クラス(lang)とは、特定の言語が指定された要素にスタイルを適用します。
- 主な言語、日本語は=ja、英語は=en、アメリカ英語は=en-USになります。
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事