1.はじめに
こんにちは、Rickyです。
どうです。だいぶカスタマイズされてきたでしょう。
前回の記事でCSSコードのコピペの仕方をマスターしたので色々とやってみました。
全然雰囲気が違ってきますよね。
さあ、今回は目次のリンクの貼り方を学んでいきましょう。
目次から読みたい文章へ飛べたら何かと便利ですよね。
では、さっそく・・・・・・Let`sTry
2.リンクの貼り方
リンクの貼り方ですが今回も・・・もちろんグーグル先生です。
さっそくググりましょう。
はい、分かりました。（はやっ）
今回もHTMLのコードをいじります。
この記事はすでにリンクを貼りつけていますのでこの記事のHTMLのコードを参考に説明していきます。
まず、必要なコードは下記の通りになります。
- <a>～</a> 囲んだ文字列にリンクを設定します。
- href="#〇〇〇" リンク先を指定します。
- <h〇>~</h〇> 見出しを作ります。（今回はh3で設定）
- id="〇〇〇" リンクの対象に名前を付けます。
それではさっそく今回の記事で使用しているコードの一部を見てみましょう。
まず、目次のコードです。
<ul>
<li><a href="#start">・はじめに</a></li>
<li><a href="#link">・リンクの貼り方</a></li>
<li><a href="#matome">・まとめ</a></li>
</ul>
次に、見出しのコードです。
<h3 id="start">1.はじめに</h3>
<h3 id="link">2.リンクの貼り方</h3>
<h3 id="matome"> 3.まとめ</h3>
赤文字の箇所が今回追加した箇所になります。
なるほど<a>~</a>で囲んだところにhrefとidで関係を作っている感じですね。
なんか思っていたより簡単にできますね。
(idのネーミングセンスのなさは勘弁してください。)
目次以外にもなんか色々と使えそうですね。
とにかく、できました。てへっ
3.まとめ
また一つお利口さんになりました。
このまま勉強していけばもっと色んな事が出来そうです。
・・・・というかそろそろ記事っぽい記事を書いたほうがいい気がする。
「なんとか１０選」とか「おすすめのなんちゃら」とかを書きたい。
ただ問題は私にそれを書くネタが思いつかないことです。（やばい大問題！）
まあ、ゆっくり考えていきましょう。
しばらくは思いつくまま書いていこうかな。
それでは、失礼します。
