HTMLでの脚注のつけ方【現役エンジニアが解説】
今回は、HTMLでの脚注のつけ方について、本文側と脚注側の書き方に分け、簡単に解説していきます。
本文側の書き方
本文では脚注へのリンクをaタグを使って作っていきます。
脚注の番号はsupタグを使うと上部に表示されるのでわかりやすくなります。
Web系のプログラミングはクライアント側<sup id="ref1"><a href="#footnote1">1)</a></sup>とサーバ側<sup id="ref2"><a href="#footnote2">2)</a></sup>に分けられる。
上記のコードでは、Web系プログラミングについて、クライアント側とサーバ側の脚注のリンクを表示しています。
脚注側の書き方
脚注側にも同様に本文側へのリンクをaタグを使用して作ります。
脚注の番号はolタグとliタグを使って、本文側と順番が一致させるようにします。
<ol>
<li id="footnote1"><a href="#ref1">^</a>主にJavaScriptを指す</li>
<li id="footnote2"><a href="#ref2">^</a>PHPやJava等を指す</li>
</ol>
上記のコードでは、クライアント側とサーバ側についての脚注をそれぞれ番号付きかつ本文へのリンク付きで表示しています。
脚注へのリンク
脚注へは、aタグのhref属性に”#id名”を指定することで移動できます。
外部のサイトからリンクを作りたい場合には、ページアドレスの末尾に”#id名”を追記します。
<a href="https://www.example.com/programming#ref1">クライアント側の本文</a><br> <a href="https://www.example.com/programming#footnote1">クライアント側の脚注</a>
上記のコードでは、先程のWeb系プログラミングについてのページのクライアント側という用語の本文と脚注への外部用のリンクをそれぞれ表示しています。