URLなどに飛ぶ（リンク）させる為の書き方を詳しくお話していきます。
URLリンクはa要素
HTMLでURLへリンクさせる場合は、「a要素」を使用します。
正式名称は Anchor（アンカー）要素といいます。
記述コードは、<a href = “”></a>となります。
【完成コード】
<a href = “https://hyouchan.com/”>ひょーちゃんのWEBデザインブログ</a>
href属性を基本として使用する
href属性は、設定するリンクは何を参照するのか？を指定することが出来ます。
ハイパーテキスト・リファレンス（リンクで相互に繋がる文章・参照先）の略称となります。
頻繁に使用するリンク方法を5つ載せていきます。
外部リンク（絶対パス）
<a href = “https://hyouchan.com”>ひょーちゃんのWEBデザインブログ</a>
常に同じページに飛びます。
外部サイトに飛ぶ先に使用します。
内部リンク（相対パス）
<a href = “about.html”>ひょーちゃんのWEBデザインブログ</a>
相対パスと言って、同じサイト内のページに飛ばす際に使用します。
外部サイトに飛ばす際には使用しません。
相対パスの種類は以下の３つになります。
- 同じフォルダ「about.html」
- 下のフォルダ「sub/page.html」
- 上のフォルダ「../index.html」
ページ内リンク
<a href = “#contact”>お問い合わせへ</a>
<!– ここに移動したい(これはコメントです） –>
<section id = “contact”>…</section>
アンカーリンクと言って、ページ内の特定位置に移動する際に使用します。
場面の想定は、目次から各見出しにジャンプしたり、FAQの開閉リンクとなります。
メール送信リンク
<a href = “meilto:test@example.com”>メールする</a>
メール送信画面を開く際に使用します。
ただし、メールアプリが勝手に起動する為、ユーザーが驚いてしまう懸念もあります。
その為、「問合せフォーム」を活用する方がいい場合もあります。
問合せフォームとは？
名前の通り、問合せ専門のフォームです。
あらかじめ問合せ内容が決められいて、ユーザーが入力欄に打ち込んだ情報が届きます。
<form action = “/send” method = “post” >
<label>お名前</label>
<input type = “text” name = “name” required>
<label>メールアドレス</label>
<input type = “email” name = “email” required>
<label>お問い合わせ内容</label>
<textarea name = “message” rows = “5” required></textarea>
<button type = “submit”>送信</button>
</from>
上記のような記述コードが問合せフォームとなります。
- ブラウザで完結する
- 入力制限が出来る
- スパム対策が出来る
- メールアドレスを非公開でいい
メール送信リンクを使用するよりも、問合せフォームを使うことがメリットが多いです。
電話リンク
<a href = “tel:080XXXXXXXX”>電話する</a>
スマホを使用して電話画面を開く際に使用します。
注意点としては、以下の2つとなります。
- パソコンではクリックしても意味がない
- 電話番号に「-（ハイフン）」は入れてはいけない
a要素で使用するその他属性
a要素にhref属性と組み合わせて使用する属性を5つ載せていきます。
target属性
リンクの開き方を「別タブで開く」もしくは「同じタブで開く」から指定することが出来ます。外部サイトに飛ばすリンクはほぼ100％で「別タブで開く」を指定します。
理由としては、ユーザーは基本的に元のページを閉じたくない心理があるからです。また、外部サイトに飛ぶ場合は、元サイトの離脱を防ぐ為に役立ちます。
別タブで開く場合は「_blank」を使用します
※ 内部リンクでは意味がないので基本的に使用しません
<a href = “https://hyouchan.com” target = “_blank”>別タブで開く</a>
同じタブで開く場合は「_self」を使用します
※ デフォルトなので省略可能です
※ 詳しく調べる
<a href = “https://hyouchan.com” target = “_self”>同じタブで開く</a>
rel属性
セキュリティ対策やSEOの最適化を行うことが出来ます。
先ほどの「target =”_blank”」とセットで使用する必要があります。
理由は、設定する記述コードの役割が 「別タブのページが元のページ操作を出来る脆弱性を防ぐ」内容の為です。
< a href = “https://hyouchan.com” target = “_blank” rel = “noopener noreferrer”>
noopener
新しいタブで開いたページが、元ページのコードを操作出来ないようにする。
noreferrer
元ページのURLをアクセス先に渡さないようにする。
title属性
カーソルを置くと説明文を表示してくれる補足情報を付与出来ます。
情報を付与する際に気をつけるポイントは、重複した意味を記述しないことです。
例えば、補足したい文字が「説明リンク」と表示されているのに、補足情報側にも「説明リンク」と記述するのはやめましょう。
< a href = “page.html” title = “このページの詳細見る”>説明リンク</a>
download属性
ファイルをブラウザで開かずに、強制ダウンロードさせることが出来ます。
<a href = “data.pdf” download>PDFをダウンロードする</a>
class属性
ボタン風のリンクを作ることが出来ます。
CSSでボタン風に装飾するまでがセットとなります。
<a herf = “contact.html” class = “btn”>お問い合わせはこちら</a>
a要素に記述するインライン要素、ブロック要素
a要素は、インライン要素・ブロック要素が記述可能となっています。
インライン要素
インライン要素とは、必要な部分だけを装飾・意味付けする役割があり、記述コード内の前後に改行を伴わない特徴があります。
< a href =”https://XXX”><strong>ひょーちゃんの公式ブログ</strong><a/>
例えば↑に記述したコードは “文字の強調” の役割が与えられています。
a要素に記述していいインライン要素一覧
- span
- strong
- em
- img
- code
- label
- small
- b , i
- time
- abbr
- mark
ブロック要素
ブロック要素とは、ページの横幅を占領する役割があり、記述コード内の前後に自動的に改行は入る特徴があります。
< a href =”https://XXX”>
<div>ひょーちゃんの公式ブログ</div>
</a>
例えば↑に記述したコードは、”div”がページの横幅を占領する役割があります。
a要素に記述していいブロック要素一覧
- div
- p
- ul , ol , li
- section
- article
- aside
- header
- footer
- table
- figure
【NG】a要素に記述してはいけない一覧
a要素には記述してないコードも存在します。
具体的には、「インタラクティブ要素」または「ネスト規則」です。
インタラクティブ要素
インタラクティブ要素とは、操作を持つ要素のことです。
NGの理由としては、操作対象をリンクで包んでしまい意図しない動きになる為です。
NGなインタラクティブ要素一覧
- button
- select
- textarea
- input
a要素同士の入れ子
a要素にa要素を入れ子構造（ネスト）してしまうと、クリックが正しく反応しなくなります。
< a href = “#”>
<a href = “#”>ここが入れ子になっている</a>
</a>
コメント