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

スポンサーリンク

a要素の概要

リンクアンカーHTML
<a>~</a>
目的リンクの設置。aはアンカーのa。
関連 
<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>
target

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

_blank新しいブラウザジングコンテキストで開く。つまり、新しいウィンドウ表示
_parent1つ上(親)のブラウジングコンテキストで開く
_self自身のブラウジングコンテキストで開く(指定なければ_self)
_top最上位のブラウジングコンテキストで開く
<a href="https://www.yahoo.co.jp" target"_blank">Yahoo! japan</a>
rel

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

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

download,hreflang,ping,type,referrerpolicyがあるが、ほとんんど使用されない。

CSSデザイン

リンクのアンダーバーを消し、文字色を赤に変える

a リンクのアンダーラインを消す コピペで使えるHTML+CSS
対象要素の概要a要素使用するCSSの概要text-decorationリンクのアンダーラインを消し、文字色を赤に変えるtext-decoration: none;でアンダーライン(underline)を非表示にします。以下サンプルは文字を赤

リンクを角丸ボタンにする

a リンクを角丸ボタンにする コピペで使えるHTML+CSS
リンクアンカーのa要素を修正して、角の丸い角丸ボタンを実現します。border-radiusプロパティとtext-decorationプロパティを使用します。