リンクする【<a>タグ】:HTML入門

ブログが作りたい!HTML入門 > リンクする【<a>タグ】:HTML入門

リンクする【<a>タグ】:HTML入門

リンクする【<a>タグ】:HTML入門

HTML入門(6)

今回は、リンクさせる方法です。

リンクがあってこそのHTMLですから、とうとう主役の登場といったところです。お話は、次の順番で進みます。

▲ページの先頭に戻る

リンクタグ(<a>タグ)とは?

1:<a>タグの基本形

<a>タグは、リンクを指定するためのタグです。

最も利用される記述の仕方は、次のようになります。文字や、画像にリンクタグを付けることが出来ます。

<a href="(リンク先のURL)">~</a>

ちなみに、「a」は、「Anchor」の頭文字「a」です。なぜに「船の錨(いかり)」を意味するAnchorなのか???分かりません。

▲ページの先頭に戻る

2:リンクとは?

リンクは、ホームページ内のリンクタグが埋め込まれている場所を、マウスでクリックすることで、指定された場所を表示することが出来るシステムのことです。

言葉ではイメージし難いかもしれませんので、リンクをご存じない人は体験してみてください。

例えば、次の文中にある「FC2ブログの作成情報」という箇所に、リンクタグが埋め込まれています。

「今日からブログをはじめようと思ってー、FC2ブログの作成情報を紹介しているブログを見つけたんだけどー、なんか超やばい系なんだー」

この「FC2ブログの作成情報」をクリックすると、当ブログのトップページが表示されます。これが、リンクというシステムです。

リンクは、リンク先に、あなたが求める情報が、さらに存在することを示唆しています。

▲ページの先頭に戻る

3:リンクタグ(<a>タグ)の属性

<a>タグの主な属性について、簡単に説明します。ざっくり眺めて頭を慣らしてください。

href

リンク先のURLを指定します。Hypertext REFerenceを略して、hrefです。

さらに、次のような属性も使う場合があります。

title

リンクの説明を書きます。また、画像の上にマウスのカーソルを乗せたときにコメントとして表示されます。

target

別ウィンドウ表示させたい場合などに指定します。

name

ページ内のある特定の箇所を表示させたい場合などに指定します。

▲ページの先頭に戻る

本にたとえてはイメージできない

当ブログのHTML入門を通してご覧になってきた人は、ご存知かと思いますが、今までHTMLタグを「本」に見立ててお話してきました。

しかし、今回のリンクタグ(<a>タグ)は、本にたとえることは出来ません。

このリンクと言うものは、まったくもってホームページ独自のもので、たとえようもありません。

リンクは、例えば、車にさわっただけで目的地に着くような・・・まるで、どこでもドアみたいなものです。

もし、まったく本と同じであるのなら、HTML(ホームページ)なんて、いらんのですよ。

▲ページの先頭に戻る

実習 <a>タグ

それでは、リンクしてみましょう。

1:文字にリンクを張ってみる

(01)

どこか、日頃から愛してやまないWebサイトを、ひとつ思い浮かべてください。

あなたのブログでも、よく利用しているホームページでも、どこでも構いませんよ。

(02)

Webサイトが決まったら、次のHTMLコードに、そのWebサイトのURLを「(WebサイトURL)」へ、Webサイト名を「(Webサイト名)」へ貼り付けましょう。

(03)

出来たかしら?よく分からないですか。そうかもしれませぬ。

例えば、私は「COOKPAD」という料理をテーマにしたサイトが好きです。その場合は、次のようになります。

(WebサイトURL)

http://cookpad.com/

(Webサイト名)

COOKPAD

(04)

そして、HTMLコードは、次のようになります。お分かりいただけたと思うのだけれど、いかがでしょうか。

WebサイトURLとWebサイト名は、あなたの好きなように変えてみてくださいね。

HTMLコードが出来たら、テキストエディタを起ち上げて、コピーして貼り付けてください。

(05)

HTMLファイル名を、「link.html」など、お好きなように入力し、「適当なフォルダ」に保存しましょう。

HTMLファイル名を作成

(06)

作成したHTMLファイルをブラウザで表示して、リンクをクリックしてみましょう。

リンクをクリック

あなたの好きなサイトが表示されるはずです。

