トップページ > 初心者向けホームページ作成講座 > 画像にオプションを付ける/画像の種類
画像にオプションを付ける/画像の種類
spacer
画像情報を埋め込む
書式：<IMG src="画像ファイルのパス" alt="画像情報など">
画像情報を追加するにはalt属性を使用します。altを指定すると、マウスポインタを画像に移動させたときに画像の
情報が表示され、リンク切れの時は情報が表示されます。
（何も記入しない場合は「*」を入れておきましょう。）
記述例
<HTML>
<HEAD>
<TITLE>画像情報を埋め込む</TITLE>
</HEAD>
<BODY>
↓画像にポインタを重ねると文字が表示（一部ブラウザでは表示されません）。<BR>
<img src="image01.jpg" alt="サイ"><BR><BR>
↓リンク切れ画像の場合、alt指定した文字が表示。<BR>
<img src="image1.jpg" alt="サイ">
</BODY>
</HTML>
<HEAD>
<TITLE>画像情報を埋め込む</TITLE>
</HEAD>
<BODY>
↓画像にポインタを重ねると文字が表示（一部ブラウザでは表示されません）。<BR>
<img src="image01.jpg" alt="サイ"><BR><BR>
↓リンク切れ画像の場合、alt指定した文字が表示。<BR>
<img src="image1.jpg" alt="サイ">
</BODY>
</HTML>
ブラウザでプレビュー
↓画像にポインタを重ねると文字が表示（一部ブラウザでは表示されません）。
↓リンク切れ画像の場合、alt指定した文字が表示。
↓リンク切れ画像の場合、alt指定した文字が表示。
spacer
画像のサイズを変更
書式
<IMG src="画像ファイルのパス" width="画像の横幅" height="画像の縦幅">
表示される画像のサイズを変更します。width=""には画像の横幅を、height=""には画像の縦幅を数値で指定します。
元々の画像サイズが大きい画像をこれで小さくできますが
ファイルサイズは変わらないため、読み込みが遅くなります。
あらかじめ画像編集ソフトでサイズを変更することをお勧めします。
また、小さい画像を大きくすると、ドットが目立ち、荒い画像になります。
記述例
<HTML>
<HEAD>
<TITLE>画像のサイズを変更</TITLE>
</HEAD>
<BODY>
元のサイズ<BR>
<img src="image01.jpg" alt="サイ"><BR><BR>
画像サイズを200x200にします。<BR>
<img src="image01.jpg" width="200" height="200" alt="サイ">
</BODY>
</HTML>
<HEAD>
<TITLE>画像のサイズを変更</TITLE>
</HEAD>
<BODY>
元のサイズ<BR>
<img src="image01.jpg" alt="サイ"><BR><BR>
画像サイズを200x200にします。<BR>
<img src="image01.jpg" width="200" height="200" alt="サイ">
</BODY>
</HTML>
ブラウザでプレビュー
元のサイズ
画像サイズを200x200にします。
画像サイズを200x200にします。
spacer
画像の周りに境界線を付ける
書式
<IMG src="image01.jpg" alt="サイ" border="境界線の太さ(ピクセル)">
画像の周りに境界線を加えることができます。また、画像自体をリンク設定した時、border="0"にすると
境界線なしのリンク画像になります。
記述例
<HTML>
<HEAD>
<TITLE>画像の周りに境界線を付ける</TITLE>
</HEAD>
<BODY>
画像に境界線を加えます。<BR>
<img src="image01.jpg" border="4">
</BODY>
</HTML>
<HEAD>
<TITLE>画像の周りに境界線を付ける</TITLE>
</HEAD>
<BODY>
画像に境界線を加えます。<BR>
<img src="image01.jpg" border="4">
</BODY>
</HTML>
ブラウザでプレビュー
画像に境界線を加えます。
spacer
文字の回りこみを指定
<IMG>タグで表示している画像は文字と同じ扱いとなります。そのため、<IMG>タグの隣に文字を入力すると右下（または左下）
に文字が表示されてしまいます。
記述例
<HTML>
<HEAD>
<TITLE>文字の回りこみを指定</TITLE>
</HEAD>
<BODY>
<img src="image01.jpg">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわ
</BODY>
</HTML>
<HEAD>
<TITLE>文字の回りこみを指定</TITLE>
</HEAD>
<BODY>
<img src="image01.jpg">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわ
</BODY>
</HTML>
ブラウザでプレビュー
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわ
文字を画像の横に回りこませるには align オプションを使用します。
書式
<IMG src="image01.jpg" alt="サイ" align="回り込みの指定">
■回り込みの指定left：画像の右側に文字を回り込ませます。
right：画像の左側に文字を回り込ませます。
記述例（leftの例 画像の右側に文字を回り込ませる）
<HTML>
<HEAD>
<TITLE>画像の右側に文字を回り込ませる</TITLE>
</HEAD>
<BODY>
<img src="image01.jpg" align="left">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン
<BR><BR><BR><BR><BR>
１２３４５６７８９０ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
</BODY>
</HTML>
<HEAD>
<TITLE>画像の右側に文字を回り込ませる</TITLE>
</HEAD>
<BODY>
<img src="image01.jpg" align="left">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン
<BR><BR><BR><BR><BR>
１２３４５６７８９０ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
</BODY>
</HTML>
ブラウザでプレビュー（leftの例 画像の右側に文字を回り込ませる）
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン１２３４５６７８９０ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
記述例（rightの例 画像の左側に文字を回り込ませる場合）
<HTML>
<HEAD>
<TITLE>画像の左側に文字を回り込ませる</TITLE>
</HEAD>
<BODY>
<img src="image01.jpg" align="right">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン
<BR><BR><BR><BR><BR>
１２３４５６７８９０ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン
</BODY>
</HTML>
<HEAD>
<TITLE>画像の左側に文字を回り込ませる</TITLE>
</HEAD>
<BODY>
<img src="image01.jpg" align="right">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン
<BR><BR><BR><BR><BR>
１２３４５６７８９０ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン
</BODY>
</HTML>
ブラウザでプレビュー（rightの例 画像の左側に文字を回り込ませる場合）
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン
１２３４５６７８９０ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン
以下のように記述すると、画像と画像の間に文章を流せます
<HTML>
<HEAD>
<TITLE>画像と画像の間に文章を流す</TITLE>
</HEAD>
<BODY>
<img src="../images/hana01.jpg" align="left">
<img src=""../images/hana01.jpg" align="right">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン１２３４５６７８９０ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
</BODY>
</HTML>
<HEAD>
<TITLE>画像と画像の間に文章を流す</TITLE>
</HEAD>
<BODY>
<img src="../images/hana01.jpg" align="left">
<img src=""../images/hana01.jpg" align="right">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン１２３４５６７８９０ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
</BODY>
</HTML>
ブラウザでプレビュー（画像と画像の間に文章を流す）
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン１２３４５６７８９０ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
spacer
文章の回りこみを解除する
書式
<BR clear="all">
IMGのalign="left"やalign="right"で回り込みの指定を行いますが回り込みを途中で解除したい時があると思います。
画像横の文章の回りこみを解除するには<BR clear="all">を使います。
<BR clear="all">より後の文章は画像の下に表示されます。
記述例
<HTML>
<HEAD>
<TITLE>文章の回りこみを解除する</TITLE>
</HEAD>
<BODY>
<img src="image01.jpg" align="left">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
<BR clear="all">
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン１２３４５６７８９０ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ
</BODY>
</HTML>
<HEAD>
<TITLE>文章の回りこみを解除する</TITLE>
</HEAD>
<BODY>
<img src="image01.jpg" align="left">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
<BR clear="all">
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン１２３４５６７８９０ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ
</BODY>
</HTML>
ブラウザでプレビュー
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン１２３４５６７８９０ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ
spacer
使用できる画像ファイルと種類
ホームページに使用できる画像形式一覧です。BMP(ビットマップ)
Windows標準の画像形式です。
ペイントで描いた絵を保存したときや
スキャナやデジタルカメラの設定によってはBMPになることがあります。
画像の劣化はありませんが、そのぶんファイルサイズが大きめです。
BMPをホームページに掲載することはできますが、画像の読み込みにとても
時間が掛かるため、ホームページ使用には向いていません。
BMP画像は画像編集ソフトでJPEG等に変換してサイズを小さくしましょう。
JPEG(ジェイペグ)
コンピュータなどで扱われる静止画像のデジタルデータを圧縮する方式のひとつ。
Windowsの標準画像ファイルBMP(ビットマップ)では、ファイルサイズが大きいため
ホームページ使用には向いていません。
そこで画像編集ソフトなどでJPEG形式に圧縮してファイルサイズを小さくします。
色数が多い写真などに用いられます。 拡張子は「.jpg .jpeg」
GIF(ギフ・ジフ)
256色以下の画像を扱うことができます。
色数が少ない画像やホームページ素材、イラストなどに
利用されます。
また、アニメーション画像を作成でき、画像の背景を透明（透過GIF）
にすることもできます。
拡張子は「.gif」
アニメーションGIF
透過GIF
透過なし
透過あり
インターレース（段階的に表示）
PNG(ピング)透過GIF
透過なし
透過ありインターレース（段階的に表示）
GIFの代替として開発された画像フォーマット。
フルカラーで表示でき透過表示等も可能。
ただし、GIFと違いアニメーションは無理で
PNGに対応していないブラウザでは表示されない場合があります。
拡張子は「.png」
spacer
画像の著作権について
基本的に使用していい画像や素材は、自分で撮影したものや作成したものです。
また、素材を配布しているホームページの素材や、雑誌・解説本付属CDの
素材も利用できます。
ただし、これらの素材には著作権があるため
その素材を無断で配布したりすることは禁止されています。
自分で撮影した人物の写真を掲載する時は、必ず本人の許可を取って
おきましょう。
無断で掲載するといらぬトラブルを招く場合があります。
許可を取れない場合は、画像編集ソフトなどで顔を隠す等の
加工をしてください。
また、芸能人の画像は許可が下りない場合がほとんどです。
★アニメやマンガのイラストを自分で描いて掲載する場合は？
出版社・事務所等によって対応が異なります。
ほとんどの場合黙認されていることが多いですが、あらかじめ
公式サイト等で確認しておくといいでしょう。
ディズニーキャラの場合、厳しく禁止されています。
また、他人のイラストを転載し、自分が描いたように見せる行為
は・・ やめたほうが無難ですね。
★著作権侵害になる画像(無許可で掲載・転載した場合)
雑誌や本をスキャンしたもの。または文章を写したもの。
公式ページ等の画像やイラストなど。