anti scroll

ブラウザと小説の新しい関係を模索する

アンカーリンクと、リンク先のプレビューに対応しました

アンカーリンクと、リンク先のプレビューに対応しました。

アンカーリンクとは

id属性を付けた要素に対して、<a href="#そのidの値">...</a>のように宣言したリンクのことを、アンカーリンクといいます。

リンクのhref属性の値が #(シャープ)から始まっていることに注意してください。

こうして作成したリンクは、

  1. クリックすると、リンク先の要素が記述されたページに移動できます。
  2. マウスを乗せると、リンク先の要素がプレビューで確認できます。

記述例1

<blockquote id="bq1">「強い者が勝つのではない。勝った者が強いのだ」</blockquote>
[page-break]
この<a href="#bq1">発言</a>は、ドイツの皇帝と呼ばれた「ベッケンバウアー」によるものです。

f:id:convertical:20210220100100p:plain
マウスを乗せるとアンカーリンク先のプレビューが表示される

ここではblockquoteタグに使っていますが、imgタグなどに使っても便利だと思います。

記述例2

他にも、先頭ページに空のaタグをid="top"のような属性で宣言しておいて、最終ページから「先頭ページに戻る」みたいなリンクを貼ることもできます。

<a id="top"></a>
冒頭の文章
[page-break]
最終ページの文章
<a href="#top">トップページに戻る</a>

この場合、リンク先の中身は空なので、マウスを乗せてもプレビューは表示されません。

記述例3

アンカーリンクを利用して、ちょっとしたゲームブックを作成することもできます。

その他