ホームページ作成講座 めもタグ

トップページ | ホームページ講座 | HTML | CSS | 素材作成 | リンク

トップページ > 初心者向けホームページ作成講座 > リンクを作成する

リンクを作成する

リンクとは下線が引かれた文字をクリックすることで、別の
ページ(htmlファイル・画像・他サイト)にジャンプするHTML文書の機能です。

spacer

Webページにリンクを張る

書式
<A href="HTMLのファイル名やサイト名など">リンクにする文字や画像</A>

他のページやHTML文書等にリンクを張るには<A href="">〜</A>で
リンクにする文字や画像を挟みます。
挟まれた文字、画像はリンクとなり、クリックすることでhref=""で指定した
場所へジャンプします。
画像にリンクを設定した場合、画像の周りに枠線が表示されますが
IMGオプションのborder=""を0にすることで枠線のないリンク画像が設定できます。

記述例(同じフォルダにリンクしたいファイルがある場合)

<HTML>
<HEAD>
<TITLE>Webページにリンクを張る</TITLE>
</HEAD>
<BODY>
テキストリンクです。<BR>
<A href="diary.html">日記</A><BR><BR>

画像にリンクを作成することもできます。<BR>
<A href="../index.html">
<IMG src="../images/bluebotton_home.gif" alt="HOME"></A><BR><BR>

IMGのオプションborder=""を0にすると枠線なしの画像リンクも作成できます。<BR>
<A href="../index.html">
<IMG src="../images/bluebotton_home.gif" alt="HOME" border="0"></A>
</BODY>
</HTML>

ブラウザでプレビュー

テキストリンクです。
日記

画像にリンクを作成することもできます。
HOME

IMGのオプションborder=""を0にすると枠線なしの画像リンクも作成できます。
HOME

<IMG>の画像の場所を指定する方法（フォルダの中や１つ上の階層）と同様に、リンクするファイルの場所指定も
../ や diary/ 等を利用して指定することが可能です。

例
<A href="../tag.html">タグ</A>
<A href="diary/080204.html">2008年 2/4の日記</A>
<A href="../sozai/sozai_make.html">素材の作り方</A>



htmlファイルだけではなく、画像ファイル等にリンクを張ることができます。
テキストリンクをクリックすると画像が表示されます。

記述例（画像ファイルにリンクを張る）

<HTML>
<HEAD>
<TITLE>画像ファイルにリンクを張ります</TITLE>
</HEAD>
<BODY>
テキストリンクをクリックすると画像が表示されます<BR>
<A href="image01.jpg">サイの写真</A>
</BODY>
</HTML>

ブラウザでプレビュー

テキストリンクをクリックすると画像が表示されます
サイの写真


公式ページや検索エンジン等にリンクを張ることもできます。

記述例

<HTML>
<HEAD>
<TITLE>公式、検索サイトにリンクを張る</TITLE>
</HEAD>
<BODY>
<A href="http://www.yahoo.co.jp/">Yahoo! JAPAN</A><BR>
<A href="http://www.google.co.jp/">Google</A><BR>
<A href="http://www.microsoft.com/japan/">microsoft</A>
</BODY>
</HTML>

ブラウザでプレビュー

Yahoo! JAPAN
Google
microsoft

spacer

同じページ内の離れた場所にリンクを張る

書式（移動する場所のマーク設定）
<A name="参照名"></A>

書式（移動するためのリンク）
<A href="#参照先">文字や画像</A>

同じページ内の離れた場所にリンクを設定できます。

name=""にはマークとなる参照名を記述し
href=""には、参照名が記述されている場所にジャンプするためのリンクを設定します。
リンク先はシャープ(#)を頭に付けて参照名を記述します。
例
name="top"
href="#top"

記述例

<HTML>
<HEAD>
<TITLE>同じページ内の離れた場所にリンクを張る</TITLE>
</HEAD>
<BODY>
<A href="#down">ポイントAへ</A><br><br><br><br><br><br><br><br><br><br>
<A name="down"></A>ポイントA
</BODY>
</HTML>

ブラウザでプレビュー

ポイントAへ









ポイントA

spacer

リンク先ページの表示位置を指定

書式（移動する場所のマーク設定）
<A name="参照名"></A>

書式（移動する場所のマーク設定）
<a href="***.html#参照先">文字列</A>

リンクでジャンプした後、特定の表示位置にすることができます。
ジャンプしたページに、あらかじめ参照名を指定する必要があります。

記述例

<HTML>
<HEAD>
<TITLE>リンク先ページの表示位置を指定</TITLE>
</HEAD>
<BODY>
<a href="11-img.html#02">「フォルダ階層について」</A>
</BODY>
</HTML>
（11-img.htmlには<A name="#02"></A>があらかじめ記述されています）

ブラウザでプレビュー

「フォルダ階層について」

spacer

リンク先を新しいウィンドウで開く

書式
<A href="移動するhtml" target="_blank">文字列</A>

リンクをクリックした時、ブラウザの新窓でリンク先のページを
表示させます。
オプションの target="_blank" を使用します。

記述例

<HTML>
<HEAD>
<TITLE>リンク先を新しいウィンドウで開く</TITLE>
</HEAD>
<BODY>
<a href="10-hr_list.html" target="_blank">新しい窓でリンク先を表示します</A>
</BODY>
</HTML>

ブラウザでプレビュー

新しい窓でリンク先を表示します

spacer

メールを送るためのリンクを作成

書式
<a href="mailto:メールアドレス">文字列</A>

リンクをクリックした時、メールソフトが起動し「メール新規作成ウィンドウ」が表示
されるようにします。
mailto: の後にメールアドレスを入力します。

記述例

<HTML>
<HEAD>
<TITLE>メールを送るためのリンクを作成</TITLE>
</HEAD>
<BODY>
<a href="mailto:hogehuga@fog.co.jp">管理人のメールはこちら</A>
</BODY>
</HTML>

ブラウザでプレビュー

管理人のメールはこちら

この方法によるメール指定はおすすめしません。
スパム(迷惑)メールが来る可能性があり、ネット上には
メールアドレス収集ロボットが動いているためです。

メールアドレスを公開する場合、メールアドレスを記載した画像を
利用したり（リンクは張らない）、＠マークを★や■などに変えて公開すれば
ロボットに収集されることは少なくなります。

どうしてもメールアドレスを公開したくないのであれば
メール送信用フォームを以下のサイトでレンタルする方法もあります。

メールフォーム無料レンタル「フォームズ」

前の講座：画像にオプションを付ける/画像の種類 | 次の講座：表を作成する | トップページ | ページの一番上へ▲