リンクとパスを理解しよう aタグ(要素)

文字や画像をクリックさせて、目的のページや別サイトへ移動させるためにはハイパーリンク(以下リンク)という機能を利用します。
リンクを設定するにはaタグを利用します。

aタグのaはAnchor(アンカー)は錨(船のいかり)という意味を持ち、リンク(船)の出発点や到達点を設定(固定)できます。

aタグ

要素 a リンク関係の設定を行う。
属性 href パスを指定し、リンク先の設定を行う
name ラベルの設定を行う
target リンク先を表示する場所を設定できる
記述例 <a href=”http://www.yahoo.co.jp”>検索エンジンヤフー</a>の使い方
(検索エンジンヤフーという文字にヤフーへのハイパーリンクを設定)

aタグの属性

href HyperText Referenceの頭文字が名前になっている属性で、値にリンク先を設定することでページを切り替えることができる。
リンク先の指定は絶対パスか相対パスのどちらかで指定する。絶対パスの例:<a href=”http://www.google.co.jp”>googleのページ</a>
相対パスの例:<a href=”../”>HTMLカテゴリページ</a>※絶対パスおよび相対パスの違いは下の記事をご覧ください
※パスおよび階層構造については「階層構造とパス」をご覧ください。
name ラベルの設定ができます。ページ内にラベルを設定するとページの先頭ではなく、そのラベルの場所まで移動することができます。
※例は別記事参照
target ページの表示先を設定できます。値には「_blank」「_self」等があり、_blankは別ウィンドウ(もしくは別タブ、別フレーム)でリンク先を表示します。_selfは現在のウィンドウ(もしくは現在のタブ、現在のフレーム)でリンク先を表示します。

絶対パスと相対パス

href属性の値(リンク先)には絶対パスと相対パスを指定できます。主に、絶対パスは別サイトへのリンクを設定する場合、相対パスは同じサイト内で別ページへのリンクを設定する場合に使用します。

絶対パスはhttp://から記述するURLを指定し、別サイトへのリンクを設定します。
相対パスは現在のページを基準としたリンク先を指定し、同じサイト内の別ページや画像へのリンクを設定します。

※上記の説明は一般的なもので、同じサイト内でも絶対パスを利用することもあります。

練習

下の入力欄に「買い物なら楽天」という文字に「http://rakuten.co.jp」のリンクを設定して、別ウィンドウで表示する設定にしてみましょう。
※「」は入力しません。


結果が表示されます

スポンサードリンク
レクタングル広告(大)
レクタングル広告(大)
スポンサードリンク
レクタングル広告(大)

コメントをどうぞ

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)