「CSS」:targetで移動先の要素にCSSを適用する
書式
セレクタ名:target{
}
#名称のリンクをクリックすると移動先の要素にCSSを適用します。
使用例
<style>
#cftA:target {
font-size: 25px;
background-color: green;
}
#cftB:target {
font-size: 25px;
background-color: SkyBlue;
}
</style>
<body>
<p><a href="#cftA">東京について</a></p>
<p><a href="#cftB">大阪について</a></p>
<div id="cftA">東京都区部は、東京都の23の特別区</div>
<div id="cftB">大阪市は本州にある広大な港湾都市</div>
</body>
<style>
#cftA:target {
font-size: 25px;
background-color: green;
}
#cftB:target {
font-size: 25px;
background-color: SkyBlue;
}
</style>
<body>
<p><a href="#cftA">東京について</a></p>
<p><a href="#cftB">大阪について</a></p>
<div id="cftA">東京都区部は、東京都の23の特別区</div>
<div id="cftB">大阪市は本州にある広大な港湾都市</div>
</body>
<style>
#cftA:target {
font-size: 25px;
background-color: green;
}
#cftB:target {
font-size: 25px;
background-color: SkyBlue;
}
</style>
<body>
<p><a href="#cftA">東京について</a></p>
<p><a href="#cftB">大阪について</a></p>
<div id="cftA">東京都区部は、東京都の23の特別区</div>
<div id="cftB">大阪市は本州にある広大な港湾都市</div>
</body>
結果
「東京について」リンクをクリックするとdivのcftAリンク先に遷移します。