|
|
||||||
 |
|||||||
|
|||||||
| < HOME / ホームページ作成ガイド / 写真を表示してみる（JPEG） |
|
|
|
|
|
|
|
|
| 写真を取り込む |
|
まずは、写真をパソコンに取り込まなければなりません。
プリントされた写真の場合は、スキャナとソフトを使用して読み取ることになります。デジタルカメラで撮った写真の場合は、ケーブルで繋いで直接取り込んだり、いったんメモリーカードなどに保存してから取り込むことになります。 ※パソコンへの取り込み方法につきましては、スキャナやデジタルカメラの説明書をお読みください…。 次に、取り込んだ写真の画像形式を変換します。ホームページに掲載する写真の場合は、一般的にはJPEG形式を使用します。 取り込んだ写真が最初からJPEG形式になっている場合は、そのまま使用することができます。別の画像形式で保存されている場合は、ソフトを使ってJPEG形式に変換しておきます。 ●画像形式の変換方法 「ペイント」で読み取れる画像形式の場合 まず、取り込んだ写真を「ペイント」で開きます。写真を開いたら、「ペイント」のメニューで「ファイル」→「名前を付けて保存」をクリックしてください。表示されたダイアログボックス内で、「ファイルの種類」を「JPEG形式」に変更し、「保存」ボタンをクリックします。 「ペイント」で読み取れない画像形式の場合 「ペイント」で開くことができない形式の場合は、別の画像編集ソフトを探さなければなりません。スキャナ、またはデジタルカメラにソフトが付属している場合は、その中に画像編集ソフトがないかどうかを確認してください。もし見当たらない場合は、パソコンの中を捜してみましょう。もしかすると画像編集ソフトがインストールされているかもしれません。 ソフトが見つかったら、そのソフトで「ペイント」のときと同じような作業を行ってみてください。 ※もしこれでもダメな場合は、ちゃんとした画像編集ソフトを用意した上で作業を行ってください。 |
| 写真の大きさを調節する |
|
次に、写真の大きさを変更してみましょう。
※一般的に、大きすぎる写真は閲覧者に嫌がられます（表示に時間がかかってしまうため）。ホームページに写真を掲載するときは、適切なサイズに調節しておくことをオススメします。 まず、先ほど取り込んだ写真を「ペイント」で開いてください。 ※取り込んだ場所（保存した場所）に目的のファイルが見当たらない場合は、ファイルを開く際に表示されるダイアログボックス内で、「ファイルの種類」を「すべてのファイル」に変更してみてください。
「ペイント」のメニューで「変形」→「伸縮と傾き」をクリックすると、上記のようなダイアログボックスが表示されます。 「伸縮」の「水平方向」と「垂直方向」に同じ数値を入力して、「OK」ボタンを押します。例えばここに「50」という数値を入力していれば、縦横ともに50%に縮小されることになります。 大きさの変更が完了したら、この画像の大きさを調べておきます。
「ペイント」のメニューで「変形」→「キャンバスの色とサイズ」をクリックすると、上記のようなダイアログボックスが表示されます。 「幅」と「高さ」の数値をメモしておいてください（この例では190×140）。単位はピクセルです。 以上の作業が完了したら、この画像を sample.html と同じフォルダに保存します。
「ペイント」のメニューで「ファイル」→「名前を付けて保存」をクリックします。表示されたダイアログボックス 内で、sample.html が保存されているフォルダを開きます。 「ファイルの種類」が「JPEG形式」になっていることを確認し、「ファイル名」の入力欄に、 photo.jpg と入力して、「保存」ボタンをクリックします。
保存が完了したら、同じフォルダ内に photo.jpg が入っていることを確認してください。ちゃんと入っていれば、写真の作成は完了です。 |
| 写真をページ内に表示する |
|
それでは、ページ（sample.html） に写真（photo.jpg）を表示させてみましょう。
「メモ帳」で sample.html を開いてください。このファイルのソースを見ると、 <IMG SRC="title.gif" ALT="テスト" WIDTH="300" HEIGHT="100"> 上記のように書かれた1行がありますので、この下にBRタグ（改行）を入れた上で、次の1行を記述してください。
画像を表示させるときは、このIMGタグを使用します。それぞれの値の意味は、次のようになります。 photo.jpg … 画像のファイル名 テスト … 代替えテキスト 190 … 画像の横のサイズ 140 … 画像の縦のサイズ ※画像のサイズは適切な数値に書き換えてください。 ※IMGタグについての詳細は、「イメージタグ」カテゴリーをご覧ください。
上記のように記述したら、このファイルを上書き保存した上で、ブラウザで表示確認を行ってください。 タイトル画像の下に写真が表示されていれば、この作業は完了です。 ※もしも次のような感じで表示されていたら、どこかにミスがあります。
このように「×」などが表示されてしまった場合は、画像の保存場所は間違ってないか、IMGタグの画像へのパスは間違ってないか、画像を保存するときに「JPEG形式」を選択したか、などを確認してください。 |
| 参考 |
|
ホームページで使用する画像の形式は、主に「GIF形式」と「JPEG形式」になります。
GIF形式 … 256色まで表示可能 JPEG形式 … 1670万色まで表示可能 イラストやアイコンなどは「GIF形式」、写真などは「JPEG形式」、という使い分けが一般的です。 ※画像に適した形式を選ばないと、画質が悪くなったりデータ量が大きくなってしまう場合があります。 ※「JPEG形式」の画像は、ちゃんとしたソフトを使用すれば圧縮率を変更することができます。圧縮率を高めることによりデータ量を減らすことができますが、その分画質は劣化してしまいます。（残念ながら、Win98に付属の「ペイント」では圧縮率を変更することができませんでした） |
|
|
|
|
|
|
|
| < HOME | PageTop▲ |
ホスティング by FC2サーバー
- ホームページ作成を支援する HTMLインデックス Webサイト -
初心者向け講座、情報交換、支援ツール等、Web制作を幅広く学習できるサイトです
制作・運営： Web制作サービスのWEVEX SITE DESIGN SERVICE.
Copyright (C) 1997-2009 HTML index. All Rights Reserved.
- WEVEX 愛T SOLUTION 2009 REGISTED. -