HTMLを知ろう！その7
2010年7月23日
今回は、HTMLならではの機能、「リンク」についてです。
今見ているページから他のページに移動する。
これぞWEBの醍醐味です。
ここでも、画像の時にご説明した、「相対パス」の知識が生きてきますので
まだ読んでいない方はそちらから読んでみてくださいね♪
■Aタグ
リンクをするためのタグは、基本的に「A」タグです。
<a href=”page02.html”>リンク</a>
のように書きます。
画像の時に、ファイルの指定をするのは「src」って書いてあったのに
<a src=”page02.html”>
じゃないの？？
って思う方もいらっしゃるかもしれません。
難しく説明すると一応理由はあるのですが
まぁ、こう書くと言うルールなのでね。。
こう覚えちゃってください。
hrefは「えいちれふ」とか「はーふ」とか読みます。
文字をクリックすると別のページに行くようにしたい
と言う場合、そのクリックさせたい文字をaタグで挟みます。
<a href=”page02.html”>続きはこちら</a>
とか
<a href=”page02.html”>リンク</a>
と言う感じで。
それでは、一番最初のサンプル（sirou02.html）へのリンクを設定してみます。
このブログの場合、samplesフォルダの中に入れていますので
「相対パス」を使って
<a href=”samples/sirou02.html”>一番最初のサンプル</a>
と言う感じで書きます。
↓実際のリンク
>> 一番最初のサンプル
■画像にリンクする
文字をクリックすると、画像が開く
と言う風にしたい場合、画像だけが載っているhtmlページにリンクするのが
見た目には美しいのですが、画像を直接開いちゃうこともできます。
↓こんな感じで。
>> 近所の猫
このブログでは、samplesフォルダの中にimgフォルダを作って画像を入れているので
<a href=”samples/img/neko.jpg”>近所の猫</a>
と書きます。
これで、「近所の猫」をクリックすると、猫の写真が開くことになります。
■画像をクリックして、別のページを開く
文字ではなく、ボタン風の画像をクリックすると
別のページに移動する、と言う方法は↓こんな感じです。
ボタンをクリックすると、お好み焼きのページに移動します。
書き方はいたって簡単。文字部分が画像になるだけです。
<a href=”samples/sirou05-4.html”><img src=”samples/img/btn01.gif” alt=”ボタン” width=”100″ height=”30″></a>
でも、ちょっと待った～～
ボタンが青い線で囲まれちゃってませんか？
このサイトは、青い線が出ないように設定してあるので大丈夫なのですが
ソースを真似しただけの段階では、青い線が出ちゃうと思います。
これは、リンクの時の文字の色が、画像の枠として表示されるためです。
ここにリンクがありますよ。と言う証しなんですが、見た目にはちょっと・・・
と言う感じですよね。
本来はCSSで指定するんですが、ここでは、とりあえず画像におまけ設定を追加します。
borderと言うのが、線について設定するためのおまけなので
border=”0″
線はいらないよ、と言う指定を追加します。
そうすると↓こんな感じ。
<a href=”sample/sirou05-4.html”><img src=”img/btn01.gif” alt=”ボタン” width=”100″ height=”30″ border=”0″></a>
ちょっと長くなった分、わかりにくくはなりましたが
これで画像を使ってリンクを設置することが出来ました。
これらを使ったサンプルはこちら。
>> サンプル
だいぶホームページらしさが出てきましたね！
■小さな画像をクリックすると大きな画像を開く
例えば、正方形100px×100pxの猫の写真があって
それをクリックすると、400px×300pxの大きめな画像が開くようになってるサイトを
見かけますよね。
今の流れで考えたら、簡単なのですが、案外つまずくポイントで
私もHTMLを勉強しはじめたばかりのころ、謎！と思う動作のひとつでした。
実際には、上のボタンと同じ要領でやればOKなのです。
画像を縮小して表示しておき、もとのファイルにリンクする場合は
↓こんな感じ。
書き方としてはこうなります。
元のファイルの横幅400pxですが、120pxに縮小して表示しておき
クリックすると元のファイルが開くので、拡大したような感じに見える
と言うだけのことなんです。
<a href=”sample/img/neko.jpg”><img src=”sample/img/neko.jpg” alt=”猫” width=”120″ border=”0″></a>
もっときちんとした感じで表示させたいなら、
小さい画像を別に用意しておき、元の画像へも直接リンクするのではなく
画像が貼ってあるページにリンクするようにすると良いです。
>> サンプル
※このサンプルは、CSSを使って色などを指定しています。
■別のウインドウで開きたい
このページでは、サンプルページを開く際、別のウインドウが開いて
内容が表示されていると思いますが
ソースをまねしただけの状態だと、今開いているページが切り替わって
大きな画像が出てきたりしていると思います。
通常は、どんどんウインドウが開くと邪魔になるので
そのままページが切り替わった方が良いのですが
サンプルページとか、他のサイトへのリンクなどを設定した時に
今のページはそのまま開いておいて、リンク先を別のウインドウで開きたい
と言うことがあると思います。
そういう時はAタグに、「target」と言うおまけをつけます。
「 target=”_blank”」と指定すると、別のウインドウで開きなさい、と言う指示なので
↓こんな感じで書きます。
<a href=”sample/img/neko.jpg” target=”_blank”><img src=”sample/img/neko.jpg” alt=”猫” width=”120″ border=”0″></a>
他にも「target=”sample”」のように文字を指定することもできます。
こうすると、sampleと言うウインドウに開きなさいと言う指定になるので
もし、先に同じように設定してあったリンクを開いていたら
そこのページが切り替わります。
このページでは、サンプルページは別ウインドウにしたいけど
どんどんウインドウが増えないように、サンプルを開く時はsampleウインドウに開くようにしてあります。
と言うことで、これでHTMLの基礎編が終わりです！
文字ばかりで読みにくかったと思いますが
この全7回分を覚えたら、とりあえずはシンプルながらもHTMLのページが作れてしまうので、興味がある方は是非トライしてみてくださいね♪
今は良いホームページ作成ソフトが存在するので
手打ちする人は少ないですが、
HTMLの基礎を知っていると、ソフトに頼りっきりではなく
ソフトを便利な道具として使うことが出来ると思います☆
