アンカー

834 views

アンカー(<a>タグ)

アンカー(<a>タグ)とルーターリンク(主にシングルページアプリケーション(SPA)で使用される)には、それぞれ異なる目的と使い方があります。以下に、その違いと使い所を詳しく説明します。

概要

アンカータグ(<a>)は、HTML文書内でリンクを作成するために使用されます。リンク先はURLで指定され、クリックするとそのURLに移動します。

属性

  • href: リンク先のURLを指定します。
  • target: リンク先の表示方法を指定します。例えば、_blankは新しいタブでリンクを開きます。
  • title: リンクにマウスを重ねたときに表示されるテキストを指定します。

説明

  • この例では、ユーザーがリンクをクリックすると、https://www.example.comに移動します。
  • target="_blank"により、リンクが新しいタブで開かれます。

主な使い所

  • 外部ウェブサイトへのリンク。
  • 同一ページ内の別の場所へのジャンプ(例:<a href="#section2">Go to Section 2</a>)。
  • ダウンロードリンクやメールリンク(例:<a href="mailto:example@example.com">Send Email</a>)。
  • HTMLのアンカーは、外部サイトへのリンクやページ内リンクなど、伝統的なウェブページナビゲーションに使用します。
  • ルーターリンクは、SPAでコンポーネントの遷移を管理し、リロードなしで動的にページ内容を切り替えるのに使用します。

それぞれの特性を理解し、適切なシナリオで使い分けることが重要です。

ページ間の移動に便利なリンクを定義します。

特定のページ内の位置にリンクを作成する際に使用されます。

コンポーネントを配置すると、デフォルトで以下のコードが定義されます。

hrefと違ってルーターリンクの場合はグローバル変数の値も引き継がれます。

hrefの場合はリロードと同じ扱いになります。

<data-comp-id=”anchor.1″ id=”anchor.1″></a>

以下のプロパティがあります

プロパティ 内容
Data Mapping Magic プログラムで定義されたコントロールを指定します。
歯車ボタンをクリックするとコントロール一覧が表示されます。ここから選択することができます。
Magicの項目とマッピングしてクリックイベントなどをMagic側に渡します。
Router Link ルーティングのためのリンク先を指定します。
Dropdown Type ドロップダウンの表示タイプを以下から指定します。

  • Default …… 通常のハイパーリンクと同じようにテキストにアンダーバーが表示されます。
  • Header …… 表示行が枠として表示され、テキストにアンダーバーが表示されます。
  • Item …… 表示行が枠として表示されます。アンダーバーは表示されません。

 

Share this Article

アンカー

Or copy link

CONTENTS