Webページの基本、HTMLのリンクについてです。
HTMLのリンクとは、文書や画像、JavaScriptファイルなどの外部のリソースとの関係を指定する要素です。リンクを作成するには、<a>タグや<link>タグを使います。
それでは、HTML文書にリンクを設定する基本的な方法について勉強していきます。
他サイトへのリンクを設定する
リンクを作成する <a>タグ と <link>タグの使い方について見ていきましょう。
<a>タグでハイパーリンクを作成する
<a>タグを使って、別のページや他のウェブサイトに移動するハイパーリンクを作成できます。
<a>タグは、<body>～</body>タグ内の任意の場所に設置することができます。
リンク先URLを指定するには、href属性を使います。例えば、以下のコードは Googleのページにリンクします。リンクがあるテキストは下線付きの青色で表示され、そこをクリックするとリンク先にジャンプできるようになります。
<a href="https://www.google.co.jp/">Googleのページに切り替わります！</a>【コードの結果を表示↓】
Googleのページに切り替わります！
<h>見出しや<p>段落、<ul><li>リストなどの要素内にリンクを設置することができます。
<h4><a href="https://www.google.co.jp/">Googleへのリンク</a></h4>
<p>これは→<a href="https://news.google.com/">Googleニュースへのリンクです！</a></p>
<ul>
<li><a href="https://search.yahoo.co.jp/">Yahho!検索へのリンク</a></li>
<li><a href="https://news.yahoo.co.jp/">Yahho!ニュースへのリンク</a></li>
</ul>【コードの結果を表示↓↓】
Googleへのリンク
これらのリンクをクリックすると、同じタブでリンク先ページに表示が切り替わります。
「target属性」で別ウィンドウに表示する
target属性を使い「target=”_blank”」のように指定することで、リンク先のページを別タブで表示させることができます。
<h4><a target="_blank" href="https://www.google.co.jp/">Googleへのリンク</a></h4>
<p>これは→<a target="_blank" href="https://news.google.com/">Googleニュースへのリンクです！</a></p>
<ul>
<li><a target="_blank" href="https://search.yahoo.co.jp/">Yahho!検索へのリンク</a></li>
<li><a target="_blank" href="https://news.yahoo.co.jp/">Yahho!ニュースへのリンク</a></li>
</ul>【コードの結果を表示↓↓】
Googleへのリンク
「target属性」に指定できる値は、次のようなものがあります。
- _self: リンクを現在のウィンドウ及びタブで開く（指定がない場合のデフォルト値）
- _blank: リンクを新しいタブでウィンドウを開く
- _parent: リンクを親ウィンドウで開く
- _top: リンクを最上位のウィンドウで開く
<link>タグで外部のリソースを指定する
HTMLで<link>タグによる他サイトへのリンクを設定する方法は、<link>タグを<head>タグなどの中に記述する方法です。
<link>タグは、ページと外部リソース（CSSファイルやJavaScriptファイルなど）との関係性を指定するタグです。
<link>タグは、「href属性」と「rel属性」が必須です。
※ href属性は、外部リソースのURLを指定する属性です。
※ rel属性は、現在のページと外部リソースの関係性を指定する属性です。
例えば、以下のように記述すると、https://example.com/style.css というCSSファイルを現在のページに適用します。
<head>
<link href="https://example.com/style.css" rel="stylesheet">
</head><link> は、HTMLで閉じタグをつけてはいけないタグの一つです。もし、<link>タグに閉じタグを書いた場合、エラーになってしまう可能性があります。
JavaScriptは、HTMLファイルで<head>タグ内と<body>～</body>タグの終了直前で記述することができます。
<body>
<!-- 他の記述部分 -->
<script src="https://example.com/script.js"></script>
</body><head>タグ内で<link>タグを使ってJavaScriptファイルを読み込む場合は、rel属性にpreloadを設定する必要があります。preloadは、ページの表示に必要なリソースを事前に読み込む設定です。
次のように記述すると、https://example.com/script.js というJavaScriptファイルを<head>タグ内で事前に読み込むようにすることできます。
<head>
<link href="https://example.com/script.js" rel="preload" as="script">
</head>ただし、このように<head>タグ内でJavaScriptファイルを読み込むと、ページの表示速度が遅くなる可能性があります。それは、ページの表示に必要なHTMLやCSSの読み込みが遅れるからです。
そのため、<body>タグの終了直前で<script>タグを使ってJavaScriptファイルを読み込むようにしたほうが良いようです。
自サイト内のリンクを設定する
HTMLで自サイトへのリンクを設定する方法は、以下のようになります。
- リンクにしたいテキストや画像、ページなどを<a>タグで囲みます。
- href属性に自サイト内のファイル名やパスを入力します。
- target属性「target=”_blank”」を指定すれば、リンクを違うタブで開くことができます。
絶対パスと相対パス
例えば、自サイト内の「お問い合わせ」ページへのリンクを作成する場合、パスを指定方法には次の二つの方法があります。
- 絶対パスで指定
“https://www.kurumico.com/contactform/” - 相対パスで指定
“/contactform/” のように省略して記述できます。
<p><a href="https://www.kurumico.com/contactform/">お問い合わせ（絶対パスで指定）</a></p>
<p><a href="/contactform/">お問い合わせ（相対パスで指定）</a></p>【コードの結果を表示↓↓】 どちらも同じページを表示します。
この例では、ページへリンクするものですが、画像などのリンク設定も同じです。
ページ内の指定場所へジャンプを設定する
HTMLでページ内の指定場所へジャンプを設定には、アンカータグとid属性を使用します。
アンカータグとは、href属性に#記号とジャンプ先のid名を指定する方法です。
id属性とは、要素に一意な名前を付ける属性です。
例えば、ページ内のトップに戻るというリンクを作成する場合は、以下のように記述します。
<!-- ジャンプ先にid名をつけておきます -->
<h1 id="top">ページタイトル</h1>
<!-- 好きな場所にid名をつけておきます -->
<a id="999"></a>
<!-- ジャンプ元 href属性に ="#id名"と指定する-->
<a href="#top">トップに戻る</a>
<br>
<a href="#999">id999の場所にジャンプ</a>リンクをクリックすると、その名前（id名）の場所にジャンプします。
<link>タグで使用できる属性
次の表は、HTMLの<link>タグで使用できる属性の一覧です。
| 属性 | 値 | 説明と例示 |
|---|---|---|
| href | URL | リンク先の URL |
| rel | トークン | リンク先との関係 例: stylesheetやiconなど |
| type | MIME タイプ | リンク先のメディアタイプ 例: text/cssやimage/x-iconなど |
| media | メディアクエリ | リンク先が適用されるメディア 例: screenやprintなど |
| sizes | サイズ値 | リンク先のサイズ 例: 16x16や32x32など |
| crossorigin | anonymous / use-credentials / 省略可 | リンク先の CORS 設定 例: anonymousやuse-credentialsなど |
| integrity | ハッシュ値 | リンク先の内容の整合性 |
| as | トークン | リンク先コンテンツの種類 例: scriptやstyleなど |
| disabled | 省略可 / 空文字列 / disabled | リンク先の適用を無効化するかどうか |
| title | 文字列 | リンク先に関する説明文 |
※ as属性は、<link>タグに rel=”preload” または rel=”prefetch” が指定された場合にのみ使用可能の属性です。
まとめ（おわりに）
当サイトの記事で使用したVBAなどのサンプルをDLできます
ダウンロードページへは下のカードをクリックすればジャンプできます。
よろしければご利用ください！
今回は、Webページ「HTML」のリンクについて勉強しました。
リンクには、外部のリソースとの関係を指定する場合と、内部のページや指定場所へジャンプさせるために使用します。
リンクを作成するには、
<a>タグや<link>タグを使います。<a>タグは、別のページやウェブサイトに移動するハイパーリンクを作成します。href属性でリンク先のURLを指定します。アンカータグを設定して指定場所にジャンプさせる方法は知っていると便利です。<link>タグは、スタイルシートやアイコンなどの外部のリソースを指定します。href属性でリンク先のURLを指定するのは rel属性でリソースの種類を指定します。