0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

HTML で リンク を作成する ~HTML <a href="URL"></a>~

Last updated at Posted at 2019-07-04

目的

  • HTMLファイルにてリンクを作成する方法をまとめる

押さえるポイント

  • aタグを用いる。
  • aタグで囲ったテキストがリンクとして表示される。
  • aタグのhref属性によってリンク先を指定する。

#書き方の例

<!-- <a>タグでリンク先に飛ぶ、クリックできる文字を囲む -->
<a>Google</a>

<!-- リンク先をURLで指定する -->
<a href="https://twitter.com/mirimiripc">筆者のTwitterへ</a>

~実際の表示~

Google

筆者のTwitterへ

注意するポイント

  • リンク先のURLを指定するhref属性はaタグの開始タグ内に記載する。
  • URLをダブルクオートで囲む。

ちょっとしたテクニック

  • リンク先を開くときに新しい新規タブで開くようにする。
  • target属性で_blankを指定する。
    ~サンプルコード~
<!-- リンク先を既存タブの更新で開く -->
<a href="https://twitter.com/mirimiripc">筆者のTwitterへ</a>

<!-- リンク先を新規タブで開く -->
<a href="https://twitter.com/mirimiripc" target="_blank">筆者のTwitterへ</a>

~プレビュー画面~
※Qiitaは親切であるため下記のリンクはどちらともリンク先を新規タブで開くようになっている。
リンク先を既存タブの更新で開く
筆者のTwitterへ

リンク先を新規タブで開く
筆者のTwitterへ

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?