Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What is going on with this article?
@okumurakengo

Chrome80からデフォルトでURLのフラグメントでテキストを指定してスクロールできるようになったので試してみた

More than 1 year has passed since last update.

初心者です。間違いなどありましたら教えていただけるとありがたいです。

参考

urlで何かしらテキストを指定して、ページの特定の部分にリンクできます。
ブラウザはテキストを強調表示し、スクロールして表示してくれる機能です。


Scroll To Text Fragment

例えば「 https://ja.wikipedia.org/wiki/ネコ#:~:text=ネコ科動物を指す 」にリンクすると指定の場所までスクロールしてくれるのを確認できました

apFYpVND0o.gif


今までもhtmlのid属性に対して、「 https://ja.wikipedia.org/wiki/ネコ#体格 」 などとフラグメント付きでリンクしてもその場所までスクロースしてくれたのですが、
これだとhtmlが<div id="体格">となっている場所にしかできなかったので、本当にリンクしたい部分と若干ずれていたり、id属性がないとそもそもページ内を指定してリンクすることができなかったので、個人的にこの機能は便利だと思いました。:grinning:

構文

:~:text=[prefix-,]textStart[,textEnd][,-suffix]

textStartのみが必須で、残りはオプショナルです

  • textStart のみを指定した場合はその文字と一致する場所にスクロールしてくれるようでした

  • textEndも指定すると、textStarttextEndの範囲で参照できます

指定テキストが長い場合はこちらの方が良さそうです

Screen Shot 2020-02-24 at 0.40.56.png


  • prefix--suffix を指定すると指定の文字がページ内に複数ある場合に絞り込める

prefix--suffix無しの場合

ページ内の一番最初の「リビアヤマネコ」にスクロールしてくれる

Screen Shot 2020-02-24 at 1.11.25.png

prefix-ありの場合

「亜種」という文字の次の「リビアヤマネコ」にスクロールしてくれる

Screen Shot 2020-02-24 at 1.14.18.png

-suffixありの場合

「の生息」という文字の前の「リビアヤマネコ」にスクロールしてくれる

Screen Shot 2020-02-24 at 1.18.18.png

以上です。見ていただいてありがとうございました。:bow:

11
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
okumurakengo
人が作ってくれたご飯食べるときに何も言わずに食べるのは、ちょっとダメらしいという話を聞いたことがあるので、「あ、うめ、あ、うめ」って言いながら食ってたら、すごい変な人と思われてしまってしまった/初心者です、あまりわかっていません
qiitadon
Qiitadon(β)から生まれた Qiita ユーザー・コミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
11
Help us understand the problem. What is going on with this article?