目次

1. アンカーリンクを使ってみよ
2. アンカーリンクの「aタグ」
   1. aタグのコンテンツモデル
3. aタグのhref属性・target属性・id属性を学ぼう
   1. href属性
   2. target属性
   3. id属性
4. 試しにブログ一覧にリンクを付けてみよう
5. まとめ

Youtubeで動画解説しています。

このブログをベースに、解説動画を作りましたので、併せてご覧ください。

チャンネル登録、宜しくお願いします。

アンカーリンクを使ってみよ

以下のコードをコピペして、ブラウザで確認してみましょう。

<a href="https://sakuweb.liruu.com/">さくうぇぶ</a>
<br>
<a href="https://sakuweb.liruu.com/" target="_black"><img src="https://bit.ly/3EqMW19" alt="sakuweb" style="width:150px;"></a>
<br>
<a href="#li02">アンカーリンクの「aタグ」</a>

テキストの「さくうぇぶ」をクリックしてみてください。

咲くウェブTOPページ飛びましたよね。

次に、画像をクリックしましょう。

今度は同じページでも、別タブが開きましたね。

あと、「アンカーリンクの「aタグ」」ですが、クリックしても変化なし・・・・。

ブログの仕様上、動きませんが、「目次」は同じ指定方法で動いています。

ここでは、記述方法のみ参考に。

テキストでも画像でもリンクを付与できて、別タブへ遷移、ページ内遷移も可能なんです。

アンカーリンクの「aタグ」

aタグは「Anchor」の略です。

「船のいかり」ですね。

現時点から、指定した場所へ移動させるタグです。

また、いろんな属性を利用するとこで、マップでいう「ピン」の役割を果たしたり、いろんな使い方ができますよ！

aタグのコンテンツモデル

　

aタグ

コンテンツモデル

インタラクティブ、フローコンテンツ

子要素

フローコンテンツ

親タグ

セクショニング、ヘディング+α

　

他の情報はこちらをご覧ください。

SAKUWEB さくうぇぶ

先のコードを見ると、href属性とかtarget属性とかの記述ありますね。

見ていきましょう。

aタグのhref属性・target属性・id属性を学ぼう

いろんな属性を利用できますが、ここではよく使う属性を説明します。

<h1><a id="list">さくうぇぶ</a></h1>

<a href="#list">タイトル名のさくうぇぶに移動</a>

これで、該当のタイトル名まで移動させることができます。

「#」マークをつけないと動かないので、忘れずにね。

試しにブログ一覧にリンクを付けてみよう

以下の情報を使って、リストとリンクを作ってみよう。

—————————

リンク名：初心者必見！1分でできるBootstrapで「WEBサイト」の土台を作ろー！

リンク先：https://bit.ly/3fZcRnf

タブ：別タブ

リンク名：Bootstrapテンプレートをいじってみよー！

リンク先：https://bit.ly/3hEo5hc

タブ：別タブ

リンク名：レスポンシブ対応もできてるぅぅぅ

リンク先：https://sakuweb.liruu.com/bootstrap/bootstrap-c03/#li04

タブ：同じタブ

—————————

さて、いかがでしょうか？

では正解を。

<ul>
  <li><a href="https://bit.ly/3fZcRnf" target="_blank">初心者必見！1分でできるBootstrapで「WEBサイト」の土台を作ろー！</a></li>
  <li><a href="https://bit.ly/3hEo5hc" target="_blank">Bootstrapテンプレートをいじってみよー！</a></li>
  <li><a href="https://sakuweb.liruu.com/bootstrap/bootstrap-c03/#li04">レスポンシブ対応もできてるぅぅぅ</a></li>
</ul>

最後のページ内リンクですが、

「Bootatrapナビゲーションを作ろう」ページ内の「レスポンシブ対応もできてる」に飛ばしています。

「ページ内」と言われると「現在のページ内」と思っちゃいますが、

別ページ、外部ドメインのページ内リンクも指定できるんですね～。

指定方法は、ページ名の後ろのにid名をくっつければOKです。

これでアンカーリンクは理解できましたね。

次はナビゲーションを学びます。

ナビゲーションが終われば、サイトのヘッダー部分にある「ナビゲーション」を作るためのタグを学べたことになりますよ。