サイトが表示される

▲ページの先頭に戻る

2:画像にリンクを張ってみる

(07)

文字だけでなく、画像にもリンクを張ることが出来ます。今度は、画像にリンクを張ってみましょう。

まず、何か適当な画像を、用意してください。

適当な画像を用意

(08)

画像を、「適当なフォルダ」に入れます。

画像を適当なフォルダに入れる

画像ファイル名は、「link-button.gif」など、お好きなようにどうぞ。

(09)

もう、記事「画像を使う 【<img>タグ】:HTML入門」で画像の表示方法もご存知かと思います。

HTMLコードは、次のようになります。

文字にリンクを付けたければ、文字を<a>~</a>で囲むし、画像にリンクを付けたければ、画像を<a>~</a>で囲むわけです。

(10)

HTMLファイルとして作成し、ブラウザで表示してみましょう。

ブラウザで表示

画像をクリックすれば、あなたの好きなサイトが表示されるはずです。

サイトが表示される

リンクが使えるようになると、俄然(がぜん)、HTMLらしくなってきます。ちょっと楽しくないですか?

▲ページの先頭に戻る

3:title属性を使ってみる

(11)

次は、title属性を使ってみましょう。

すでに、画像タグ(<img>タグ)でもやっているので、分かり良いと思います。リンクタグ(<a>タグ)でも、title属性は使えます。

title

リンクの説明を書きます。また、リンクの上にマウスのカーソルを乗せたときにコメントとして表示されます。

リンクタグ(<a>タグ)のtitle属性では、アイディア次第で、ちょっとおもしろいことが出来るかもしれませんよ。

(12)

例えば、画像でリンクを使った場合などは、表示の都合上、文字が制限されてしまうことは否めません。

そのようなときに、ちょっと補足的な意味合いで、title属性を記述することができます。

ブラウザで表示すると、次のようになります。

リンクされていると、マウス(カーソル)を乗せる可能性が高いので、うまく活用すれば、表現の幅が広がります。

ブラウザで表示する

(13)

また例えば、「ブログ」という言葉にリンクを張る場合、ブログという言葉を知らない人のために「ブログとは?」とtitle属性を入れておけば、「あ、クリックすると、説明してくれるかも」と期待させることができます。

以下の「ブログ」という文字の上に、マウス(カーソル)を乗せてみてください。

最近、ブログをはじめました。

あるいは、簡単な説明を、title属性に記述しておいても良いかもしれません。クリックすれば、さらに詳しい情報が得られる仕組みです。

最近、ブログをはじめました。

あまり逸脱(いつだつ)すると良くないでしょうけれど、ユーザが利用しやすいようにすることを考えてやってみると、おもしろいことが出来そうです。

(14)

前項で作成したHTMLファイルのリンクタグに、title属性を追加して、遊んでみてください。

▲ページの先頭に戻る

4:target属性を使ってみる

(15)

target属性をつけておくと、別ウィンドウ表示ができます。さっそく試してみましょう。

target

別ウィンドウ表示させたい場合などに指定します。

(16)

次のように、「target="_blank"」と書けば、別ウィンドウ表示されるので、試してみてください。

ただ、あまり推奨されていないのだそうです。

私はできれば、もと居たサイトへ戻るリンクが張られていない場合は、別ウィンドウ表示して欲しいのですが、世の中はそのような流れにないようです。

今後は、使われなくなるかもしれませんが、target属性によって、どのようにブラウザが動作するものか経験しておきましょう。

また、IEの場合は、別ウィンドウ表示ですが、Firefoxの場合は、別タブ表示という形になるはずです。ブラウザによる違いなども、体験してみてください。

▲ページの先頭に戻る

5:name属性を使ってみる

(17)

name属性を使ってみましょう。

name

ページ内のある特定の箇所を表示させたい場合などに指定します。

通例のリンクは、ページからページへの移動ですが、name属性を使うと、ページの特定の箇所を表示させることができます。

同じページ内の特定箇所を表示させたい場合は、次のようになります。

表示させたい場所に、name属性で「場所の名前(koko)」をつけた<a>リンクを記述し、リンク元では、URLに「#(シャープ)」を付けて場所名(koko)を記述します。

