第25回：HTML&CSS講座本編4「色々なリンクを貼ってみよう」
どうも、シノです。
目次を作った段階で内容が薄くなりそうだったので、急遽ここの文章を本腰入れて書いてます（笑）
ちょっと気になったことがあり、試しにやってみました。
私が書いた記事同士で、それぞれどういったリンクの貼り方をしているかを可視化してみました。
現時点(この記事を含む、投稿時点)を表示すると、こんな感じになるらしいです。
点が記事、矢印については(リンク元の記事)→(リンク先の記事)です。
点の色は、黒がブログトップ、赤がカラオケ講座、ちょい薄い赤がHTML&CSS講座、緑が考え方系、青が紹介系、水色が日常系です。
あ、最初点があらぶってますが仕様です（笑）10秒するとそこで止まるのでご安心を。お使いのPCは正常です。
それぞれの点の位置によって、自動で場所を動かす考え方を使っているのですが、恐らく点の数が少なすぎてあらぶってるんだと思います。
これは、JavaScriptで、「sigma.js」というものを使っています。気になる方向けに、こちらが今回参考にしたサイトです。
で、今後こういうのもできるように解説していきたいなーなんて漠然と考えています。
今回はその紹介みたいなものですね。こんなこともできるよって。
さて、前書きが長くなってしまいましたが本編にいきましょう。今回は平常運転回、HTML&CSS講座です。
前回の予告通り、第20回でやった内容のうち、解説できてないHTMLタグについて解説していきます。
早速、今回の目次です。
0.前回の復習
前回は、CSSの書き方を見ていきました。
これができると見た目のカスタマイズができるよって話でしたね。
1.目次
さて、早速本編です。まずは目次の作り方を見ていきましょう。
イメージとしては、「ページの中に印を入れ、そこに表示を移動させるリンクを貼る」ということをしていきます。
ということで、最初は印を入れていきます。どう入れるかというと、目次にしたい項目(十中八九見出しだと思います)に、以下のオプションを追加してあげましょう。
id="(この場所につける名前)"
はい、idという印をつけてあげます。例えば、h3タグにつける場合は以下のような感じです。
<h3 id="exampleName">一個目の見出し</h3>すると、このh3タグには、「exampleName」という名前がつきます。
そして、そこの印にジャンプさせたいときは、URLの末尾に「#(印につけた名前)」を足してあげます。
上のh3の例で、ページのURLが「https://example.com/」だった場合、以下のようにします。
<a href="https://example.com/#exampleName">リンクさせる文字列</a>これをクリックすると、印をつけた個所にジャンプします。
なお、自身のページ内であれば、URLは省略可能です。
ということは、見出しごとにこの印をつけ、そこへのリンクを箇条書きにすればもう立派な目次ですね。
ちなみに、この記事の目次部分は以下のようなHTMLになっています。
<ul class="table-of-contents">
<li><a href="#0前回の復習">0.前回の復習</a></li>
<li><a href="#1目次">1.目次</a></li>
<li><a href="#2脚注">2.脚注</a></li>
<li><a href="#まとめ">まとめ</a></li>
</ul>
2.脚注
これですが、以前も書いた通り、目次で解説した「記事内のジャンプ」と、もう一つのオプションを使っています。
そのもう一つが、titleオプションです。以下のオプションをaタグに追加してみましょう。
title="表示させたい文字列"
これを入れると、そのリンクにカーソルを合わせたときに「表示させたい文字列」という文字が浮かび上がってきます。こんな感じですね。
ちなみに、以前「hrefオプションは必須」と書きましたが、この使い方をする場合は、省略してもOKです。
上の例も書いてませんが、リンクみたいな表示になってると思います。これはクリックしてもどこにも移動しません。
最後に、上のソースを載せておきます。
<a title="この文字が見えればOK!">こんな感じ</a>あとは、これらを組み合わせれば脚注の完成です！
まとめ
いかがだったでしょうか。
一つのaタグでも、色々な使い方ができます。
このあたりまでくると、できることの幅もさらに広がっていくでしょう。
さて、次回は…どうしようか迷ってます。
前書きでやったようなJavaScriptが現状の有力候補ですが、変わるかもしれないです。
こんなこと解説して欲しいなどあれば、コメントまたはTwitterのリプでお知らせください！
Twitterは下のボタンから、フォローもお願いします！！！
次回：JavaScriptって何？(2020/1/14投稿しました！！！新シリーズです！)
それでは。
P.S.
前回、前々回やったブログの書き方でちょっと笑ってしまうことがありました。
勉強した内容を使った記事より、使ってない記事の方が伸びてしまってます（笑）
単純に投稿順が影響していると思うのですが…あとで足した内容の方が重要ってことなんですかね？
