ページのURLを参照して、特定のURLの時のみに適用されるスタイルシートを書きたいな〜と思ったんですが、ChatGPTに、次のように言われてしまいました。
Q. ワイ cssでURLアドレスの#の内部リンクを参照して分岐する方法を教えて A. ChatGPT CSSは通常、要素のスタイルを指定するためのスタイルシート言語であり、ページの構造や挙動の制御には限定的です。 URLの#の内部リンクを参照して分岐するには、通常はJavaScriptを使用します。な〜んだ、できないのか〜と思ってしまったらそこで試合は終了です。 確かにURLを文字列として参照する事はCSSではできませんが、ハッシュリンクはできます。 そう、ハッシュリンク・セレクターはあるんです！
ハッシュリンク・セレクター
この名称が正確なのかどうかは正直知らんけど、リファレンスには、URL のフラグメントという言葉で書かれていたので、わかりにくいな〜と思って、個人的にこのように読んでいます。URLアドレスのハッシュリンク（フラグメント）について
https://example.com/index.html?page=sample#main
上記のようなURLの場合に、#mainの部分がハッシュリンクとか、内部リンク（またはフラグメント）と言います。
HTMLタグとの連携
この内部リンクは、以下のHTMLタグを画面内に表示するように自動スクロールさせます。<a name="main">ハッシュリンクとname属性のリンク</a>
または
<div id="main">ハッシュリンクとname属性のリンク</div>
お気づきのように、「name属性とid属性のどっちを使えばいいのか？」と思うでしょう？
このname値はHTMLの技術負債と言っても良いかも知れませんが、この２つは、内部リンクに関しては同じ動きをします。
安定的に使いたい場合は、個人的にはidを使うようにしています。
:target
CSSの疑似クラスの:targetを使うことで、htmlのid値に対してselectorを適用することができます。 上記のサンプルURLに対して以下のcssで対象の要素がselectorで適用されます。#main{
color:black;
}
#main:target{
color:red;
}
※cssの内容
内部リンクがそのID値になった場合に、文字が黒から赤に切り替わります。
サンプル
実際の動きがわかるようにサンプルを作っておきました。 id値とname値も一緒にセットしてるので、参考にしてみてください。 (name値はaタグにしか使えないようです） あと、ちなみに、id値とname値が同じ値のものが存在するとcssが適用されなくなることがわかりました。（ついでに検証してみました）<a href="#link1">Link-1</a>
<a href="#link2">Link-2</a>
<a href="#link3">Link-3</a>
<div class="content" id="link1"><p>Link-1</p></div>
<div class="content" id="link2"><p>Link-2</p></div>
<a class="content" name="link3"><p>Link-3</p></a>
<style>
a{
display:block;
margin-bottom:10px;
}
.content{
height:20vh;
border:3px dotted black;
margin-bottom:10px;
}
#link1:target,
#link2:target,
[name="link3"]:target{
color:red;
border-color:red;
}
</style>
Link-1
Link-2
Link-3
Link-1
Link-2
Link-3
追記: ハッシュリンク有り->無しはページ読み込みが必要？
ハッシュリンクついでに、個人的に少し悩んだ点を追記しておきます。 ハッシュリンクのURLをAタグをクリックすると、同じページ内であれば、ページ遷移せずにページ内でリンクが行われます。 （なのでページ内リンクって呼ばれているんでしょうね） 次のそのハッシュリンクをURLから取り除きたい場合、ハッシュリンク無しで元のURLをクリックすると、ページ遷移されてしまいます。 これをページ遷移せずにリンクしたい場合は、次のように書くしか無いようです。<a href="#">内部リンク</a>
どうしても#を消したい場合は、javascriptで次のようにすると取り去ることはできます。
const url = location.href.split("#")[0]
history.pushState(null , null , url)
0 件のコメント:
コメントを投稿