画像の表示に関するプログラム
*********************************************************
このページでは、画像表示に関して、知っているとちょっと便利なHTMLタグをご紹介します。

■　索引　■
・注意
・画像表示方法の基本
・当ページ内でのHTML記述例について
・画像を表示させる
・画像をスクロールさせる

■　注意　■
・インターネット上で絵や文字を表示させる際、簡単で基本的なものが「HTML」というプログラミング言語です。
当サイトはホームページの作り方を扱うものではないので、基本的な話や詳しい解説は一切いたしません。
詳しく勉強したい方は、それを目的としたサイトが沢山ありますので、そちらをご参照ください。

・当ページで紹介した内容に間違いを見つけられた方は、掲示板にてご連絡下さい。訂正させていただきます。
・HTMLにはバージョンがあり、対応ブラウザがあります。当ページではHTML4.01を紹介しておりますが、ブラウザによっては表示されない場合があることをご了承下さい。
・当ページで紹介した内容よって生じたいかなる事故・諸問題について、当方は一切の責任を負いかねますので、了解の上でご利用下さい。

■　画像表示方法の基本　■
○　HTMLの記述は、必ず半角英数で行って下さい。大文字、小文字のどちらでもOKです。
○　HTMLで画像を表示させるためには、画像ファイルの置いてある位置を正確に記述する必要があります。
　　この記述方法には、「絶対パス」と「相対パス」の２通りの方法があります。

◆　絶対パス
画像の置き場所の「絶対的」な位置を記述する方法で、「http://」で始まります。 画像そのものをインターネット上でブラウザ表示させた時に、アドレスに表示されるものと同じです。 画像を表示させたいページの位置が変わっても影響はありませんが、画像の置き場所が変わると、記述の書き換えが必要となります。
主に他のサイトにある画像などを指定する時に使います。

例：http://kazukir.web.fc2.com/sample.gif

◆　相対パス
ファイル同士の位置を、基準とするファイルから見てどこにあるか「相対的」に記述する方法です。 画像を表示させたいページと画像置き場の位置関係によって記述の方法が変わります。
主に自分のホームページ内で使用します。

同じフォルダ内にあるファイルを指定する場合

例：sample.gif

それ以外の場所に画像を置いている場合については説明を省きます。

■　当ページ内でのHTML記述例について　■
○　基本となるタグの表記について
任意の画像や数字に置き換え可能なものを★や☆と表記します。

○　サンプル画像について
説明に使う為のサンプル画像を、こちらで用意いたしました。
以下に説明してゆく全てのHTMLの記述例では、画像の位置は全て絶対パスを使用します。
よって、記述例をコピーして、表示させたいページに貼り付けるだけで、動作確認していただけます。
後は画像ファイル名を、ご自分の使用したいものに書き換えるだけでOKです。
画像ファイル名を、絶対パスと相対パスのどちらで指定するかは、各々でご判断下さい。

サンプル画像の絶対パスは
http://kazukir.web.fc2.com/sample1.gif
です。
※サンプル画像は変更する場合があります。

■　画像を表示させる　■
<img src="★">

★の部分に好きな画像の絶対パスまたは相対パスを指定すると、その画像が表示されます。

記述例：
<img src="http://kazukir.web.fc2.com/sample1.gif">
表示例：


■　画像をスクロールさせる　■
基本タグ：<marquee>★</marquee>

★の部分を文字や画像に置き換えることで、それらが画面右から左へ流れてゆきます。
★の部分に動画を入れることで、画像が歩いたり走ったりしているように見せる事ができます。

記述例：
<marquee><img src="http://kazukir.web.fc2.com/sample1.gif"></marquee>
表示例：


◆応用編
基本のタグに属性の追加の記述を行うことで、スクロールの方法を細かく指定できます。
以下の通り基本タグの◇の部分に追記してゆくことで指定可能となります。
複数指定可能です。複数の属性を指定する場合は、半角スペースを入れて並べて記述して下さい。
<marquee ◇ ◇ ◇>★</marquee>

◇スクロールの速度を指定する
scrollamount="☆"

☆の部分に任意の数字を入れます。 この表示をしない場合、6が標準となっています。
この数字が大きいと速く、小さいと遅くスクロールしているように見えます。

記述例１（遅くする）：
<marquee scrollamount="3"><img src="http://kazukir.web.fc2.com/sample1.gif"></marquee>
表示例：


記述例２（速くする）：
<marquee scrollamount="9"><img src="http://kazukir.web.fc2.com/sample1.gif"></marquee>
表示例：


◇スクロールの方向を指定する
direction="right"

指定なしでは右から左へスクロールしますが、この属性を追記することで左から右へスクロールします。

記述例：
<marquee direction="right"><img src="http://kazukir.web.fc2.com/sample1.gif"></marquee>
表示例：