| Lesson：3 画像を入れてみよう | ||
|
|
||
| ホームページで使える画像 | ||
| もうご存知だとは思いますが、ホームページには写真や絵などの画像を表示することが出来ます。 綺麗な写真やCG、アニメーション…目を引く華やかなページはとても魅力的ですよね？ ここでは、ホームページに画像を表示させる方法を解説します。 インターネットで使用できる画像ファイルの形式は JPEG（ジェイペグ）形式、GIF（ジフ）形式の二種類です。
Windowsで使われるBMP（ビットマップ）形式の画像ファイルは、インターネットでは使用できません。 ●JPEG形式、GIF形式それぞれに特性があります。用途に合った形式を使用しましょう● 「JPEG（Joint Photographic Experts Group）」 1667万色以上の色を含める事が出来ます。色数に制限がありません。 圧縮率を高めると、画像が劣化してしまいます。 色数の多い画像…写真や色数の多いCG等に使われます。 「GIF(Graphics Interchange Format)」 色数は256色しか使えませんが、圧縮しても画像は劣化しません。 代わりに、背景を透明にしたり、簡単なアニメーション（GIFアニメ）を作る事が出来ます。 色数の少ない画像…単純なイラスト等に使われます。 |
||
| 画像を入れる | ||
| <IMG SRC="ファイル名"> | ||
| 画像を表示するには<IMG SRC="〜">（イメージソース）を使用します。 " "の間には、表示させたい画像ファイル名を入れます。 記入例
ブラウザではこうなります。
画像を表示させるには、少し注意すべき点があります。 ここでは、画像を準備する所から順番に手順をご紹介します。 一緒にやってみましょう！ |
||
| ●画像ファイルを表示させる手順● | ||
以下の画像・「sample.gif」を貼り付ける場合で説明します。  [sample.gif]１：画像を保存する ２・ショートカットメニュー（左図参照）の「名前を付けて保存」をクリックします。 | ||
|
３・「画像の保存」が出てきます。 |
||
 例えば、絵を貼り付けたいHTMLファイル「homepage.html」が「Lesson」という名前のフォルダに 保存してある場合は、このフォルダ「Lesson」に画像ファイル「sample.gif」を保存します。 HTMLファイルと使用する画像ファイルは、必ず同じフォルダ内に保存して下さい。 違う場所に画像ファイルを保存してしまうと、画像がホームページ上に出てきません。 ２：タグを打ち込む 次に、HTMLファイルを作って、タグを打ち込みます。 sample.gifを表示させたいので、タグは<IMG SRC="sample.gif">と書き込みます。 出来たら、ブラウザで確認してみましょう。 記入例
ブラウザではこうなります。
参考：画像が表示されない場合は…  失敗してしまった場合。 このように、画像が表示される筈の場所に 「×」マークが出てきます。 原因は 上でも解説したように、同フォルダ内に画像ファイル が保存されていない。 又は、タグの打ち間違い、ファイル名の間違い、 等が考えられます。 よく見直してみましょう。 |
||
| ●画像のダウンロード方法● | ||
| インターネットから、画像をダウンロードする方法は以下の手順です。 （ダウンロードとは、通信回線を利用して自分のパソコンにデータ-を転送する事です） １・保存したい画像の上で「右クリック」します。 ２・ショートカットメニュー内の「名前を付けて画像を保存」をクリックします。 ３・「画像の保存」ダイアログボックスが出てきます。保存する場所を確認してから 「保存」をクリックします。 ●注意！● 「著作権」には十分に配慮して下さい！！ インターネット上で公開されている画像は、音楽や書籍と同じように製作者に著作権が存在します。 「フリー素材」と明記されている画像以外の画像を、無断でダウンロード（パソコンに保存する事）して 不正に使用した場合は著作権の侵害行為として、著作権法に基づいた処罰を課せられる可能性があります。 画像をダウンロードする場合は、必ず作者の了解を得ましょう。 「フリー素材」の画像の場合も、必ず製作者の決めた約束、「使用許諾」や「注意書き」がある筈です。 必ず目を通しましょう。 一生懸命作ったイラストや写真を、知らない誰かが何の断りも無しに勝手に使ったら、悲しいですよね？ ここまでのレッスンで、ホームページを作る苦労や楽しさを知っている皆さんなら、わかりますよね？ エチケットを守って、インターネットを楽しみましょう。 |
まず、使う画像をダウンロードします。
| 画像に枠線を付ける | ||||
| <IMG SRC="ファイル名" BORDER="〜"> 画像に枠線を付ける場合は<BORDER>（ボーダー）属性を付けます。 属性値には任意の枠線の太さを入力します。 属性を複数付ける時は 半角スペースを入れる。（BORDER="〜"の B の前などに入れる） 記入例
ブラウザではこうなります。
|
||||
| 画像と文章を並べる | ||||
| （画像を左に寄せる）<IMG SRC="ファイル名"
ALIGN="left"> （画像を右に寄せる）<IMG SRC="ファイル名" ALIGN="right"> 画像と複数行の文章を並べると、通常文章は最初の一行だけが画像横の下側に付き 次の行は画像下に入り込んでしまいます。 記入例
ブラウザではこうなります。
画像の横に、複数行の文章を表示させたい場合は、<IMG SRC="ファイル名" >に <ALIGN="〜">属性を使用します。 記入例
ブラウザではこうなります
|
||||
| （文章を上に）<IMG SRC="ファイル名"
ALIGN="top"> （文章を中央）<IMG SRC="ファイル名" ALIGN="middle"> （文章を下に）<IMG SRC="ファイル名" ALIGN="bottom"> 画像と文章を並べると、通常文章は画像の下側に揃えて表示されます。 <ALIGN>（アライン）属性を付けると、上・中央・下に画像を移動する事ができます。 記入例
ブラウザではこうなります
|
||||
| Lesson3：まとめ | ||||
|
画像は基本的に文章（テキスト）と同じ扱いをします。 改行や位置の指定は、テキストと同じタグを使用できます。（Lesson2-2を参照） 記入例
ブラウザではこうなります
|
||||
| 練習問題（２） | ||||
| 全てのLessonが終わったら、早速練習問題を解いてみましょう！ 練習問題（２）へ！ |
||||
