ページ内リンクの張り方： STEP5 【リンクを張ろう：サイト内リンク編】

ホームページ作成の基礎から、HTMLタグやスタイルシート、JavaScriptを使ったHP作成方法、アクセスアップの秘訣を紹介。

ホームページ入門

初めてのホームページ

作成に必要なもの

レンタルサーバ選び

HPを作ってみよう

拡張子の表示

フォルダ、ファイル作成

HTMLタグの入力

画像を張る

サイト内リンク

リンクについて

ページの作成

サイト内リンク

ページ内リンク

他サイトへのリンク

FTPの使い方

完成までの流れ

気をつけたいこと

　ページ内リンクの張り方

タグの追加

ページ内リンクを入力する前に、先に必要となるタグ、文字を追加しましょう。

～上略～
<img src="image/title.gif">
<hr width="300">
<br>
<br>
<br>
<hr width="300">
<br>
私のプロフィール
<br>
<br>
<hr width="300">
<br>
<a href="index.html">トップページに戻る</a>
</div>
<br>（20～30個程入力してください）
</body>
</html>

上の赤い部分を入力してください。「<br>」については、下の余白部分を増やしたいために入力しますので、20～30個ほど入力してください。
入力が終わったら、下のページ内リンクの張り方に進みましょう。

同じページ内へのリンク（ページ内リンク）を張ってみよう！

それではページ内リンクを張ってみましょう。まずは下記をご覧ください。

～上略～
<img src="image/title.gif">
<hr width="300">
<br>
<a href="#01">プロフィールへジャンプ</a>
<br>
<br>
<hr width="300">
<br>
<a name="01"> 私のプロフィール </a>
<br>
<br>
<hr width="300">
～下略～

HTMLタグ【ページ内リンク】

上の赤い部分がページ内リンクをする際に使用するタグになります。
「<a name="*"> ～ </a>」部分で場所を指定し、リンク先を指定する際に「#」をつけたリンク先の場所を指定することでその場所に飛ばす事ができます。

それでは入力してみましょう。上の赤い部分を入力してください。

ページ表示

上のようになればページ内リンクは成功です。
（上の画像をクリックしてサンプルページをご覧ください。）
それではリンク先の場所・指定が合っているか、確かめてみましょう。「プロフィールにジャンプ」という部分をクリックしてみてください。「私のプロフィール」という部分に場所が移動したら成功です。
このリンク方法は、サンプルのようにあまり行がないページでは必要性がないですが、行数が多い場合に、すぐにその場所に飛ばす事ができますので重宝します。
これでサイト内のリンク方法は終了です。次の「STEP6」に進みましょう。

ページの上へ

前のページ

トップページ

STEP6 【リンクを張ろう：他サイトへのリンク編】

Copyright (C) 2007 ホームページ作成講座 All Rights Reserved.