【HTML】Webページに画像の埋め込む方法

画像を埋め込む「img」タグの書式はシンプルです。
一番簡単な「img」タグコードは、下記のようになります。

属性

src	画像のURLを記述するための属性です。 URL指定を間違えると画像は表示されません。 「img」タグでは、この「src」属性だけでも画像が表示されます。 URLの指定方法は、「相対URL」と「絶対URL」のどちらでも指定できます。 絶対URLは、「http://○○.com/○○/○○.jpg」という記述方法。 相対URLは、「./○○/○○.jpg」という記述方法。
width	画像の横幅指定をする属性。 数字のみでの指定も可能だが、「100px」と単位指定でも可能。 数字以外の文字が含まれる場合は、「width="100px"」というように、「"」で囲む必要がある。
height	画像の縦幅指定をする属性。 数字のみでの指定も可能だが、「100px」と単位指定でも可能。 数字以外の文字が含まれる場合は、「width="100px"」というように、「"」で囲む必要がある。

HTMLコード

HTMLコード

<img src="./最初の画像ファイル名.jpg" onMouseOver="this.src='./マウスを乗せたときに表示する画像ファイル名.jpg'" onMouseOut="this.src='./最初の画像ファイル名.jpg'">

「onMouseOver="this.src='ファイルURL'"」で、「”（ダブルクォート）」と「’（シングルクォート）」の二つが利用されています。
両方とも「”（ダブルクォート）」の場合、「onMouseOver」と「this.src」の区切りである「”（ダブルクォート）」が混在してしまいます。
それを避けるために、「”（ダブルクォート）」の中で、「”（ダブルクォート）」を使いたい場合、「’（シングルクォート）」を利用します。
逆でも記述可能です。
「’（シングルクォート）」の中で、「”（ダブルクォート）」を使うことで混在を防ぐことができます。

大きな画像を表示するなどをするには、少し時間がかかります。
なので、前もって、画像を「preload（先読み込み）」しておくと、
画像の表示や切り替えがスムーズになる。
表示のズレなどの防止にもなる。

画像を先読み込みする書式

Back

HTML

CSS

未訪問のリンク	link { color: #00ff00; }
訪問済みのリンク	a:visited { color: #00ff00; }
マウスでクリック中など、アクティブな要素	a:active { color: #00ff00; }
マウスが乗せられている要素	a:hover { color: #00ff00; }
一括指定	a:link, a:visited, a:active { color: #00ff00; }
ID名での一括指定	ID名:link, ID名:visited, ID名:active { color: #00ff00; }
クラス名での一括指定	クラス名:link, クラス名:visited, クラス名:active { color: #00ff00; }

画像を切り替えるには、
「未訪問」「訪問済み」と「アクティブ（クリック中）」「マウスオーバー（マウスが重なっている）」の背景画像を変えることで、
画像を切り替える。


記述例

記述例だけで、マウスを重ねるだけで、画像が変わりますが、
縦横のサイズなどの設定も忘れずに指定してください。

画像が切り替わらないとき、表示されない時は、URLの指定が間違っていることが多いです。
画像ファイルの場所を確認して正確にURLを指定してください。

画像を並べて記述すると、画像と画像の間に隙間ができることがある。
その時の解決方法が、いくつかある。

ブラウザによっては、まったく機能しなかったりするので注意。

・タグを改行せず、一行に並べる。
・タグの間（改行）をコメントタグで囲う。
・タグを閉じる「>」前で改行して、次の行に移行する。
・親要素に「font-size: 0;」に適用する。
・「display:table-cell;」を適用して、左づめにする。（IEでは適用不可の様子）
・「display: inline;」を適用する。
・「float: left;」を適用して、画像を詰める。

left	画像を左に寄せ、画像の右側にテキストを回り込ませる。
right	画像を右側に寄せ、画像の左側にテキストを回り混ませる。
all	「all」による回り込み解除。画像が左右のどちらにあっても、「all」の指定によって回り込みは解除される。

CSSの指定でも、画像の横にテキストを回り込ませることができる。

background: #cc9999 url(back.gif) no-repeat 80% 80%;

background:
url(../image/back.gif) no-repeat top right,
url(../image/back.gif) no-repeat top left,
url(../image/back.gif) no-repeat bottom left,
url(../image/back.gif) no-repeat bottom right,
#cc9999;


background-color: #cc9999;
background-image: url(../image/back.gif);
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-repeat: space;
background-repeat: round;


background-attachment: fixed;


background-position: left top; /* 左上 */
background-position: 20px 30px; /* 左上から右に20px, 下に30px */
background-position: left; /* left center と同意 */
background-position: top; /* center top と同意 */
background-position: center; /* center center と同意 */
background-position: 80% 80%; /* center center と同意 */
background-position: left 20%; /* left center と同意 */


background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;


-moz-background-size: auto;
-webkit-background-size: auto;
-o-background-size: auto;
background-size: auto;
-moz-background-size: 50px;
-webkit-background-size: 50px;
-o-background-size: 50px;
background-size: 30px;
-moz-background-size: 80% 80%;
-webkit-background-size: 80% 80%;
-o-background-size: 80% 80%;
background-size: 80% 80%;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
-moz-background-size: contain;
-webkit-background-size: contain;
-o-background-size: contain;
background-size: contain;

Web制作に使う「画像」を入手する方法はいくつかあります。

・自分で写真を撮る
・自分でイラストを描く
・ストックフォトで購入する
・画像フリーサイトで無料でダウンロードする
・SNSなどの画像埋め込みサービスを使う
・市区町村や観光サイトが提供する画像を使用する

などの方法を利用して、
Webで使用する画像を調達します。
画像の数が膨大なので、
少しずつ、自分が使いやすい方法を選ぶのが、
1番効率が良いと思います。

ストックフォトで画像を購入するには

Back