サイト名

この箇所はホームページの説明文など記載するのに最適です。

トップ > サンプルページ

ページ内リンクについて

ページ内リンクを設置する上の注意点

ページ内リンクは、通常の方法ではうまく位置を取得できなかったので、特殊な方法を採用しております。通常のページ内リンクの方法もご利用可能ではありますが、位置がずれる場合があります。

この特殊な方法でページ内リンクすると、リンク先が同一ページであっても、一度ページのトップに戻ってから(ページが再読み込みされてから)、スムーススクロールで指定の場所に移動します。

ページ内リンクの設置方法

ページ内リンクの設置方法は通常、HTMLファイルにて、

<a href="#name">リンク先へ</a>

というように記述しますが、このHTML5テンプレート No.006に限り、

<a href="?id=name">リンク先へ</a>

というように『#』の代わりに『?id=』を記述します。
リンク先(移動先)は、こちらは特に変更はなく、

<div id="name">ここにジャンプします</div>

というように記述します。

» ページ内リンク(?id=)で移動する

サンプルタグについて

以下、サンプルタグになります。ご利用の際は参考にしてみてください。

h2タグ

h3タグ

h4タグ

h5タグ
h6タグ

強調(em) より強い強調(strong) 追加(ins) 削除(del) テキストアンカー

引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。

リスト

普通のリスト

番号付きリスト

  1. 番号付きリスト1
  2. 番号付きリスト2
  3. 番号付きリスト3
    li要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。

デザインリスト

このようにリストマークをチェックマークにしたい場合は、ulタグに『class="list"』を追記してください。

定義リスト

定義リスト1
定義した用語の説明
定義リスト2
定義した用語の説明
定義リスト3
定義した用語の説明
dd要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。しかし、dt要素にはインライン要素しか記述することができません。

テーブル

見出し1見出し2見出し3見出し4見出し5
セル1セル2セル3セル4セル5
セル1セル2セル3セル4セル5
セル1セル2セル3セル4セル5
見出し1セル1セル2セル3セル4セル5
見出し2セル1セル2セル3セル4セル5
見出し3セル1セル2セル3セル4セル5
見出し4セル1セル2セル3セル4セル5
見出し5セル1セル2セル3セル4セル5

見出しh3タグ

h3タグ

サブコンテンツはバナーを掲載するのに便利です。ulタグに『class="bnr"』とすれば、きれいに画像が並びます。

ページのトップへ戻る