画像の挿入

画像の挿入方法について説明したページです。画像の形式、htmlタグによる単純な画像の挿入方法からCSSも活用したセンタリングの方法、画像を横に並べる方法、画像からリンクする方法、画像上にカーソルを乗せると変化する方法等を説明しています。

画像の形式

 ホームページで使われる画像の形式はGIF、JPEG、PNG形式があります。各画像の比較は以下の通りです。

 最初にGIF形式です。

画像の挿入1

 JPEG形式です。

画像の挿入2

 PNG形式です。

画像の挿入3

 GIF形式は他の形式と比較して使える色の数が少ないため、荒い画像になります。各形式の特徴は以下の通りです。

・GIF形式
 使える色は256色に制限されますが、ファイルサイズを一番小さく出来ます。拡張子はgifです。
 GIF形式は透過処理が出来ます。透過する色を指定すると透明になるため、背景の上に画像を挿入した場合でも透明部分は背景を透過する事が出来ます。PictBearでも透過処理が可能です。使い方は「PictBearの使い方」の「透過」をご参照下さい。
 又、アニメーションを作る事が出来ます。アニメーションを使って簡単に動くバナーを作る事も可能です。
・JPEG形式
 使える色は16,777,216色で拡張子はjpg、jpeg等です。圧縮率が高いため写真等ファイルサイズが大きいものを保存するのに適しており、デジカメ等でも採用されている形式です。非可逆性のため編集等を繰り返すと画質が劣化します。
・PNG形式
 使える色は16,777,216色で拡張子はpngです。写真等高画質のものを保存するとJPEG形式よりファイルサイズが大きくなりますが、可逆性のため編集等を繰り返しても画質の劣化がありません。又、GIF同様に透過処理が出来ます。

 上記の特徴のため、写真等はJPEG形式、編集するもので画質を要求されるものはPNG形式、簡単な絵の場合はGIF形式を使うのが良いと思われます。

 尚、画像を編集するためにはソフトウェアが必要ですが、簡単な画像の編集であれば無料で機能が豊富なPictBearをお奨めします。PictBearは上記画像の形式に全て対応しています。詳細は「PictBearについて」をご参照下さい。

単純な画像の挿入

 単純に画像を挿入する時のhtmlでのタグの記述は以下の通りです。

<img src="ファイル名" alt="画像の説明" />

 例えばファイル名がtest.png、画像の説明をテストとする場合は<img src="test.png" alt="テスト" />となります。

 ファイルが例えばimgディレクトリ配下にある場合は<img src="img/test.png" alt="テスト" />となります。

 単純に画像を挿入した場合は以下のように表示されます。

画像の挿入4

 単純に画像を挿入した場合、次に記述した文字は以下のように右に表示されます。

画像の挿入4次にそのまま文字を記述すると右に表示されます。画像は文字と同じ扱いで同じ行に表示されるためです。

 文字を画像の下に表示したい場合は、文字を<p>タグ等で囲む必要があります。

画像の大きさの指定

 画像の大きさはhtmlタグで以下のように指定します。

<img src="ファイル名" alt="画像の説明" height="40" width="40" />

 heightが高さでwidthが幅です。40の所の数字を変える事で高さや幅をpxで指定出来ます。heightやwidthの指定で実際の画像より小さくしたり大きくして表示する事が出来ます。

 以下は単純な画像の挿入で使った画像を縦横半分の大きさで指定した場合の表示例です。

画像の挿入4

画像の中央へのセンタリング

 単純に画像を挿入すると左に寄ってしまいますが、中央にセンタリングしたい場合はスタイルシートで以下のようにします。

.textcenter {text-align: center;}

 次にhtmlタグで以下のように指定します。

<div class="textcenter"><img src="ファイル名" alt="画像の説明" /></div>

 これはtextcenterというクラスを作り、その中で画像をセンタリングする方法です。画像はテキストと同じ扱いなのでtext-alignでセンタリング出来ます。

画像の挿入5

 この場合、画像は文字と同じ扱いのままなので、画像を2つ続けて挿入すると以下のように横に並んで表示されます。

画像の挿入4画像の挿入4

 もう1つの方法は画像の表示形式を変更する方法でスタイルシートでは以下のようにします。

img {display: block;margin: 0px auto;}

 html側は普通にタグを指定して画像を挿入します。

 画像はテキストと同じ扱いですが、display: block;と指定する事で<div>等と同じようなボックスとして定義出来るため、marginで左右をautoにする事でセンタリング可能です。

画像の挿入6

 上下に余白を持たせたい場合は0pxの所を編集します。

 この方法では画像を2つ続けて挿入すると以下のように縦に並んで表示されます。

画像の挿入4画像の挿入4

 全ての画像に適用したくない場合はスタイルリストで以下のようにクラスを作ります。

.boxcenter {display: block;margin: 0px auto;}

 このようにするとhtmlで以下のようにクラス指定した時だけ画像が中央にセンタリングされます。

<img class="boxcenter" src="ファイル名" alt="画像の説明" />

画像を横並びする方法

 画像を横に並べるだけなら画像の中央へのセンタリングで示した通り、htmlファイルで<img>タグを連続して記述すれば並べられます。

<img src="ファイル名" alt="画像の説明" /><img src="ファイル名" alt="画像の説明" />

画像の挿入4画像の挿入4

 画像の間に余白を設けたい場合は改行します。

<img src="ファイル名" alt="画像の説明" />
<img src="ファイル名" alt="画像の説明" />

画像の挿入4 画像の挿入4

 これはセンタリングした場合でも同じです。

 又、imgをdisplay: block;指定した場合は<img>タグを連続して記述しても縦に並んでしまいます。この場合はスタイルシートで以下のように定義します。

img {display: block;margin: 0px 2px;float: left;}

画像の挿入4画像の挿入4

 marginで画像の間の余白を自由に調整可能です。

 尚、floatを使った後は回り込みを解除するのを忘れないで下さい。回り込みについては「スタイルシートの基本」の「回り込み」をご参照下さい。

画像からリンクする方法

 画像をクリックするとリンク先に行くようにするにはhtmlで以下のように記述します。

<a href="ファイル名"><img src="ファイル名" alt="画像の説明" /></a>

 つまり、<a>タグの間に<img>タグを入れます。ファイル名部分はurlも指定可能です。

 上記を設定すると以下のように表示されます。

画像の挿入4

 ブラウザによっては画像の周りに枠が表示されていると思います。リンクをすると自動的に枠が表示されるブラウザとされないブラウザがあります。確認した範囲ではInternetExplorerでは枠が表示され、FireFoxやGoogle Chromeでは枠が表示されませんでした。枠を消す場合はスタイルシートで以下の定義をします。

img {border:none;}

画像の挿入4

画像にカーソルを乗せると変化する方法

 画像にカーソルを乗せると変化する例として半透明にする場合、スタイルシートで以下のように記述します。

img:hover {opacity: 0.4; filter: alpha(opacity=40); -moz-opacity: 0.4;}

 html自体は通常の挿入方法と同じです。下の画像でマウスによりカーソルを乗せて確認してみて下さい。

画像の挿入4

 スタイルシートで記述した0.4等の数字を変更する事で薄くしたり濃くしたり出来ます。定義が3つあるのはブラウザでサポートしている定義が異なるためです。従って、多くのブライザに対応させるためには3つ共定義します。

 尚、カーソルを乗せて色が変わると訪問者はリンクしていると思いがちです。このため、以下のようにリンクした場合だけ色が変わるようにするとよいと思います。

a img:hover {opacity: 0.4; filter: alpha(opacity=40); -moz-opacity: 0.4;}

 これによりhtmlで<a>で囲んで画像からリンクを作った時だけカーソルが乗ると半透明になり、リンクされていない場合は半透明になりません。

 a img:hover {}の間に他の定義を記載する事で半透明だけでなくmarginで位置をズラす等の設定も出来ます。

サイト関連1

ホームページ作成「画像のスマートフォン対応
ホームページ作成「画像のRetinaディスプレイ対応
  • このエントリーをはてなブックマークに追加