蛸無したこ焼研究所~WEBデザイン勉強中~HTML・CSS・Java Script -38ページ目

蛸無したこ焼研究所~WEBデザイン勉強中~HTML・CSS・Java Script

現在WEBデザインの仕事を目指し、勉強中です。
主にHTML、CSS、Java Script、PHPなど。
アメブロでのブログ作成の特徴も踏まえつつ、
皆様のブログ作成の一助となれば幸いでございます。
宜しくお願い致します。

こんにちはー
近牡と申します。

今日はHTMLでの目次の作り方をまとめておこうと思います。

HTMLタグの中に追加で挿入出来る属性がいくつかありますが、今回使うのはid属性といわれるものです。
結論から言うと、id属性をリンク先に指定することでページ内リンクが可能となり、それらを並べることで目次のように活用することが可能、という流れになります。

例として一つページ内リンクを作成します。

タグ付き例文:
<a href="#rei">これは目次です。</a>

実際の表示:
これは目次です。






















タグ付き例文:
<p id="rei">これは例文です。</p>

実際の表示:

これは例文です。



注意点として、原則id属性には同じものを再度指定することはできません。
実際には、いくつかページ内リンクを並べてここが目次ですよーと見出しを置くなどすると、ページ内の記事に目を通しやすくなるなどの利点があるので、興味のある方は活用してみてくださいな。