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 新しいブラウザジングコンテキストで開く。つまり、新しいウィンドウ表示 _parent 1つ上（親）のブラウジングコンテキストで開く _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 重要でない文書 noopener Window.openerプロパティを設定しない。値を渡すリンクの場合、この指定があると必要な値が渡されず、リンク先の処理ができないことがある。 noreferrer リファラを送信しない。こちらもリンク先の処理ができないことがある。 opener Window.openerプロパティを設定する。 prev 前のページ search 検索 tag タグページ - その他
-
download,hreflang,ping,type,referrerpolicyがあるが、ほとんんど使用されない。
CSSデザイン
リンクのアンダーバーを消し、文字色を赤に変える
a リンクのアンダーラインを消す コピペで使えるHTML+CSS
リンクアンカーのa要素について、text-decorationを修正してアンダーラインを消し、文字色を変更します。
programming-cafe.com
リンクを角丸ボタンにする
a リンクを角丸ボタンにする コピペで使えるHTML+CSS
リンクアンカーのa要素を修正して、角の丸い角丸ボタンを実現します。border-radiusプロパティとtext-decorationプロパティを使用します。
programming-cafe.com