シェアする

  • このエントリーをはてなブックマークに追加

リンクタグ <a>タグ</a>の基本【保存版】

シェアする

  • このエントリーをはてなブックマークに追加
  • 18
link-tags-00-web


どうも、ジョニー@creatorcheck)です。

リンクタグについての解説です。

他のページ(サイト)へリンクする

<a href=””>

他のページへリンクをする(他のページへジャンプする)には、<a>の「リンクタグ」を使用します。<a href=””>という属性を追加して、移動先のアドレス(ファイル名)を指定します。リンクタグによって囲まれた文字がリンクされる文字となります。

記述例

<a href="http://www.creatorcheck.net/">クリエイターチェック</a>

実際の見え方

クリエイターチェック

タグをコピーする

<a href="リンク先のURLを指定">リンクする文字</a>


リンク先のページの場所、方法を指定する

<a href=”” target=””>

リンク先の表示方法を設定するには、通常のリンク方法に加えて、「target=””」というような属性を付けて、表示方法や位置を指定します。このことをターゲット指定といいます。この「target=””」内に入力する値によって動作が異なります。以下を参考にどうぞ。
「target=””」に入力できる値

  • 「_self」 同一ウィンドウにリンク先を表示します。
    (初期値なので設定しない場合でも同じです)
  • 「_blank」 新しいウィンドウを立ち上げて、そのウィンドウにリンク先を表示します。
  • 「_parent」 親フレームにリンク先を表示します。フレーム使用時に有効です。
  • 「_top」 フレームを解除して、ウィンドウ全体にリンク先を表示します。
  • 「フレームやウィンドウの名前」 任意のフレームやウィンドウにリンク先を表示します。あらかじめ、対象となるフレームやウィンドウに名前を付けておく必要があります。

記述例

<a href="http://www.creatorcheck.net/" target="_blank">クリエイターチェック</a>

実際の見え方

クリエイターチェック

タグをコピーする

<a href="リンク先のURLを指定" target="表示方法や位置を指定">リンクする文字</a>
  • padding … 枠と文章の余白。
  • border … 枠線の種類、太さ、色。
  • border-radius … 角丸の半径。
  • background-color … 背景色。
  • margin-top・margin-bottom … 枠の上下の余白。


ラベルをつける

<a name=””>

ページ内でリンクする場合や、他のページ内のラベルへリンクする場合には、そのリンク先の目印としてラベルを付ける必要があります。指定方法はリンクタグに「name=””」という属性を追加して記述します。
※ラベル名は任意ですが、形式は半角英数字を使用します。

記述例

<a name="top">ここに移動</a>

実際の見え方

ここに移動

タグをコピーする

<a name="ラベル名">ラベルを付けたい位置</a>


同じページ内へ移動する(ラベル)

<a href=”#”>

あらかじめ同じページ内の任意の場所にラベルをつけておき、その位置へ移動します。
指定方法は、「href=””」という属性の中に「#(半角シャープ)+リンク先のラベル」を記入するだけです。
※あらかじめ任意の場所(リンクさせたい場所)でラベルの名前付けをしておく必要があります。

記述例

例えば画面のトップに「top」というラベル名を付け、
<a href="#top">topラベルの場所へ移動する</a>

実際の見え方

例えば画面のトップに「top」というラベル名を付け、
topラベルの場所へ移動する

タグをコピーする

<a href="#top">トップ(top)へ移動できるようにリンクを指定します。</a>


他のページ内のラベルへ移動する

<a href=”xxx.html#”>

他のページ内のラベルへ移動するリンクを指定する方法です。あらかじめリンクするページ内の任意の場所にラベルをつけておき(名前を付けておく)、その位置へリンクをしたい場合に使用します。
指定方法は、「href=””」という属性の中に「リンク先のURL+#(半角シャープ)+リンク先のラベル」を書き入れます。
※あらかじめリンクしたいページ内の任意の場所(リンクさせたい場所)にラベルの名前付けをしておく必要があります。

記述例

<a href="http://www.creatorcheck.net/copy-and-paste/link-tags/#top">ここに文字</a>

実際の見え方

ここに文字

タグをコピーする

<a href="リンク先のURL+#(半角シャープ)+リンク先のラベル">トップページ画面の任意の場所につけたラベルへリンクする</a>


画像にリンクをつける

<a href=””><img src=””>

画像からリンクすることも出来ます。リンクは通常のようにリンクタグに「href=””」「target=””」などの属性でリンク先やターゲットを指定し、画像タグには「src=””」「align=””」などで、画像の場所や表示位置を指定します。

記述例

<a href="http://blog.blogmura.com/ranking.html"><img src="http://www.creatorcheck.net/wp-content/uploads/blog-b.jpg" alt="ポチっと"></a>

実際の見え方

ポチっと

タグをコピーする

<a href="リンク先のURL"><img src="画像のファイル名(保存場所)" alt="画像の説明文"></a>

まとめ(感想)

今回はリンクの話でした。わざわざコードを打ち込まなくても、使いたいコードをコピペで色々できちゃいますよ。

johnny-tubuyaki

まさに、習うより慣れろ..ですね。
リンクタグ <a>タグ</a>の基本【保存版】
この記事をお届けした
クリエイターチェックの最新ニュース情報を、
いいねしてチェックしよう!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク