【HTML】他のページに移行する「リンク」の作り方

■ リンクの作り方
■ リンクを作る「a」タグの使い方
■ 絶対URLと相対URL
■ リンクからメールを送る方法
■ リンクへ「CSS」を指定する方法
■ イメージ上に複数のリンクを作成する方法

「HTML」のリンクは、
「a」タグを利用して作成する。
「a」タグに、リンク先のURLを指定するだけで、リンクは機能する。
そこに、色々な属性でオプションを追加していくと、
色々なリンクが作成できるようになる。

レイアウトデザインは、CSSで指定することで、
カラー・サイズなどの設定ができる。

URLの指定場所に、メールアドレスを設定すると、
デフォルトのメールアプリが起動して、
指定されたメールアドレスが設定されたメール作成画面が表示される。




Back

ホームページを作成する時は、複数ページの構成になるので、 複数のページを行き来するために他のページにリンクを作成する必要がある。
他のページへ移動するためのリンクという道を作るのが、 リンクタグの「a」タグです。

「a」タグとは

「a」タグの書式

「a」タグの属性

属性	意味
href="url"	指定ページへのリンク。href="URL" 指定したメールアドレスに対して、メールソフトを起動。href="mailto:メールアドレス"
name="name"	ページ中に指定したアンカーという目印。 href="＃アンカー名"と指定することで、アンカーへのジャンプが作成できる。
target="target"	表示ターゲットを指定 _blank=新しいウィンドウ _parent=親ウィンドウ _self=現在のウィンドウ _top=すべてのフレーム割を解消し、元ウインドウ全体に指定文書を読み込みこむ。この値は、現在のフレームに親が存在しない場合、 _selfと等価である。 フレーム名・ウィンドウ名=任意のフレームやウィンドウに、指定URLへのリンクを開く。 あらかじめ、対象となるフレームやウィンドウに名前を付けておく必要あり。
hreflang="hreflang"	リンク先文書の言語（ja など）を指定
type="type"	リンク先文書の MIMEタイプ（text/htmlなど）を指定
media="media"	メディアを指定

別ページへのリンク記述例

アンカーへのリンク記述例

【属性】

【一般属性】	意味
id=id	ID を指定
class=class	クラスを指定します。
style=style	スタイルシートを指定
title=title	タイトルを指定。
dir=dir	文字の表示方向を指定。
lang=lang	言語を指定。
accesskey=key	アクセスキーを指定。
tabindex=n	タブインデックスを指定。
contenteditable=bool	要素を編集可能にする。
contextmenu=id	コンテキストメニューを指定。
draggable=bool	ドラッグを可能にする。
dropzone=value	ドロップを可能にする。
hidden	要素を非表示にする。
spellcheck=bool	スペルをチェックする。
IE拡張属性	他にもIEで拡張された属性が指定可能。

Back

URLの指定方法には、

• 絶対URL
• 相対URL

の2種類があります。


絶対URLは、IPアドレスに関連付けされているドメインを指定しての指定方法です。
IPアドレスは、世界で唯一無二なので、ドメイン指定のアクセス方法は、地球上のどこからアクセスしても、同じページにアクセスできます。

相対URLは、今のページを基準にして指定するURL指定方法です。
なので、アクセスしている現在のページの場所を移動すれと、同じ相対URLでもまったく違うページを指定していることになります。

絶対URL

相対URL

Back

普通のリンクと同じように、クリックしただけで、
メールブラウザのメール送信画面を起動させる方法があります。
「a」タグの「href」属性ではなく、「mailto」属性を使用して、メールアドレスを指定する。
mailto を用いることで、メールアドレスを送信先としたメーラ（メールソフト）が起動する。

<a href="mailto:アカウント@sample.com">アカウント@sample.com</a>


件名（Subject）、写し送付先（Cc）、秘密の写し送付先（Bcc）等を指定できます。

<a href="mailto:アカウント@sample.com?subject=TEST&cc=アカウント@sample.com">TEST</a>

区切り文字は最初がクエスチョンマーク（?）で、 次からはアンドマーク（&）。
日本語、記号、半角スペースなどは、 URLエンコードした文字を指定する必要がある。

メールを送信させるサンプルコード

Back

未訪問のリンク	link { color: #00ff00; }
訪問済みのリンク	a:visited { color: #00ff00; }
マウスでクリック中など、アクティブな要素	a:active { color: #00ff00; }
マウスが乗せられている要素	a:hover { color: #00ff00; }
一括指定	a:link, a:visited, a:active { color: #00ff00; }
ID名での一括指定	ID名:link, ID名:visited, ID名:active { color: #00ff00; }
クラス名での一括指定	クラス名:link, クラス名:visited, クラス名:active { color: #00ff00; }

<a>タグのCSS指定方法は、少し特殊です。
リンクの状態4つ、それぞれにデザイン指定をします。
「,(コンマ)」で結合して、一括指定することも可能。

記述例

Back

HTML「map」タグを使用することによって、イメージ画像上に複数のリンクを作成することができる。

イメージ上にリンクを作成する機能をクリッカブルマップと呼ぶ。
通常の「a」タグで作成する画像のリンクは、画像全体に一つのリンクを作成する形態だが、
「クリッカブルマップ」は、一つの画像の場所によって複数のリンクを作成する手法で、
座標によって、リンクを作成する場所も指定できるので、非常に便利な機能。

クリッカブルマップの種類

クリッカブルマップで使用するタグ

記述例

属性

【一般属性】	意味
id=id	ID を指定
class=class	クラスを指定します。
style=style	スタイルシートを指定
title=title	タイトルを指定。
dir=dir	文字の表示方向を指定。
lang=lang	言語を指定。
accesskey=key	アクセスキーを指定。
tabindex=n	タブインデックスを指定。
contenteditable=bool	要素を編集可能にする。
contextmenu=id	コンテキストメニューを指定。
draggable=bool	ドラッグを可能にする。
dropzone=value	ドロップを可能にする。
hidden	要素を非表示にする。
spellcheck=bool	スペルをチェックする。
IE拡張属性	他にもIEで拡張された属性が指定可能。

Back