[CSS] URLのハッシュクエリをselectorする方法

2023年12月21日

CSS

eyecatch ページの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の技術負債と言っても良いかも知れませんが、この2つは、内部リンクに関しては同じ動きをします。 安定的に使いたい場合は、個人的には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)

あとがき

ChatGPTにできないと言われたけど、過去に何処かの書籍かWebサイトで見たことあるな〜と古い記憶を辿りながら検証してみたところ、ハッシュリンク参照まで行き着いたので、あきらめなかった技術の勝利と言ってもいいでしょう。 でも、この機能一体何処で使うの?と思ってしまった人、まだまだWebサイトを作ったことがある経験の少ない人じゃないでしょうか? LPなどたくさんのページ作成をしたことがある人、いままさに作っている人は、あんな事やこんな事ができるだろう!という風に考えてワクワクしてきませんか? そんな意味ありげな本日のブログでした。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。