a リンクアンカーコピペで使えるHTML+CSS

a要素の概要
属性
1. a要素の属性
CSSデザイン
1. リンクのアンダーバーを消し、文字色を赤に変える
2. リンクを角丸ボタンにする

a要素の概要

リンクアンカーHTML
<a>～</a>
目的	リンクの設置。aはアンカーのa。
関連
Yahoo! japan
<a href="https://www.yahoo.co.jp">Yahoo! japan</a>

属性

a要素の属性

href

リンク先のURLを指定する。#アンカー名を指定して、ページ内リンクを指定することもできる。他にも、mailto:の指定も可能。

<a href="#css_jump">CSS</a><br />
<a href="mailto:tt93sa@tse.pt6p.qw">test mail</a>
～
<h3 id="css_jump">飛ぶ先</h3>

CSSデザイン
test mail

target

リンクの表示先を指定する。_blank 以外はほぼ使用しない。

_blank	新しいブラウザジングコンテキストで開く。つまり、新しいウィンドウ表示
_parent	1つ上（親）のブラウジングコンテキストで開く
_self	自身のブラウジングコンテキストで開く（指定なければ_self）
_top	最上位のブラウジングコンテキストで開く

<a href="https://www.yahoo.co.jp" target"_blank">Yahoo! japan</a>

Yahoo! japan

rel

リンク先のリソース位置づけ。意識して記述する必要はありません。ブログランキングなどで値渡しがうまくいっていない場合はnoopenerが原因になっていることが多く、その場合は rel=”noopener”を消せばよい。※wordpressではデフォルトで勝手についてしまうため設定を変更する必要があります。

alternate	代替文書
author	著者の情報
bookmark	固定リンク
external	外部サイト
help	ヘルプ文書
license	ライセンス文書
next	次のページ
nofollow	重要でない文書
noopener	Window.openerプロパティを設定しない。値を渡すリンクの場合、この指定があると必要な値が渡されず、リンク先の処理ができないことがある。
noreferrer	リファラを送信しない。こちらもリンク先の処理ができないことがある。
opener	Window.openerプロパティを設定する。
prev	前のページ
search	検索
tag	タグページ

その他