今回はHTMLでのリンクの設定について解説を行って行きます。
- HTMLでリンクを設定する方法
- 内部リンクと外部リンクの設定方法
- リンクの種類
時間がなくて結論だけを知りたい方は以下のサンプルコードを参考にしてみてください！
サンプルコード
<a href="URL">リンクテキスト</a>HTMLのリンクはaタグを使用
リンクの設定にはaタグを使用します。
aタグはアンカーの略で、リンクの開始と終了地点をつなぐという意味があります。
また、aタグで囲まれているテキストのことをアンカーテキストやリンクテキストと言います。
リンクテキストでは「こちら」、「詳細はこちら」のような文字を入力することもできますし、「https://www.google.com/」 といったようなURLをそのまま表示させることができます。
aタグの要素について
aタグは、インライン要素に含まれます。
そもそもインライン要素とは？
インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。 一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。
http://www.htmq.com/htmlkihon/005.shtml
また、aタグ内では様々な属性を用いてリンクの方法を変更することができます。
属性一覧
| 属性 | 値 | 説明 |
|---|---|---|
| href=”” | URL | リンクテキスト |
| name | 文字列 | 到達点にするための名前 |
| rel | リンクタイプ | このリンクから見たリンク先の関係 |
| target | _blank | 新規ウィンドウで表示 |
| _self | 現在のウィンドウで表示 | |
| _parent | 親のウィンドウに表示 | |
| _top | フレーム分割を解除してウィンドウを全体に表示 |
HTML リンクの種類
- 内部リンク
- 別タブでページを開く
- 電話番号
- メールアドレス
内部リンク
内部リンクは言葉の通り、ページ内の特定の位置へ遷移させることです。
<a href="#内部リンク">内部リンク</a>上記の例は、同じページの内部リンクの位置へ遷移する例です。
別タブでリンク先のページを開く
別ページでリンクを開きたい場合は、target属性に_blankを設定することで別タブでリンクを開くことができます。
<a href="<https://pg-log.com/>" target="_blank">TOPページ</a>電話番号
aタグのhtref属性の値にtel:電話番号の値を設定することで、リンクを押したときに電話番号が入力された状態で電話アプリを開くことができます。
<a href="tel:+0120000000">0120-000-000</a>メールアドレス
aタグのhtref属性の値にmailto:メールアドレスの値を設定することで、リンクを押したときにメールアドレスが入力された状態でメールアプリを開くことができます。
<a href="mailto:test@example.com">test@example.com</a>まとめ
HTMLのリンクを使う場合はaタグを使うことでリンクを設定することができます。
<a href="URL">リンクテキスト</a>記述方法はシンプルですが、属性の設定で挙動が変わるので、各属性がどのような意味をしているのかをしっかり理解していくことが重要です。
SAMURAI TERAKOYA
SAMURAI TERAKOYAの特徴とメリット
- 40種類以上の教材で、プログラミングスキル習得に必要な基礎から実戦までのすべてを学習できる
- つまづいたらいつでも相談できる「Q&A掲示板」があり現役エンジニアが学習のサポートをしてくれる
- SAMURAI ENGINEER Plus+にいる人達と一緒に学習をすることができる ←継続するにはかなりいい環境ですね！
- 単体レッスンも実施してくれるので、言語化できない悩みも相談することができる
- 月額のサブスクになっているので、利用しやすい！
注意点とデメリット
- プログラミングスクールによくある就職できなかったらといったサポートが無い
- 講義形式ではないので、自発的に行動しないといけない
SAMURAI TERAKOYAがおすすめの人
- 月々定額で挫折せずプログラミングを学びたい人
- エラーなどの悩みを相談できる環境が欲しい人
- オンラインで学べるので地方やスクールに通う時間がない人
\ 今なら学び応援キャンペーンも実施中 /
コメント