HTMLテンプレート【ページ内リンク】

公開日: 2016年4月12日火曜日 HTML

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>

スポンサーリンク
スポンサーリンク
スポンサーリンク
  • ?±??G???g???[?d????u?b?N?}?[?N???A