HTMLテンプレート【ページ内リンク】
公開日：
2016年4月12日火曜日
HTML
初心者がブログを始めるとき、何から書いたら良いのか出だしに悩んでつまづくかと思います。そこで、色んなサイトやブログを参考に簡単なテンプレートを用意することにしました。
Firefoxの[ページソースの表示]でエラーが出た箇所を後日修正済ですが、まだまだ間違っている部分があるかもしれません。
HTMLテンプレート【ページ内リンク】
サンプル記事の前書き。
■サンプル見出し1
サンプル見出し1の記事。
▲サンプル目次にもどる
■サンプル見出し2
サンプル見出し2の記事。
▲サンプル目次にもどる
■サンプル見出し3
サンプル見出し3の記事。
▲サンプル目次にもどる
HTMLテンプレート【ページ内リンク】のソースコード
HTMLテンプレート【ページ内リンク】の特徴は次の3つです。
- 冒頭に目次を表示
- 「サンプル目次」から各「サンプル見出し」へリンク
- 「サンプル見出しの記事」の終わりから「サンプル目次」へ戻る
<p>サンプル記事の前書き。</p>
<div style="background: rgb(247 , 247 , 247);
border: 1px dotted rgb(204 , 204 , 204);
padding: 10px;">
<div id="mokuji"><span style="font-size: 105%">
▼<b>サンプル目次</b></span></div>
<ol>
<li><a href="#title1">サンプル見出し1</a></li>
<li><a href="#title2">サンプル見出し2</a></li>
<li><a href="#title3">サンプル見出し3</a></li>
</ol>
</div>
<div style="background: rgb(255 , 192 , 17); border: 1px dotted rgb(255 , 192 , 17); margin-top: 2em; padding: 10px;">
<h2 id="title1">
■サンプル見出し1</h2>
</div>
<p>サンプル見出し1の記事。</p>
<p><a href="#mokuji">▲サンプル目次にもどる</a></p>
<div style="background: rgb(255 , 192 , 17); border: 1px dotted rgb(255 , 192 , 17); margin-top: 2em; padding: 10px;">
<h2 id="title2">
■サンプル見出し2</h2>
</div>
<p>サンプル見出し2の記事。</p>
<p><a href="#mokuji">▲サンプル目次にもどる</a></p>
<div style="background: rgb(255 , 192 , 17); border: 1px dotted rgb(255 , 192 , 17); margin-top: 2em; padding: 10px;">
<h2 id="title3">
■サンプル見出し3</h2>
</div>
<p>サンプル見出し3の記事。</p>
<p><a href="#mokuji">▲サンプル目次にもどる</a></p>
|
□■備忘録□■
【ページ内リンク；見出し（到達点）へジャンプ】
<a href="#title">見出し</a>
<h2 id="title">見出し</h2>
スポンサーリンク
スポンサーリンク
スポンサーリンク
