JavaScriptで、このように吹き出しを表示することもできます

WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <a>「リンク」

<a> 「リンク」[読み方：エー、アンカー]

<a>タグは、リンクを指定する場合に利用します。
CSSを利用することで綺麗なアンカーを表示することができます。

HTML規格HTML4.01HTML5
使用可否○○
広告

<a> の仕様

カテゴリー使用できる場所（親要素）コンテンツモデル（子要素）タグ省略
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ（href属性指定ありの時）
パルバブルコンテンツ		フレージングコンテンツを子要素にもてる場所トランスペアレント
但し、インタラクティブコンテンツは不可		不可

<a> の属性

【構文】
<a href="http://www.cman.jp/" hreflang="ja" target="_blank"・・・>～</a>
属性意味値のサンプルなど
href="値"リンク先のURL、Path
【条件付必須】
※下記留意事項参照		サーバ内の相対パス ： 「../index.html」
URL ： 「http://www.cman.jp」
メール ： 「info@example.jp」
hreflang="値"リンク先の言語コード「ja」「en」
type="値"リンク先のMIMEタイプ「image/gif」
rel=値"リンク先のタイプ「help」「search」
target="値"リンク先の表示方法
値意味
_blank新規のウィンドウに表示
_self現在のウィンドウに表示
_parent親ウィンドウに表示
_top現在のウインドウに表示（フレームは解除される）
任意ウインドウ名任意のウィンドウに表示
name="値"アンカーの識別名※HTML5で廃止。idで指定する。
download="ファイル名"リンク先のリソースのダウンロード要否指定ファイル名の指定は、任意。
ping="値"pingを送信するURLURL
referrerpolicy="値"リファラーポリシーを指定リファラーポリシー
廃止された属性
  • charset
  • rev
  • shape
  • coords
  • methods
  • urn
  • datasrc
  • datafld
グローバル属性
  • accesskey
  • autocapitalize
  • autofocus
  • class
  • contenteditable
  • dir
  • draggable
  • enterkeyhint
  • hidden
  • id
  • inert
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • nonce
  • popover
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate
  • writingsuggestions
イベント属性
ページTOP

<a>タグのサンプル

1.URLへリンク
<a href="http://www.cman.jp/" target="_blank">URLリンクを新しいページで開く</a>
URLリンクを新しいページで開く

2.相対パスへリンク（同一サーバ内のページ）
<a href="../">相対パスで他ページにリンク</a>
相対パスで他ページにリンク

3.ページ内のラベルへリンク
<a href="#tmMainFrame">このページの先頭へ</a>
このページの先頭へ

4.画像でへリンク
<a href="http://www.cman.jp/QRcode/" target="_blank">
<img src="http://www.cman.jp/QRcode/image/logo.gif"></a>

5.メールへリンク
<a href="mailto:info@example.jp?Subject=MailTest&amp;body=%83%81%81%5B%83%8B%93%E0%97%65">メールへのリンク</a>
メールへのリンク

他にも多くのサンプルを掲載しています。「リンクの各種サンプル」を参照ください。
ページTOP

スタイルシート(CSS)を使用しリンクの見た目を変えるサンプル

スタイルシート（CSS）を使用することで以下のような<a>タグも可能となります。

画像を入れ替えるリンク色を入れ替えるリンクボタン風のリンク
他にも色々あります。サンプルの詳細は「リンクの各種サンプル」を参照ください。
ページTOP

JavaScriptを使用しリンクに動きを加えるサンプル

スタイルシート（CSS）を使用することで以下のような<a>タグも可能となります。

文字が変わるリンク吹き出しが表示されるリンクボタンでリンク
他にも色々あります。サンプルの詳細は「リンクの各種サンプル」を参照ください。
ページTOP

留意事項

  • href属性を指定しない場合、プレースホルダーを表します。（リンク先がまだ存在しない場合などに指定）
  • href属性を指定しない場合、target属性、download属性、ping属性、rel属性、hreflang属性、type属性、referrerpolicy属性は、指定できません。
  • itemprop属性を指定する場合、href属性も指定が必須です。
ページTOP
関連するCSS(STYLE)
cursorカーソルの種類
text-decoration文字の装飾線の表示
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン