カレンダー

2021年12月
« 8月    
 1234
567891011
12131415161718
19202122232425
262728293031  

カテゴリー

お気に入りドラマ紹介

ツイッターリスト

サイト内検索

ランキング参加中

にほんブログ村 テレビブログ 海外ドラマへ
にほんブログ村

ブログ王ランキング

人気ブログランキングへ

月別アーカイブ

相互リンク

相互リンク集

QR CODE

携帯用ブログのQRコード

☆ お知らせ ☆

URLが変更になったので、Google等からお越し頂いた場合、意図したページが開かない事も多いと思います。その場合はお手数ですが左メニューにある「サイト内検索」をご利用ください。

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の基礎を知っていると、ソフトに頼りっきりではなく
ソフトを便利な道具として使うことが出来ると思います☆

web拍手

コメントの投稿

コメント本文


ページ上部へ