HTML: a タグ

概略

a タグはリンクを作るタグです。

• MDN: a タグ: アンカー要素

<a href="リンク URL">表示する文字列</a>

<!--例-->
<a href="html_index.html">HTML サンプル</a>

HTML サンプル

ページ内へのリンク

ページ内の特定の場所にもリンクを張ることができます。

• TestHTML_a_scroll01.html
  ページ内リンクの単純なサンプル
  a タグ: ページ内へのリンク

CSS サンプル

• TestHTML_a_css01.html
  装飾いろいろ。下線の有無、背景色など。
  
• TestCSS_a_hover_visited01.html
  :hover, :active, :visited のサンプル。
  

リンクに定型のテキストを付ける

CSS の ::before 擬似要素、::after 擬似要素 で定型のテキストを入れることができます。
CSS content

リンクにアイコンを付ける

リンクにアイコンを付けるときにリンクごとにアイコンの img タグをつけるのは面倒です。こちらも CSS で簡単に指定できます。 方法は下の 2つがあります。

1. padding と background で画像を配置する。
   CSS background - 背景
2. ::before や ::after で画像を挿入する。
   CSS content

いろいろ

ページ内リンク

• a タグ: ページ内へのリンク

a タグをインラインブロックやブロックにしたサンプル

• TestHTML_a_inline_block01.html
  ボタン風のリンク。インライン (inline) 要素、 インラインブロック (inline-block) 要素、 ブロック (block) 要素の違い。
  CSS display: inline,block など

リンクを無効にする (2024/04)

a タグのリンクをクリックしたときに リンク先のページにジャンプしてほしくない場合がたまにあります。 例えば a タグのリンク付きの img 画像で HTML コードを変更せずにリンクを無効にしたいときがあります。 CSS の pointer-events: none; でリンク機能を無効にできます。

• MDN: pointer-events

• TestCSS_pointer_event_a_img01.html (2024/04)
  pointer-events: none; のサンプル。

関連

• HTML: a タグ: ページ内へのリンク
• CSS display: inline,block など