やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

HTML文書をつくる3 アンカー、ポータル(a, portal)

 HTMLのなにがハイパーかって? そりゃほかの文書とつながれる所に決まってる。

アンカー(リンク)

<a href="リンク先URL">表示テキスト(記事の見出しやサイト名など)</a>

 HTMLがハイパーなテキストである理由のひとつは、ほかの文書にリンクできるからだ。そのリンクをあらわす要素が<a>である。<a>なくしてHTMLは語れない。<a>がない文書なんてハイパーじゃない。

 他の要素を<a>で囲むとそれ全体がリンクになる。

<a href="..."><img src="..."></img></a>

 アンカー(内部リンク)するには#idとする。

<a id="anchor-1"></a>
<a href="#anchor-1">アンカー1</a>

 アンカーはよく目次などで使われる。リンクをクリックするとその位置までスクロールする。ナビゲーションの一種。

<h1>目次</h1>

<ol>
    <li><a href="#anchor-1">アンカー1</a></li>
</ol>

<a id="anchor-1"></a>
<h1><a href="#anchor-1">アンカー1</a></h1>

portal

 <portal>はリンク先のHTMLをプレビューしつつ、そこへのリンク遷移を提供する。ただし<iframe>のように操作はできない。残念ながらこの記事を執筆した時点では、どのブラウザも未実装っぽい。私の環境でも表示されなかった。

<portal src="https://www.google.co.jp/"></portal>

 かつてはこれがやりたくて、サイトの画像を<img>で定義しつつ、<a>で囲ってリンクしていた。けれどサイトが変更されても画像は変更されないので不満があった。

 かつては<frame>でサイトをまるごと埋め込むこともできたが、それはオーバースペック。ムダにサイトが重くなってしまう。セキュリティ問題もあった。

 サイトの見た目をプレビューしつつ、リンクを提供する。それができるのがportal要素だ。

 ChromiumブラウザだとURL欄に以下のように入力し、それをEnabledに変更することで有効になるらしい。

chrome://flags/#enable-portals

 でも、私のブラウザでは表示できなかった。

所感

 portal使ってみたかったなぁ。

対象環境

$ uname -a
Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux