超初心者向け！！リンクを作るHTMLタグの使い方！
テストとしてaタグの使い方を紹介する動画を作ってみました
この記事の目次
aタグ
aタグは、href属性とセットで使い、別のページへの移動するリンクや指定したメールアドレスへ送信するためのメールソフトの立ち上げルためのリンク、電話を発信するナビゲーションを出すリンクなど、様々なハイパーリンクを作成する事ができるタグです。
aタグは終了タグとセットでつかい、囲まれた部分は、文字が青く表示され、アンダーラインがつきます。
※ 文字色、アンダーラインの色はcolorプロパティで変更できます
デフォルト表示
href属性
href属性にはリンクをURLを記述します
指定できるURLはいくつかありますが、よく使うであろうものに絞って紹介します
絶対パスのURLへのリンク
絶対パスのURLを使うと、同一サイト内の別ページにリンクさせたり、全く別のサイトリンクさせたい場合使います。
|
1 2 3 |
<a href="https://weblasts.com"> Weblasts </a> |
相対パスのURLへのリンク
相対パスのURLへのリンクは同一サイト内であれば使えて、少しですが記述量が減ります
|
1 2 3 |
<a href="ie.html"> IE用エラーページ </a> |
ID付きの要素へのリンク
ID付きの要素へのリンクを指定する際は、『# ＋ ID名』の形でhref属性に指定します
href属性を「#top」もしくは「#」にすると、現在のページの最上部に移動するようになっています
|
1 2 3 4 5 6 7 |
<a href="#contents"> 要素に移動 </a> <div id="contents"> 移動先コンテンツ </div> |
また、絶対パスのURLへのリンクや相対パスのURLへのリンクのあとに続けて記述することにより、特定ページの特定の要素に移動できるようになります
|
1 2 3 |
<a href="〇〇.html#contents"> 〇〇.htmlのIDcontentsがついた要素に移動 </a> |
メールアドレスへのリンク
特定のメールアドレスに向けたメールを送るためにメールソフトを立ち上げさせるリンクを作る際はmailto:プロトコルを使用します|
1 2 3 |
<a href="mailto:example@example.com"> example@example.comにメールする </a> |
電話番号へのリンク
電話番号へのリンクは、端末によって動きが異なってきますが、スマートフォンを含む携帯電話であればそのまま発信を促すナビゲーションが出て、PCであればSkypeやFaceTimeといったソフトが起動します
|
1 2 3 |
<a href="telto:000-0000-0000"> 000-0000-0000に電話する </a> |
target属性
target属性はリンクを開く場所を指定する属性
何も指定していない状態だと、同じタブで開くようになっています
_self
現在と同じタブ（ウインドウ）でリンクを開く
何も指定してないときと同じ
