HTML index
ホームページ作成ガイド

ステップアップ＆テクニック - ホームページ作成ガイド
HTML&CSS Web制作リファレンス
-ホームページ作成を学ぶ・調べる-

< HOME / ホームページ作成ガイド / タイトル画像を作成してみる（GIF）
タイトル画像を作成してみる（GIF）
新規にページを作成して、そのページにタイトル画像を表示させてみます。

今回使用するソフトは、メモ帳、ペイント、ブラウザ（インターネットエクスプローラ）です。

※Windows98の環境で説明しますので、ご自分の環境に読み替えてご覧ください。
　新規にページを作成する
まず、次の内容をコピーして、新規に立ち上げた「メモ帳」に貼り付けてください。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>サンプル</TITLE>
</HEAD>
<BODY>

サンプルページです

</BODY>
</HTML>

貼り付けが完了したら、このファイルを保存します。ここではファイル名を sample.html としておきましょう。保存場所は、「ページを作成してみる」で作成した index.html と同じフォルダを指定してください。

※ページの作成方法は、「ページを作成してみる」を参考にしてください。

image

保存が完了したら、同じフォルダ内に index.html と sample.html が入っていることを確認してください。

続いて、ブラウザで表示確認を行います。sample.html を開いて、「サンプルページです」という文字が表示されることを確認してください。ちゃんと表示されていればOKです。

　タイトル画像を作成する
次に、タイトル画像を作成してみます。今回は練習なので、気軽に簡単なものを描いてみましょう。

まず、「ペイント」を立ち上げてください。

image

立ち上げたら、上記のように右下の角をドラッグして、白い領域のサイズを 300×100 に変更してください。領域のサイズは、「ペイント」の右下あたりに表示されています。

image

次に、この白い領域の中に何か描いてみましょう。文字でもいいですし、イラストを描いてみるのもいいかもしれません。

描き終わったら、この画像をGIF形式で保存します。保存場所は、ここでは sample.html と同じフォルダを指定することにします。

image

「ペイント」のメニューで「ファイル」→「名前を付けて保存」をクリックします。表示されたダイアログボックス内で、sample.html が保存されているフォルダを開きます。

「ファイルの種類」が「ビットマップ」になっていると思いますので、これを「GIF形式」に変更します。続いて「ファイル名」の入力欄に、

title.gif

と入力して、「保存」ボタンをクリックします。「カラー情報が失われます」というメッセージが表示されるかもしれませんが、とりあえずここでは「OK」をクリックして進んでください。

image

保存が完了したら、同じフォルダ内に title.gif が入っていることを確認してください。ちゃんと入っていれば、タイトル画像の作成は完了です。

　タイトル画像をページ内に表示する
それでは、先ほど作成したページ（sample.html） にタイトル画像（title.gif）を表示させてみましょう。

「メモ帳」で sample.html を開いてください。このファイルのソースを見ると、

サンプルページです

上記のように書かれた1行がありますので、この部分を消して次の1行を記述してください。

<IMG SRC="title.gif" ALT="テスト" WIDTH="300" HEIGHT="100">

画像を表示させるときは、このIMGタグを使用します。それぞれの値の意味は、次のようになります。

title.gif … 画像のファイル名
テスト … 代替えテキスト
300 … 画像の横のサイズ
100 … 画像の縦のサイズ

※IMGタグについての詳細は、「イメージタグ」カテゴリーをご覧ください。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>サンプル</TITLE>
</HEAD>
<BODY>

<IMG SRC="title.gif" ALT="テスト" WIDTH="300" HEIGHT="100">

</BODY>
</HTML>

上記のように記述したら、このファイルを上書き保存した上で、ブラウザで表示確認を行ってください。

タイトル画像がちゃんと表示されていれば、この作業は完了です。


※もしも次のような感じで表示されていたら、どこかにミスがあります。

image

このように「×」などが表示されてしまった場合は、画像の保存場所は間違ってないか、IMGタグの画像へのパスは間違ってないか、画像を保存するときに「GIF形式」を選択したか、などを確認してください。

　参考
ホームページで使用する画像の形式は、主に「GIF形式」と「JPEG形式」になります。

GIF形式 … 256色まで表示可能
JPEG形式 … 1670万色まで表示可能

イラストやアイコンなどは「GIF形式」、写真などは「JPEG形式」、という使い分けが一般的です。

今回「ペイント」で作成したタイトル画像は、色数も少なく単調な画像になっていると思います。このようなタイプの画像の場合には「GIF形式」を使用しましょう。

※画像に適した形式を選ばないと、画質が悪くなったりデータ量が大きくなってしまう場合があります。
※今回使用した「ペイント」は、簡単な機能しか付いていません。そのため、画像を「GIF形式」で保存する際（減色する際）に、画像の色が若干変わってしまう場合があります。（ちゃんとしたソフトを使用すれば、きれいな状態のまま減色することができます）

ホームページ作成ガイドTOP

HTMLタグ｜スタイルシート｜JavaScript｜Webツール｜カラーチャート｜テンプレート｜
< HOME PageTop▲

inserted by FC2 system