| おたすけＨＴＭＬ入門 |
 |
1999/09/15(水)
第３回「デジタルカメラの画像を表示させよう」
今回は画像を用い、画像と文章を含んだ基本的なページ作りを紹介します。
■ブラウザ上に表示できる画像
gif(ジフ)
色数 ：256色
圧縮方式 ：画像の損失が起こらない可逆性の圧縮方式
使用画像 ：イラストや図形
gifアニメーション
gifファイルを複数枚重ね、簡易的な動画に見せたもの。
ファイルのサイズは、もちろん大きくなります。
表示は、その枚数分だけ繰り返し表示を行う。
jpeg(ジェイペグ)
色数 ：フルカラー
圧縮方式：画質的にあまり気にならない部分を省略しながら圧縮する方式。
使用画像：写真
■画像を準備する
自分で作る
・Windows標準のペイントで作成。
ビットマップ形式(*.BMP)を、ツールを使いGIF形式に変換。
・Photoshop等の、お絵描きソフトで作成する。
・スキャナやデジタルカメラで、画像を取り込む。
購入する
・本屋さんの、パソコンコーナーにあるホームページ素材集。
インターネットを使う
・フリーの素材を提供しているホームページから取得する。
[参考素材集]
私のホームページ（リンク集）のパソコン・素材集を参考にして見て下さい。
素材集のリンク集のサイトもあります。
http://www.ne.jp/asahi/sun/rise/link/pc.html#pc3
■ページのバックに画像を使う
前回の説明では、ある特定色でホームページのバックを指定しましたが、
パソコン画面の壁紙のように、ページ全体をある画像で埋めることもできます。
それを指定するタグが <BODY> 〜 </BODY> です。
[ファイル名：smp3.html]
<HTML>
<HEAD>
<TITLE>サンプル３</TITLE>
</HEAD>
<BODY BACKGROUND="back.gif" BGCOLOR="#00FFFF"
TEXT="#000000">
ページのバックに画像を使う
</BODY>
</HTML>
[タグの説明]
<BODY BACKGROUND="back.gif" >
~~~~~~~~
画像ファイル名
下記の様な、ディレクトリ(フォルダ)構成の場合に、
smp3.html で、back2.gif 〜 back4.gif の画像を使う場合。
+-- a/ +-- smp3.html
| +-- back.gif
| |
| +-- gazou/ +-- back2.gif
|
+-- back3.gif
|
+-- b/ +-- back4.gif
gazou という名前のディレクトリの中にある場合
<BODY BACKGROUND="gazou/back2.gif" >
ファイルがひとつ上のディレクトリにある場合
<BODY BACKGROUND="../back3.gif" >
ファイルがｂのディレクトリにある場合
<BODY BACKGROUND="../b/back4.gif" >
ファイルがふたつ上のディレクトリにある場合
<BODY BACKGROUND="../../***.gif" >
別ディレクトリの場合は、このようにしてファイルを指定します。
※下記の様にならないよう、注意して下さい。
・バックの画像で、部分的に文字が読めない箇所がでる。
・バックの画像で、文章全体が読みにくくなる。
■画像を表示させてみる
・gif / jpeg 画像を表示させる場合のタグ
<IMG SRC="photo.jpg"> で、photo.jpg が表示されます。
・画像のタイトルを入れる。富士山としてみる。
下記の場合、タイトルが表示されます。
(1)画像の上にカーソルを移動した時に表示される。
(2)画像を受信できなかった時に表示される。
<IMG SRC="photo.jpg" ALT="富士山">
~~~~~~~~~~~~
・画像の大きさを変更して表示。
元の画像を拡大・縮小・変形 表示させたい時に使用しますが、受信した画
像ファイルの容量の変化はありません。
<IMG> のタグで下記属性を使う。
WIDTH="X" 横幅 ピクセル数または％
HEIGHT="Y" 高さ ピクセル数または％
<IMG SRC="photo.jpg" WIDTH="70%" ALT="富士山">
ウインドウの大きさ（横幅）の70%の大きさとなる。
<IMG SRC="photo.jpg" WIDTH=200 ALT="富士山">
photo.jpg の横幅が 200 に調整される。
■画像に説明文をつける
・画像の側面(右 OR 左)に説明文を複数行記述する時
<IMG>タグの下記属性を使う。
ALIGN="left" 説明文の左に画像が入る。
ALIGN="right" 説明文の右に画像が入る。
・画像と説明文の間のスペースを調整する時
<IMG>タグの下記属性を使う。
HSPACE="n" 画像の左右にn分のスペースをあける。
VSPACE="n" 画像の上下にn分のスペースをあける。
サンプル４の表示結果。
+---------+ 説明文
| | あああああああああああああああ
| | あああ
| | いいいいいいいいい
| | ううううううううう
| |
| |
+---------+
画像の下に説明文が入る。
[ファイル名：smp4.html]
<HTML>
<HEAD>
<TITLE>サンプル４</TITLE>
</HEAD>
<BODY BACKGROUND="back.gif" BGCOLOR="#00FFFF"
TEXT="#000000">
<IMG SRC="photo.jpg" ALT="富士山" ALIGN="left" HSPACE="20"
VSPACE="10">
説明文<BR>
ああああああああああああああああ<BR>
いいいいいいいいい<BR>
ううううううううう<BR CLEAR="all">
画像の下に説明文が入る。<BR>
</BODY>
</HTML>
[タグの説明]
「あああ」の行は、ウインドウの右端まできたので自動改行されて
いることを意味します。
<BR CLEAR="all">で、画像の下に改行されます。
※注意
文章が長い場合は、下記のようになります。
+---------+ 説明文
| | あああああああああああああああ
| | あああ
| | いいいいいいいいい
| | うううううううううううう
+---------+ ええええええええええええ
おおおおおおおおおおおおおおお
かかかかかかか
別なタグと組み合わせて、下記のようにすることもできます。
(別の回で説明)
+---------+ 説明文
| | あああああああああああああああ
| | あああ
| | いいいいいいいいい
| | うううううううううううう
+---------+ ええええええええええええ
おおおおおおおおおおおおおおお
かかかかかかか
■見出し、文字サイズや色を部分的に変え、見やすくしよう。
ページ全体の文字の色は、<BODY TEXT="#XXXXXX" > で指定しま
すが、タイトルや部分的に目立たせたい場合は、色を変えることが
できます。また、文字サイズの変更、文字装飾も可能です。
・見出し行
<Hn>〜</Hn> 文字は太文字で、見出し行の前後に改行が入る。
n=1〜6 (H1が最大、H6が最小)
ALIGN 属性を使えば、表示位置指定も可能。
ALIGN="left" 左揃え
"right" 右揃え
"center" 中揃え
・フォントサイズと色
<FONT>〜</FONT> フォントの色や大きさを変更
SIZE 属性を使い、フォントの大きさを指定。
SIZE=n n=1〜7 (1が最小、7が最大)
SIZE="+1" や SIZE="-1" のように、
現在の大きさに対する相対値を指定することも可能。
COLOR 属性を使い、指定された範囲の文字の色を変更出来る。
COLOR="#XXXXXX" 第２回の BODY 参照。
・文字装飾
<B>〜</B> 太字(ボールド)フォント
<I>〜</I> 斜体(イタリック)フォント
<S>〜</S> 取消線付きフォント
<TT>〜</TT> 等幅フォント
<U>〜</U> 下線付きフォント
<BIG>〜</BIG> 大きめの文字
<SMALL>〜</SMALL> 小さめの文字
<EM>〜</EM> 強調
<STRONG>〜</STRONG> より強調
・段落
<P> タグで１行段落
<P>タグを、連続して何個並べても１行しか改行しません。
複数行改行したい時には<BR>を複数個並べて下さい。
・ライン
<HR> 横罫線を引く。
さらに下記属性を使うことにより、色々な罫線が引ける。
SIZE="X" X：線の太さ(ピクセル数)
WIDTH="X" X：線の長さ(ピクセル数 or ％)
ALIGN="left" ラインを左に寄せる。
ALIGN="center" ラインを中央に寄せる。
ALIGN="right" ラインを右に寄せる。
NOSHADE 影のない線となる。
COLOR="#XXXXXX" ラインの色指定(IEのみの機能)
上記で説明してきたタグを用い、年間行事のサンプルを作ってみます。
[ファイル名：smp5.html]
<HTML>
<HEAD>
<TITLE>サンプル５</TITLE>
</HEAD>
<BODY BACKGROUND="back.gif" BGCOLOR="#FFFFFF"TEXT="#000000">
<H1 ALIGN="center"><FONT COLOR="#0000FF"><U>年間行事</U></FONT></H1>
<HR WIDTH="20%" ALIGN="left" NOSHADE>
<FONT COLOR="#00FF00" SIZE="+2">１学期</FONT>
<HR WIDTH="20%" ALIGN="left" NOSHADE>
<H3>４月</H3>
１０日 入学式<BR>
<FONT COLOR="#FF0000">２９日 みどりの日</FONT><BR>
<HR>
<H3>７月</H3>
１９日 終業式<FONT SIZE="+1" COLOR="#FF0000">
(夏休み 7/20-8/31)</FONT><BR>
<HR>
</BODY>
</HTML>
■沢山の画像を表示させる場合の注意点
沢山の画像がある場合、完全に表示されるまでに時間がかかり過ぎると、見
に来た人を待たせることになります。ローカルパソコン上では気にならなくて
も、ネットワーク経由では遅くなることを考慮しなければなりません。
そんな時には、下記のようにしましょう。
・関連する画像を１ページに入れ、複数ページに分ける。
・全画像ファイル分の、縮小した小さなファイルサイズの画像を別に準備し、
ページには、その小さな画像を表示させる。
そして、その画像をクリックすると、本来の画像を別ページ、または、
別ウィンドウに出す。
■次回
第４回 「ページをリンクさせよう」
メニューごとに作成したページをリンクさせたり、別のホームページと
リンクさせてみましょう。
第５回 「とにかくホームページを公開しよう」
第２回〜第４回の内容で、とにかくホームページと呼べそうなものが、
できますので、実際に公開して見ましょう。
