ITメモ
Make SiteMap HTML
外部Link
【HTML ドキュメント】MDN Web Docs(Mozilla)
「HTML」リファレンス
【HTML】HTMLメールの作り方【HTML】ブラウザやタブに表示される小さなアイコン「favicon(ファビコン)」の作り方【HTML】HTMLタグに「マウスアクション」を指定する方法【XML】サイトマップ作り方
「HTML」の基礎知識
【HTML】「HTML」の書式【HTML】「HTML」でのコメントの仕方【HTML】「CSS」の使い方【HTML】「Javascript」の使い方【HTML】「ブロック要素」と「インライン要素」【HTML】「HTML」の特殊文字一覧【HTML】ヘッダー部分の編集方法【HTML】他のページに移行する「リンク」の作り方 【HTML】表の作り方【HTML】Webページに画像の埋め込む方法【HTML】動画を埋め込む方法【HTML】音声ファイルを埋め込む方法【HTML】地図を埋め込む方法【HTML】入力フォームの作り方
「HTML」タグ
【HTML】「a」タグ - リンクの作り方【HTML】「link」タグ - 別ファイルを関係定義・読み込みをする【HTML】「h1-h6」 - Webページの見出しの設定方法【HTML】ruby - 「ルビ」をふるための要素
SEO(Search Engine Optimization)
【SEO対策】SEOとは【SEO対策】アクセスアップするコーディング【SEO対策】検索エンジンに登録する方法
SEOの基礎
【SEO対策】「ページタイトル」 -- タイトル適切なページタイトルを付ける
サイト構造の改善
コンテンツの最適化
クローラーへの対処
モバイルSEO
プロモーションと分析





【HTML】「a」タグ - 色々なリンクの作り方



HTMLの中で、リンクを作成するための「a」タグ。
「Webページ」「E-mail」「TEL」「ページ内リンク」「ダウンロード」などのリンクを作成することができます。









「a」タグで作れるリンクの種類


「a」タグは、

・Webページ
・E-mail
・TEL
・ページ内リンク
・ダウロード

などのリンクが作成できる。


「a」タグで作れるリンクの書式

<a href="https://example.com">Website</a>
<a href="mailto:m.bluth@example.com">Email</a>
<a href="tel:+123456789">電話リンクテキスト</a>
<a href="#ID名">リンクタイトルテキスト</a>
<a href="./ディレクトリ名/ファイル名.jpg" download="ダウンロードされる時につけられるファイル名">Click Here fo Download</a>


おまけですが、「button」タグでもリンクが作成可能。

<button onclick="location.href='リンク先URL'">テキスト</button>




「a」タグの属性

属性
download 「HTML5」からの採用された属性。
リンク先のファイルやディレクトリをダウロードした時の名前を指定する属性。
値を空欄にしてもダウンロードは機能する。
href リンク先の「URL」を指定する属性。
hreflang リンク先のURLにおける言語の指定。
ping 空白で区切られたURLのリスト。
リンクをたどるときに、ブラウザーは POSTリクエストを指定されたURLに、 PINGを本文として送信します。
通常、トラッキングに使用される。
referrerpolicy リンクをたどるときにどれだけのリファラーを送信するか指定。
有効な値とその効果については Referrer-Policy を参照。
rel リンク先のURLとの関係を示す値。
空白で区切られたリンク種別のリスト。

「noreferrer」を設定すると、
リンク先に対して、参照元のリンクを渡さないようにすることが可能。
target リンク先のURLを表示する場所を指定する属性。
キーワード指定か、閲覧コンテキスト (タブ、ウィンドウ、「iframe」タグ) の名前で指定。
キーワード説明
_self デフォルトの設定。
設定がない場合は、「_self」が採用される。
現在の閲覧コンテキストで表示される。
_blank 新しいタブにリンク先を表示する。
ブラウザの設定によっては、新しいウィンドウに表示される。
_parent 現在の親の閲覧コンテキストに表示。
親がない場合は、「_self」と同じ動作。
_top 最上位の閲覧コンテキストに表示する。
親の閲覧コンテキストがない場合は、 「_self」と同じ動作。
type リンク先 URL の MIME タイプの形式を示す属性。
廃止された属性
charset 「HTML5」で廃止。
リンク先 URL の文字エンコーディングを表示。
coords 「HTML5」で廃止。
「shape」属性とともに使用され、カンマ区切りの座標のリストを指定する。
name 「HTML5」で廃止。
ページ内のリンク先の場所を定義するアンカーを指定する属性。
現在は、「ID」を指定して、「#ID名」で指定IDへページ内リンクする。
rev 「HTML5」で廃止。
逆方向のリンクを指定。
shape 「HTML5」で廃止。
イメージマップ内のハイパーリンクの領域の形状。
現在のイメージマップについては「area」タグを使用する。


Back



他の「URL」へ移動するハイパーリンクの作り方


他のURLや、同じサイトの他ページにリンクを作るには、
などがあります。


ハイパーリンクのURL書式




リンクに指定できる「URL」の種類は、
・絶対URL
・相対URL
に分かれる。


