リンクを作成する - HTML

リンクを作成するにはaタグを使う。

• リンクのテキストはaタグの開始タグと終了タグの間に記述する
• リンク先のURLはhref属性に書く
• 別タブで開くにはtarget属性に_blankをつける

aタグの例

<a href="https://google.co.jp" target="_blank">Googleへ移動する</a>

Googleへ移動する というテキストでGoogleのページへ飛べるリンクを作成する。また、別タブで開くようになっている。

リンク先の指定の仕方

• 絶対パス: 主に別のWebサイトへのリンク
• 相対パス: 主にサイト内のリンク。サイト内リンクと呼ばれる。

サイト内はどこかしらからリンクされていることは重要！！

index.htmlは特殊な扱い

内部リンクでの(?)リンク先のファイルがindex.htmlの場合、省略することができる

以下の2つは同じ意味

<a href="movies/index.html">録画一覧</a>

<a href="movies/">録画一覧</a>

ローカルで表示するときには、うまく表示されなかった

Webサイトを作るときにはどちらかで統一すること！

ルート相対パス

そのサイトのルートディレクトリを起点としてパス指定する

以下のファイル階層の場合

.
├── index.html      --- /
├── movies
│   └── index.html  --- /movies
└── user
    ├── index.html  --- /user/
    └── mypage.html --- /user/mypage.html

/がルートとなるため上記のようになる

index.htmlを省力したときと同様にローカルではうまく動かないらしい

ページ内リンク

そのページ内の指定の場所に飛ぶリンク。スクロールしてくれる感じ

リンクに#idみたいに指定する

<a href="#food">食べ物</a>
...
<h2 id="food">食べ物</h2>
...

ページの一番上まで移動

以下の記述をすると、ページの一番上までスクロールする

<a href="#">トップへ戻る</a>

参考文献

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)