SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.07.20
  • CATEGORY
TITLE

【CSS】target擬似クラス lang擬似クラスの使い方!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【CSS】target擬似クラス lang擬似クラスの使い方
についての解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • :target、:langの使い方について学びたい方へ
  • 今回はターゲット擬似クラスと言語情報擬似クラスを学習しよう

今回はtargetlangについての解説になります。
ターゲット擬似クラス(target)とは、アンカーリンクのターゲット先の要素にスタイルを適用します。
言語情報擬似クラス(lang)とは、特定の言語が指定された要素にスタイルを適用します。

target ターゲット擬似クラス

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 言語情報擬似クラス

:langとは、特定の言語が指定された要素にスタイルを適用します。
書き方は以下のようになります。

/*--target--*/
要素:lang {プロパティ: 値;}

主に、日本語は=ja、英語は=en、アメリカ英語は=en-USになります。

1つ目は、ja(日本語)に対して、文字色をyellowに指定しています。
1つ目は、en(英語)に対して、文字色をlimeに指定しています。

lang 言語情報擬似クラス

こんにちは

Hello

<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に関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top