name属性で場所の名前をつけた<a>リンクを記述し、リンク元ではURLに#を付けて場所名を記述

*:同じページ内の場合は、HTMLファイル名(この場合は、a.html)を省略して書くこともできます。

別のページの特定箇所を表示させたい場合は、次のようになります。

別のページの特定箇所を表示させたい場合

(18)

name属性を、試してみましょう。次のHTMLコードでHTMLファイルを作成し、ブラウザで表示してみましょう。

リンクをクリックすれば、ページ内で、特定の場所が表示されるはずです。

ちなみに、熱心な人は、HTMLコードを見て、最後に<br>タグが入っていることに気付いたのではないかしら。

これは、下に余裕(スペース)がないと、それぞれ先頭が表示されないために入れました。

試しに、<br>タグの行を削除したHTMLファイルで、リンクをクリックしてみてください。突っかかるのが分かるはずです。

name属性を使う場合は、このような留意点もあります。頭の片隅に入れておいてください。

ちなみに、「style="margin-bottom:500px;"」という記述は、CSSを使って、下に500px分だけ開けていることを意味します。

▲ページの先頭に戻る

画像リンクの枠線を非表示にする

1:デザイン的にちょっと・・・

(01)

画像にリンクを張ったときに、何だか気になる部分がなかったかしら?

えぇ、そうなんです。画像の回りにリンクの枠線が出来てしまうんです。四角いボタンならまだしも、円形のものは、ありえないほどみっともない感じです。

画像の回りにリンクの枠線

でも、彼も悪気があって、リンクの枠線を表示しているわけではないので許してあげてください。

彼も、リンクだと分かって欲しいから、安月給でもがんばって早起きして枠線を表示しているのです。彼だって一所懸命やっているのです。

でも、画像リンクの枠線は邪魔なので、表示されないようにしましょう。だってそう・・・邪魔だから。

▲ページの先頭に戻る

2:border属性で非表示にする

(02)

通常、リンクの枠線は、CSSによって設定します。

ですから本来、<img>タグの属性などで、設定する必要はないのですが、念のため頭の片隅に入れておきましょう。

画像タグ(<img>タグ)のborder属性で、「0」を設定します。

CSSで、リンクの枠線を設定する方法は、CSS入門にて説明いたします。

(02)

HTMLファイルを作成して、ブラウザで表示してみましょう。枠線が消えます。

ブラウザで表示

▲ページの先頭に戻る

次回予告

次回は、表を作るタグ(<table>タグ)について書きます。

▲ページの先頭に戻る

関連記事

HTMLに関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2008/03/22 更新日:2008/03/22

« 「画像を使う 【<img>タグ】」|「表を作る 【<table>タグ】」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