「絶対URL」は、「http」「https」を含むURLをすべて記述する書式。
世界中で通用する唯一無二のアドレス。

「絶対URL」の書式

通常の「絶対URL」表記

http://www.〇〇〇〇〇.co.jp/〇〇〇/〇〇〇〇.html

名称に変換した「絶対URL」表記

プロトコル名//ホスト名.ドメイン名/ディレクトリ名/ファイル名.html


プロトコル名 = http:
FQDN = ホスト名.ドメイン名=www.〇〇〇〇〇.co.jp
ホスト名 = www
ドメイン名 = 〇〇〇〇〇.co.jp




「相対URL」は、色々な書式がある。
Scheme-relative URL Origin-relative URL Directory-relative URL

絶対 URL へのリンク

リンクを張り付けるテキスト

相対 URL へのリンク

相対URL「Scheme-relative URL」へのリンク


Scheme-relative URL

相対URL「Origin-relative URL」へのリンク

Origin-relative URL
Origin-relative URL

相対URL「Directory-relative URL」へのリンク

Directory-relative URL
Directory-relative URL



Back



ページ内リンクの作り方


「HTML5」で「a」タグの「name」属性が廃止されたので、
「id」属性に指定するID名などでのページ先リンクが推奨されるようになっています。

「class」属性でのページ内リンクはできません。
「id」属性のID名は、ページ内に1つしか指定できないですが、
「class」属性のクラス名は、ページ内に複数指定することができるので、
ページ内リンクには向かないのが理由です。


ページ内リンクの書式

HTML5の書式

<a href="#ID名">リンク元のタイトル</a>

<h1 id="ID名">ページ内リンク先のタイトル</h1>

今までの書式

<a href="#リンク先の名前">リンク元のタイトル</a>

<a name="リンク先の名前"></a> <h1">ページ内リンク先のタイトル</h1>


Back



ファイルなどをダウンロードするリンク


<a href="./ディレクトリ名/ファイル名.jpg" download="ダウンロードされる時につけられるファイル名">Click Here fo Download</a>
<a href="./ディレクトリ名/ファイル名.jpg" download="ダウンロードされる時につけられるファイル名" as="image">Click Here fo Download</a>


「HTML5」より、「download」属性が加わり、
ファイルやディレクトリ、画像などを簡単にダウロードできるリンクが作成可能になりました。

・「href」属性で、ダウンロードするファイルなどを指定。
・「download」属性で、ダウンロードリンクにし、ダウンロードした時に保存する名前を指定できる。(値が空欄でもダウンロードは機能する。)
・「as」属性で、ダウンロードするファイルのタイプを指定する。(指定がなくてもダウンロードは機能する。)


Back



メールアドレスへのリンク


<a href="mailto:m.bluth@example.com">Email</a>


メールアドレスへのリンクは、
リンクをクリックすると、メールソフトが起動して、
送信メールを記述できるように、メール作成画面が開きます。
設定したメールアドレスは、送信先にアドレス入力されます。

「件名」「本文」などを含めて指定することも可能らしい。


Back



電話番号へのリンク


<a href="tel:+(電話番号)">リンクを張るテキスト</a>
<a href="tel:+123456789">+12 345 6789</a>
<a href="tel:+1(2345)6789">(2345)6789</a>


電話番号へのリンクをクリックすると、
携帯電話では、自動的に電話番号をダイヤルする。

Webでは、「registerProtocolHandler」によって「web.skype.com」などを用いて電話を掛ける設定をすることが可能。


Back



「download」属性を使用して「canvas」を画像として保存する方法


「download」属性を使用して「canvas」を画像として保存することが、
「a」タグの「download」属性で簡単にできるようになってます。
「canvas」タグの内容を画像として保存するには、
「download」属性をもつリンクを作成し、キャンバスのデータを「data: URL」で示します。 例: 保存リンクのついた描画アプリ

サンプルコード


「MDN」のWebDocに掲載されていたサンプルコード。
「こういう使い方もあるのか」と、
使えそうだったので、そのままメモさせてもらってます。

「canvas」エリアで、
マウスボタンを押しっぱなしにして動かすと描画できて、
その画像をそのまま「PNG」ファイルとしてダウンロードが簡単にできる。

これは便利。


HTML

<p>
<a href="" download="my_painting.png">絵をダウンロード</a>
</p>
<canvas width="300" height="300"></canvas>


CSS

html {
font-family: sans-serif;
}
canvas {
background: #fff;
border: 1px dashed;
} a {
display: inline-block;
background: #69c;
color: #fff;
padding: 5px 10px;
}


JavaScript

var canvas = document.querySelector('canvas'),
c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

function draw(x, y) {
if (isDrawing) {
c.beginPath();
c.arc(x, y, 10, 0, Math.PI*2);
c.closePath();
c.fill();
}
}

canvas.addEventListener('mousemove', event =>
draw(event.offsetX, event.offsetY)
);
canvas.addEventListener('mousedown', () => isDrawing = true);
canvas.addEventListener('mouseup', () => isDrawing = false);

document.querySelector('a').addEventListener('click', event =>
event.target.href = canvas.toDataURL()
);



Back