ホームページ作成講座 -入門編-第8講

第8講では、「リンク」方法と「aタグ」の使い方について解説します。 第7講をまだお読みでない方は、先に第7講をお読みください。

スポンサーリンク

リンクしよう

タケシ サトシ、「test.htm」を「test2.htm」というファイル名で保存してごらん
サトシ え?  なんで?
タケシ 「リンク」をするには他のページがないと駄目だろ
サトシ ああ たしかに
・・・よし  保存したぜ
タケシ じゃあ「test2.htm」から「test.htm」に「リンク」させようか

今「メモ帳」で開いている「test.htm」を「test2.htm」という新しい名前で保存しましょう。 やり方については「test.htm」を初めて保存した時と同じです。忘れてしまった場合は講座2を参照しましょう。 それでは、「test2.htm」から「test.htm」に「リンク」させる方法を解説します。 「リンク」をするには「aタグ」を用います。

<html><body><a href="./test.htm">テストページへ</a></body></html>

リンクさせたい文字の部分に <a>〜</a> の形で設定し、「href属性」を「href="***"」という形で指定します。 「***」は「リンク」したいページのファイルまでのパスを設定します。通常は「相対パス」です。忘れてしまった場合は講座6を参照しましょう。 ここでは「test.htm」にリンクさせたいので、「./test.htm」とします。 実行すると、次のようになります。


サトシ よっしゃ! 「リンク」できるようになったぜ!
タケシ 更に 「target属性」を設定すれば 新しいウィンドウに表示させたり出来るぞ

「リンク」先のページを新しいウィンドウに表示させるには「target属性」に「_blank」を設定します。

<html><body><a href="./test.htm" target="_blank">テストページへ</a></body></html>

「target="_blank"」という形で設定します。「_(半角アンダーバー)」を忘れないようしましょう。 「target属性」を設定しない場合は、「target="_self"」とした場合と同じになります。 ページが「フレーム」で表示されている場合、「target="_top"」とすれば、全ての「フレーム」分割を消去して表示します。 「target="_parent"」とすれば、1つだけ「フレーム」分割を消去して「親フレーム」に表示します。 また、「target="***"」で「***」に「frameタグ」の「name属性」で指定した名前を設定すれば、その「フレーム」分割したページに表示されます。 「フレーム」は1つのウィンドウに複数のページを表示できる機能です。詳しくは、後ほど解説します。


サトシ ホントだ!  新しいウィンドウが勝手に出てくる!
タケシ 他のホームページに「リンク」する時は
自分のページと区別するために 新しいウィンドウに表示するのが好ましいぞ
サトシ そうなんだ
タケシ それとな 「aタグ」は「リンク」するためだけの「タグ」ではないぞ
サトシ え?  他にも出来る事があるのか?

「aタグ」に「name属性」を設定して、名前付けを行うことが出来ます。

<html><body><a name="syoukai">ページ内容の紹介</a></body></html>

「name="***"」という形で設定します。 「***」は付けたい名前を半角英数字で自由に指定できますが、最初の文字に数字を使うのは推奨されていません。 「./test2.htm#syoukai」と、ファイル名の後ろに「#(半角シャープ)」を付けて、その後に「name属性」で名前付けした名前を指定して「リンク」すると、ページ移動後にその部分に自動スクロールされます。 同一ページ内に「リンク」を張りたい場合は「#syoukai」のように、ファイル名を省略できます。 ただし、ページ内容がスクロールする必要がある程に多くないと意味がありません。 下の例では、「name="t1"」と名前付けしてある上記タイトル「リンクしよう」の部分に瞬間スクロールします。

・・・
<a href="#t1">タイトルの部分へ</a>
・・・


サトシ 「aタグ」って便利だな!
タケシ 前講で教えた「bodyタグ」の「link属性」と一緒に練習してごらん
サトシ ああ  そうだった そうだった
・・・あれ・・・  どうやるんだっけ・・・
タケシ おいおい・・・  頼むぜ サトシ・・・

第9講:画像を表示させようへ続く

まとめ

  • 「aタグ」の「href属性」にページ名を設定すると「リンク」できる
  • 「aタグ」の「target属性」で「リンク」先のページを表示させるウィンドウを設定できる
  • 「aタグ」の「name属性」を設定すると名前付けできる
  • 「name="***"」と名前付けした部分にリンクする場合は「#***」をファイル名の後ろに付ける

スポンサーリンク