Help us understand the problem. What is going on with this article?

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

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

参考

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 のみを指定した場合はその文字と一致する場所にスクロールしてくれるようでした

https://ja.wikipedia.org/wiki/ネコ#:~:text=ネコ科動物を指す

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

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

https://ja.wikipedia.org/wiki/ネコ#:~:text=穀物には手を出さず,家畜化に繋がった

Screen Shot 2020-02-24 at 0.40.56.png


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

prefix--suffix無しの場合

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

https://ja.wikipedia.org/wiki/ネコ#:~:text=リビアヤマネコ

Screen Shot 2020-02-24 at 1.11.25.png

prefix-ありの場合

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

https://ja.wikipedia.org/wiki/%E3%83%8D%E3%82%B3#:~:text=亜種-,リビアヤマネコ

Screen Shot 2020-02-24 at 1.14.18.png

-suffixありの場合

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

https://ja.wikipedia.org/wiki/%E3%83%8D%E3%82%B3#:~:text=リビアヤマネコ,-の生息

Screen Shot 2020-02-24 at 1.18.18.png

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

okumurakengo
人が作ってくれたご飯食べるときに何も言わずに食べるのは、ちょっとダメらしいという話を聞いたことがあるので、「あ、うめ、あ、うめ」って言いながら食ってたら、すごい変な人と思われてしまってしまった/初心者です、あまりわかっていません
https://bokete.jp/user/okumurakengo
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした