2007年03月23日

[HTML]ホームページ作成講座IMGタグ

さて、今までの知識でも十分魅力的なページが作れるようになりました。


・・・あれ?なんか忘れてないか?

俺が見てきたサイトはもっといろんな図形や表が使われてて華やかだったぞ?


ご心配なく、忘れていませんよ。今日はそんな図形を書くタグを紹介したいと思います。
(あ、書くといっても画像は予め用意しておいてくださいね


<IMG>

IMG要素は文章中の指定箇所に画像を埋め込みます。IMGタグのプロパティにsrc及びaltがあります。

src
というのはsourceのことで、つまり埋め込む画像の在り処をあらわします。

altというのはブラウザにおいて画像が表示されなかった場合に表示される代替文字列です。
またIEなどでは画像にマウスカーソルをのせてしばらくすると説明が表示されますが、これもこのaltプロパティで指定されている文字列が表示されています。

画像の在り処にはAタグの場合と同じくURLを指定することができます。

たとえば、ピピネラ座(もうお馴染みですね)へのバナー画像を文章中に貼る場合には、

<IMG src="http://file.pipp.cosa2.com/banner.png" alt="ピピネラのバナー">

のように書きます。

そうすると、この様に表示されます。

ピピネラのバナー

IEの人はマウスカーソルを画像にのせてみてください。ピピネラのバナーという文字列が表示されると思います。

一見このaltプロパティはいらないように思いますが、例えばファイルの在り処が間違っていて、ブラウザがうまく画像を表示できなかった場合にでも、

存在しない画像

この様にaltで指定した説明が表示され、とりあえず雰囲気は伝わります。(また世の中には画像を表示できないテキストブラウザというものもあります。)

また、IMGタグはBRタグと同じように終了タグをもたないタグです



ところで、

以前Aタグが出てきたときには説明していませんでしたが、AタグのhrefプロパティにもIMGのsrcプロパティにもファイルの在り処を示すための方法が二つあります。

絶対パス相対パスと呼ばれるものです。


どういうことかといいますと、

絶対パスとはどこに自分(この場合には上のタグを埋め込んだ文章)がいようともあるファイルを絶対に指すパス(パスは道筋だと考えてください。)のことで、現実にたとえると、住所みたいなものです。住所はたとえ自分がどこに住んでいようとも、日本国○○県××市□□町1-2-3のように指定すれば手紙は届きますよね。

インターネット上の話に限って言えば、URL(UniformResourceLocator)でもって指定することができます。上のピピネラのバナーはこの方法(バナーのURLはhttp://file.pipp.cosa2.com/banner.png)で指定しています。

あれ?URLってブラウザのURLバーに入れるやつだよね?

って思った人もいるでしょう。

その通りです。
では試しに上のURLをブラウザのURLバーに入れてみてください。バナーの画像が表示されると思います。この様にインターネット上にあるすべてのファイルはURL(住所)を持っているのです。


では、相対パスとは何でしょうか。自分(上と同じくタグを埋め込んだ文章)を起点とした相手ファイルの居場所を指す指定方法です。
ちょっと難しいでしょうか。現実にたとえると、例えばご近所さんとの会話で、「うちのとなりのとなりに新しいスーパーがオープンしたんだって」と言うとします。もしあなたの家を知っていれば、スーパーの住所を言ってないのに、相手にはきちんと新しくオープンしたスーパーの場所が伝わっていますよね。これがまさに自分を起点としたファイルの指定方法。つまり相対パスなのです。

インターネット上のファイルもあなたのパソコンの中身と同じようにフォルダごとにファイルが入っています。例えば、画像を埋め込みたいファイルとその画像ファイルが同じフォルダに入っているとすれば、相対パスでは

<IMG src="./gazou.jpg" alt="サンプル画像">

この様にファイル名の前に./(ドットとスラッシュ)をつけるようにします。この./は省略可能で、単純にファイル名だけを指定しても構いません。

もし画像ファイルがsyasinというフォルダ
(以前にも申しましたが、HTMLとは本来ワールドワイドつまり世界中のコンピュータで理解できなければなりません、よってフォルダ名やファイル名には出来るだけローマ字や英語名を使いましょう。文字コードの問題もあって日本語のフォルダ名が通じない場合があります。)
に入っているとすれば、./syasin/gazou.jpgのように./フォルダ名/ファイル名のように指定します。

また、もし画像ファイルが一個上のフォルダに入っているのならば、../gazou.jpgのように../ファイル名のように指定します。

もうお分かりかと思いますが、

./
今いるフォルダ
../一個上のフォルダ

を示しています。


では、じゃあ絶対パスと相対パス、一体どっちがいいんだ!?という疑問が沸いてくるでしょう。

どちらにもそれぞれの利点があります。たとえば、相対パスは上の./や../でも分かるように、あくまで近くのものを指し示しめすのに適しているので、例えば、四つ上のフォルダだと../../../../のようになりますし、一個上のフォルダに入っている別のフォルダにあるファイルを指し示したい場合にもややこしくてしかたありません。また、相対パスでは違う人のページにある文章やファイルを指し示すことはできません。こんなときには絶対パスを使いましょう。

逆に同じフォルダにある文章・画像ファイルを指し示すのにいちいちURLを打つのは面倒くさいでしょう。そんなときには相対パスをオススメします。

また違う観点から見ると、インターネット上にある画像ファイルは通常著作権があり、使用に十分配慮が必要なうえに画像のある場所へいちいちアクセスするため、所有者のサーバーへの負担も問題となることがあるため、許可をとった場合などの特殊な事情を除き、IMGタグでは相対パスを使うといいでしょう。もちろん自分の画像なら絶対パスをつかってもいいんですけどね。

あとは、好みの問題ですね。


あ、上でも言いましたが、インターネット上には直リン禁止と書いてあるものがあります。これはそのファイル(文章なり画像なり)に直接リンクを貼ったり、IMGタグで呼び出してはいけないということです。サーバーから禁止されている場合もありますので、Aタグ同様注意してあげてください。


表の書き方について書こうと思いましたが、またまた長くなりましたので、また今度にしましょう!
(こうして予定はどんどん延びていきます。
posted by ラリコ at 23:43 | Comment(0) | TrackBack(1) | 小技術
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

矢印アイコン(1)
Excerpt: 丸い矢印アイコンです。(15×15:背景透明
Weblog: 矢印アイコン(1)
Tracked: 2007-03-24 22:58

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。