初級篇★ページ作りの基礎知識1. HTMLを書いてみよう

VOL1.HTMLを見てみよう ★ 基本のタグ2 .. 画像とリンク

画像とリンクに関する指定で、最もよく使われるタグを集めてみました。作成ソフトで書かれたHTMLを見てみると、これらは殆どのページに必ずあるタグです。HTMLを編集する時のために、各タグの働きを理解しておきましょう。

>> 画像ファイル名指定、リンク先設定する時の、「パス」の指定方法についてはこちら をご参照下さい。

★画像★

<img src="画像ファイル名"> ...画像を表示

<img src="画像ファイル名" width="幅" height="高さ"> ...画像のサイズを指定。

※単位はピクセルor パーセント。パーセントの場合のみ数値に%を付けて書き込みます。指定しなければ、画像の元々のサイズで表示されます。ただし、ここで画像の大きさを縮小、拡大しても表示の大きさが変わるだけで、元々の画像のサイズは変わりません。従って、画像のダウンロードにかかる時間も同じです。

>> 詳しくは「画像サイズを画面上で縮小しても実際のサイズは小さくならない」 をご参照下さい。

<img src="画像ファイル名" alt="代替テキスト">...画像表示部分にマウスでポイントした時に、テキストを表示。

※但し、長文のテキストを入力した場合、IEでは改行されて表示されますが、Netscapeでは改行されませんので、長さには注意が必要です。下の画像をマウスでポイントして数秒待つと、テキストが表示されます。どのようになるか、ご確認下さい。

ex. <img src="ayapoo/o91_18.jpg" alt="大きいハーボットと小さいハーボット">

<img src="画像ファイル名" border="枠線の太さ">... 単位はピクセルで、色指定は出来ません。

ex. <img src="ayapoo/o91_18.jpg" border="10">

<img src="画像ファイル名"  vspace="数値" hspace="数値">...画像の周囲に指定したスペースを空けます。

※単位はピクセルで、画像に回り込みを指定した時に、回りにスペースが欲しい時使います。

>> 詳しくは「画像はこうするとキレイに配置できる」 をご参照下さい。

<img src="画像ファイル名"  align="top (middle, bottom)">... 画像に回り込みを指定しない時、横にくるテキストの位置を指定します。

<img src="habo.jpg" align="top">

大きいハボと小さいハボ

<img src="habo.jpg" align="middle">

大きいハボと小さいハボ　

<img src="habo.jpg" align="bottom">

大きいハボと小さいハボ

<img src="画像ファイル名"  align="left (right)">...画像に対するテキストの回り込みを指定します。

<br clear="all (left, right)">...回り込みを解除し、ここから下のテキストを画像の下に表示します。

・all　...　右左どちらに指定してあっても解除されます。

・left ...　左の回り込みを指定した時の解除に用います。

・right ... 右の回り込みを指定した時の解除に用います。

ex. <img src="habo.jpg" align="left" vspace="20" hspace="30">と<br clear="left">を用いた場合

※top, middle, bottom で指定した場合は、画像の横には一行しかテキストが表示されませんが、left, rightで指定するとこのように画像の横にテキストが回りこんで何行でも表示出来ます。

しかし、レイアウトの都合上、画像の横に空白がまだあっても、その下にテキストを降ろしたい場合があります。そこで、スクリプト上でここに<br clear="left">を挿入すると、

そこから下は　こうして画像の下に表示されるようになります。

>> 詳しくは「画像はこうするとキレイに配置できる」 をご参照下さい。

★リンク★

<a href="リンク先URL">　</a>...リンクを設定します。

※指定方法は「相対パス」と「絶対パス」があります。パスについてはこちらをご参照下さい。

<a name="任意の名前">　</a>...ページ内で特定の位置にジャンプさせたい時、ジャンプ先を設定します。これはFront Page では「ブックマーク」と呼ばれる設定で、このタグでマークされた部分をリンク先として指定すると、同一ページ内からでも、他のページからでも、ジャンプして来た時に自動的にその部分がブラウザに表示されます。

※「任意の名前」は適当に付けてかまいません。画像でもテキストでも設定できますが、長いテキストの場合は、ジャンプしたい部分の冒頭やタイトルに付けると良いでしょう。ジャンプ先になるテキストもしくは画像部分のスクリプトを、このタグで挟みます。以下は実際にこのサイトで設定されている特定のジャンプ先ですが、

ex.<a name="★フォント★">★フォント★</a>

このような設定がされている部分に、例えばこのページからリンクしたいとすると、以下のように、このブックマークがあるページへのパスの後に、#を付けてから、設定してある任意の名前を書き込みます。

<a href="homepage_primary1_1_tag1.htm#★フォント★">こちらからご確認下さい。</a> 

※どのようになるかは、実際にこちらからご確認下さい。

なお、この指定はページが下に長い時など、同一ページ内のジャンプ先指定としてもよく使われます。その場合は、ジャンプ先に任意の名前を付けて設定した後、ジャンプ元で以下のように#から後のみを記述してリンク指定すればOKです。

ex. <a href="#Page Top">Page Top<a>

※どのようになるかは、この Page Top をクリックしてみて下さい。