HTMLファイルに画像を貼りつけ文字を重ねます
■STEP4 画像 サンプルを表示
★画像の貼り付け
画像を貼り付けてみましょう。
まずは、画像を用意します。置き場所は、HTMLファイルとは別のフォルダにしておいたほうがいいでしょう。
srcプロパティで画像ファイル名を指定します。
<img src="image/picture1.jpg" alt="写真１" >
表示
写真を貼りつけました。
ez-HTMLの使い方：
★ファイル名をパス付で入力する
★画像ファイルを編集画面上でプレビューする
★背景の画像
背景画像の指定の方法です。
background-imageプロパティを使います。
ページ全体の場合は、body要素に対して指定します。
サイト全体ではなく、個々のページに対して指定したい場合はID名を用いてスタイルを指定してください。
body {
background-image: url(/image/sakana77.jpg); /* 背景画像 */
}
表示例は、ステップ６のサンプルページを参照してください。
backgroundプロパティについては
画像の位置（backgroundプロパティ）を参照してください。
つづいて見出しとブロックの背景画像の指定の方法です。
ソースコード（CSSファイル）h1#image_spml {
background-image: url(/image/sakana77.jpg); /* 見出し５ 画像 */
color: blue; /* 見出し５ 文字色 */
height: 50px; /* 見出し５ 高さ */
}
div.image_spml {
background-image: url(image/picture2.jpg); /* div要素 */
height: 200px; /* div要素 */
}
ソースコード（HTML)
<br>
<div class="image_spml" >div要素</div>
表示
見出し５
★画像の大きさ
画像の大きさを変えてみましょう。
width、heightプロパティでピクセル数、または％で指定します。
％指定の場合は、親要素のサイズに対しての割合となります。
width、heightプロパティは極力指定するようにします。
<img src= "image/picture1.jpg" width= "160" height= "120" alt= "写真１" >
<img src= "image/picture1.jpg" width= "240" height= "180" alt= "写真１" >
<img src= "image/picture1.jpg" width= "20%" height= "10%" alt= "写真１" > <br>
3枚目はwidth="20%"指定です。height="10%"を指定していますが、親要素がデフォルトのheight:auto;のため無意味です。 </p>
表示
標準⇒1.5倍に拡大してみました（1枚目⇒２枚目）。
3枚目はwidth="20%"指定です。height="10%"を指定していますが、親要素がデフォルトのheight:auto;のため無意味です。
heightプロパティの％指定で気を付けなければならないのは、親要素がデフォルトのheight:auto;であった場合は
値を指定してもこの要素もheight:autoになってしまうため意味がありません。
このプロパティheightの値を有効にさせるためには、
html, body { height: 100%;}などとスタイルシートで親要素のプロパティheightを指定しなければなりません。
★画像の位置（右寄せ、左寄せ）
画像の位置を変えてみましょう。
画像を右寄せせにしてマージンを5pxで指定します。
（表示ブロックは、見栄えのために3pxのパディングを設定していますので、マージンなしの右寄せ/左寄せで3pxだけ開いています。）
*.img_flt_mg5_right {
margin: 5px; /* マージンは5 */
float: right; /* 右寄せ */
}
img.img_flt_right {float: right;}
img.img_flt_left {float: left;}
img.img_flt_none {float: none;}
/*-- テキストの回り込みを解除 --*/
*.clear {clear: both;}
ソースコード（HTML)
<div>
<img
class= "img_flt_mg5_right"
src= "image/picture2.jpg"
width= "160"
height="120"
alt= "写真２"
>
<div>右寄せで、マージン５pxで表示します。</div>
</div>
<div>
<img class="img_flt_left" src="image/picture2.jpg" width= "160" height="120" alt="写真２">
<div>左寄せ(float: left)で表示します。</div><br>
<div class="clear">回り込みを解除しました。</div>
</div>
<img class="img_flt_right" src="image/picture2.jpg" width= "160" height="120" alt="写真２">
<div>右寄せ(float: right)で表示します。</div><br>
<div class="clear">回り込みを解除しました。</div>
</div>
<img class="img_flt_none" src="image/picture2.jpg" width= "160" height="120" alt="写真２">
<div>回り込みなし(float: none)です。</div>
</div>
表示
（表示ブロックには3pxのパディングを設定しています）
floatプロパティは、left・right・none を指定できます。left・rightを指定したときは、反対側にテキストが回り込みます。
親のボックスから、画像がはみ出る場合があります。その時は、親要素でoverflow: auto;を指定するか、clear: both;で回り込み解除を行うと解決します。
★画像の位置（中央寄せ）
画像の位置を中央にしてみましょう。
flootプロパティーでは中央にできませんので、ブロックをセンタリングしその中に表示します。
div.center{
text-align: center;
/* 中央寄せ */
}
ソースコード（HTML)
<div
class= "center"
>
<img
src= "image/picture2.jpg"
width= "160" height="120"
alt= "写真２"
>
</div>
<div>
中央寄せで表示します。
</div>
表示
★画像の位置（backgroundプロパティ）
backgroundプロパティを使った画像の貼り付けです。
右に40px、下に20pxの位置に表示してみます。
*.img_back{
background-color: white;
background-image: url(image/picture2.jpg);
background-repeat: no-repeat;
background-position: 40px 20px;
width: 300px;
height: 200px;
border: 1px solid red;
}
background-colorプロパティは、色の名前の他、transparent（既定値：透明色）、inherit（継承）もしていできます。
background-repeatプロパティは、背景画像の並べかたで repeat（既定値：敷き詰める）、repeat-x（横方向のみ並べる）、
repeat-y（縦方向のみ並べる）、no-repeat（ひとつだけ表示する）、inherit（継承）のいずれかを指定します。
background-positionプロパティは、left（左端）、center（中央）、right（右端）、top（上端）、center（中央）、bottom（下端）や
または、％あるいはpxで左上からの位置を指定します。
これらは、backgroundプロパティで一度に指定することもできます。
順序は自由で、省略も可能です。
例 background-color: white url(image/picture2.jpg) no-repeat 40px 20px;
<div
class= "img_back"
>
</div>
<div>
backgroundプロパティを使って表示します。
</div>
表示
★画像に文字を重ねる
画像に文字を重ねてみましょう。
ソースコード（CSSファイル）/* 背景画像 */
*.img_text_sample {
color: red;
background-image: url(image/picture2.jpg);
width: 160px;
height: 120px;
border: 1px solid red;
}
/* 文字 */
*.blue_bold_large {
color: blue; /* 文字色は青 */
font-weight: bold; /* フォントの太さは一般的な太字 */
font-size: large; /* 大きい字 */
position: relative;
top: 40px;
left: 20px; /* 位置調整 */
}
ソースコード（HTML)
<div
class= "img_text_sample"
>
やっほー！
</div>
<div>
写真の上に文字を書いてみました。
</div>
<div
class= "img_text_sample"
>
<span
class= "blue_bold_large"
>やっほー！
</span>
</div>
<div>
文字の位置などを調整して画像に重ねました。
</div>
表示
★画像に画像を重ねる
画像に画像を重ねるには、文字の代わりに画像にすればいいだけです。
CSSファイルはそのまま文字を重ねるときの背景画像のクラス定義を使用します。
文字も位置を調節すれば、その上に重ねることができます。
/* 背景画像 */
*.img_text_sample {
color: red;
background-image: url(image/picture2.jpg);
width: 160px;
height: 120px;
border: 1px solid red;
}
/* 文字 */
*.blue_bold_large {
color: blue; /* 文字色は青 */
font-weight: bold; /* フォントの太さは一般的な太字 */
font-size: large; /* 大きい字 */
position: relative;
top: -40px;
left: 0px; /* 位置調整 */
}
ソースコード（HTML)
<div
class= "img_text_sample"
>
<img
src= "image/picture1.jpg"
width= "80"
height= "60"
style= "margin-left: 10px; margin-top: 5px;"
alt= "写真１"
>
<img
src= "image/picture1.jpg"
width= "60"
height= "45"
style= "margin-left: -20px; margin-top: -10px;"
alt= "写真１"
>
<br>
<span
class= "blue_bold_large"
>文字もここに重なります。
</span>
</div>
<div>
画像に画像を重ねました。
</div>
表示
文字もここに重なります。
重ねる方の画像は、サイズ（width、height）を指定して縮小しています。ベースの画像はCSSで倍率固定です。
CSSでは画像の拡大・縮小はできませんので、予め画像を編集して大きさをそろえておくか、そうでなければ<img>タグを使用してください。
なお、画像そのもののサイズを変えるには■SmillaEnlargerを使った画像の拡大・縮小
を参照してください。
ここでよく考えてみると、重ねる方の２つの画像が重なっていますね。つまり、ベースを画像にしなくても自然に重ねることができるということです。
★画像の重ねる順番を変える
画像の重ねる順番を変えるにはz-indexプロパティを使います。
デフォルトは、z-index=0。それより前面に配置するにはプラスの値、背面に配置するにはマイナスの値を指定します。
値が大きければより手前に、小さければ奥行きになります。
ステップ４までで学んだ内容だけでホームページを作りました。ボタンをクリックしてください。 スタイルシートは、一度保存してからかまたは直接見てください。