(^^♪

kumacrowさん。 こんばんは。

リンクってあったから、分かるかなと思ってみてたら、だんだん…(笑)
お魚くわえたネコさん、可愛いです♪。 正義の味方もカッコいい(笑)
前にリンクはいいですって行ったのは 『当ブログ(「ブログが作りたい!」)の雰囲気にそぐわないサイトさま。』 と、あったからです。
私のブログは、クマクロさんのブログに建設的ではないからです。
でも、また遊びに来てくださいね♪ 

ローマ字入力してますが、なぜか、ひらがな入力に代わってしまうことが、最近多々あります。
ブログによっては、
ATOKにしないと入らなかったり…以前はこんなこと無かったのに。
どこかを知らないうちにさわっちゃったのかなあ…。 こんな調子です。
情けない(>_<)  今も、顔のあと、ひらがなに急になり、この欄以外をクリックすると、直りました。
今も、今も、???なぜでしょう? こんなこと、初めてです。
前に教えていただいたように、違うところで書いて…というのも考えて見ます。

内容は分からなくても、可愛い熊さんやネコさん見てるだけで私はいいです。
頑張って下さい(*^_^*)

リンク

tearful rinkoさん、こんばんは。
コメントありがとうございます。

(1)厳しい
ちょっとHTMLも、説明するのに精一杯で、
分かり易く書く余裕がなくなってきているんすよねぇ。

ただでさえシリーズものは尻つぼみになっていくのに、
うーん、厳しい。(´・ω・) ショボーン

(2)リンク
な~んだぁ、リンクしても問題なかったんですね。(・∀・)

とりあえず、ソーシャルブックマークには入れておきます。
Seesaaのリンク集は、一般の部が現状はないので、
近いうちに作成して、そのときに入れておきます。

雰囲気にそぐわないというのは、アダルト系などです。
多少、厳し目に書いておかないと、
対応に追われそうなので、事前に書いています。

(3)文字の入力
故障とかじゃないと良いですけどね~。(´Д`)
うっかり押しちゃうことは、たまにありますけどね。

ノートパソコンのキーボードは打ちにくいから、
デスクトップ用のキーボードを買ってきてつけるのも、
ひとつの方法かもしれませぬ。

target属性

KumaCrowさんこんばんは!

質問です。
target="_blank"はなぜあまり推薦されてないのですか?
今後使えなくなる可能性はあるのでしょうか?

宜しくお願いします。

target属性が推奨されない理由

ichimarugo-いちまるごさん、こんにちは。
僭越ではありますが、お答えいたします。(・∀・)/

(1)target属性に関する状況

 ・HTML4 Transitional→非推奨
 ・HTML4 Strict、XHTML 1.1→完全に抹消

ゆるめのルールで書けば、非推奨ですが、

厳格なルールに則って書く場合や、
今後、主流となるであろうXHTMLで書く場合は、
使っちゃダメな状況になります。

「使えなくなる」わけではありませんが、
使い続けるのであれば、Transitionalで書き続けることになります。

ちなみに、HTML文の1行目で、
どのルールで書いているか宣言しています。

(2)target属性が、なぜ推奨されないのか?

理由1:
 目を不自由にされている方々は、別ウィンドウ表示されてしまうと、
 別ウィンドウが表示されたことに気が付かないし、
 また、「戻る」ことが出来ないということがあるようです。

理由2:
 target属性付きのリンクは、閲覧する側に選択権がない。

理由3:
 年配の方々は、ウィンドウをどんどん開いたままにして、
 パソコンに負荷をかけて利用している。


・・・と、よく論じられているのは、こんな感じかと思います。

理由1は大きいですね。
でも、ブラウザで、機能的に吸収できないことなのかな?と、
ちょっと思ったりします。

目を不自由にされている知り合いがいないので、
どういう状況にあるのか、本当にどうするのが良いのかは、
分からないです。

理由2は、勝手に動作を強要されるのが嫌ということみたいです。
ご存知かもしれませんが、Firefoxであれば、
shiftキーを押しながらリンクをクリックすると、
別ウィンドウ表示になります。

ctrlキーを押しながらリンクをクリックすると、別タブ表示かな。

「別ウィンドウ表示する場合は、自分でそうするわい!」
というお話です。

私は、わざわざ別キーを押すなんて面倒でたまらないんだけどなぁ。

理由3は、年配の人に限らず、「閉じるという動作が面倒くさい」
という人もいらっしゃるようです。

(3)感想
調べものなどのときは、別タブ表示している方が、
とても利便性が高いのだけれど、
そんな風に思っている人たちの言い分は、
聞いてくれないみたいです。

わざわざ、ctrlキーを押さないといけない日が来るのかしら。

もちろん、多くの人たちの意見を尊重しますが、
私の言い分だって、聞いて欲しかったよ。(T-T)

回答ありがとうございました!

ありがとうございました!!!

確かにお年寄りにも目の不自由な方にとっても別ウィンドウで
開く動作は親切ではないですね。

細かい説明をしていただいたので、とても解りやすかったです。
ありがとうございました^^

ポチポチして帰ります

name属性の非推奨

ichimarugo-いちまるごさん、こんばんは。
ポチポチありがとうございます。

ついでに書いておくと、
name属性も、XHTMLでは非推奨になるようです。

XHTML1.0→非推奨
XHTML1.1→抹消

リンクの行動が、スマートじゃないからとか何とか・・・、
よく意味が分かりません。

もしどうしても使いたければ、
代替としては、id属性を使うそうです。

何だか完全に言語が違う方が、
覚えやすいような気がしてきました。(´Д`;)

No title

「title属性」まで 説明どおりに表示されて
とてもうれしかったです。
Terapadで想定外のできごとを
(保存するとメモ帳でたちあがる、書き込み禁止など)
どうにか乗り越えた後だけに
うれしさ倍増です。

sachiさん、すごい!

sachiさん、こんばんは。

なるほど、メモ帳から、TeraPadに乗り換える設定手順も、
書いておけば良かったですね。

気付きませんでした。ありがとうございます。

しかし、すごいですね。
乗り越えちゃうだなんて!sachiさん、すごい!

お助け下さい

はじめまして。色々とためになることがたくさん、しかもとても分かりやすく説明してあるサイトを発見して、喜んでおります。
さて、私はHTMLに関しては全くの長所新車(超初心者)なので、リンクについてもよく分かっていません。
メールアドレスにリンクしたい場合は、どのようにしたら良いのでしょうか?通常のURLが使えないので、やり方が分からず、夜も眠れません。何卒お助けくださいませ。

メールを受取るためのシステム

長所新車さん、こんにちは!( ・∀・)ノぐもに
コメントありがとうございます。

【その1】

「メールアドレスにリンクしたい場合」というのは、

リンクをクリックすると、
ブラウザで設定してあるメーラが起ち上がる仕組みのことかしら。

で、あれば、次のように書きます。

<a href="mailto:(受信するメールアドレス)">~</a>

例えば、受信するメールアドレスが、「info@hoge.com」で、
リンクの文言が、「お問い合わせ」であれば、

<a href="mailto:info@hoge.com">お問い合わせ</a>

というような形で書きます。

ただ、この仕組みは、いろいろと問題があります。
主に3点。

 1:文字化けする可能性が高い。
 2:メーラの起動が遅い。
 3:SPAMメールが増える可能性がある。

「1」は、何か改善する方法があるかもしれませんが、
調べる時間をコストと考えると、割に合わないかもしれません。

「2」は、さらに致命的です。

時間がかかり過ぎて、
おそらく、メールを出すのを途中で断念する人が増えます。

とくにビジネス用のサイトであれば、
この仕組みは、あまり好ましくありません。

「3」は、直接メールアドレスをHTMLファイルに書くので、
SPAM業者にメールを知られやすいというお話です。

SPAMメールが増えてしまう可能性があります。


【その2】

そのようなわけで、

「メールフォーム」と呼ばれるシステムを、
導入するのが一般的です。

「メールフォーム」というのは、
うちのブログでも利用しているので、

ご存知でない場合は、「お問合せ」をクリックし、
ご覧になってみてください。(上の方にあります)

これは、FC2メールフォームを利用しています。
 →http://form.fc2.com/

また、Googleなどで「メールフォーム」と入力して検索すれば、
数多の「メールフォーム」サービスを見つけることができます。

無料のもの、有料のものなど、いろいろです。
要件にあったものを探してみるとよろしいかと思います。


【その3】

仕組みとしては、「メールフォーム」で良いのですが、

本格的に、ビジネスとしてサイトを運営していくのであれば、
もう少し、セキュリティ面も検討する必要があります。

他社が提供する「メールフォーム」サービスを利用するのは、
必ずしも安全とは言えません。

ビジネスの規模にもよりますが、
そういう場合は、ホームページ制作会社へ相談した方が早いです。

そこそこいいお値段になってしまうかもしれませんが、
自分で調べ、プログラムを習得・作成し・・・という時間を考えれば、

お願いしてしまう方が、結果的には安く上がります。


以上、長所新車さんの状況にあわせて、
ご検討ください。

No title

文字にリンクを貼ってみる という所で、解説されたようにやってみたのですが、http://kamihate1024.blog.fc2.com/%EF%BC%88https://twitter.com/syotaro1024%EF%BC%89
こんな風に、TwitterのURLを載せようとしているのに、自分のブログのURLが混じってきます。
もちろん、このリンクへ行ってもエラーが出ます。

No title

最近ブログを始めて、リンクつけられたらいいなあ、と、のどから手の思いでいた時、中田さんのメルマガで紹介されてたこの記事を見ました。分かりやすく、面白く、HTML だけじゃなく、文の書き方の参考にもなります。でも私じゃ、こういう文体ってそもそも思いつかないけど。リンクさっそくトライしてみます。おおきに。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/245-edaa0eeb
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて