webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

background image or img その1

  • backgroundにレイアウトした画像と、imgでレイアウトした画像の違いをきちんと認識したい。
  • なにが違うのか、自分で考えつくだけ列挙してみると…
  1. imgはhtmlに記述、一方background-imageはcssに記述。つまり、imgは本文構造上の意味を持っている。
  2. imgにはaltに画像の説明をつける。background-imagにはなにもつけない。このことは、googleの画像検索に影響する。意味としては①と同じか。
  3. imgは画像それ自体が大きさ(幅、高さ)を持つが、背景画像を指定しただけでは表示されない。html要素の背景だから、html要素の幅、高さがないと画像が表示できない。
  • こんなところですか?さて、ページトップのロゴはbackgroundでいいのでしょうか?

検証

  • backgroundは<p>要素の高さしか表示できない。背景ですから…
  • imgは画像全体が表示できる。<img>要素ですから…

f:id:ohta-felica:20160824180742p:plain

  •  <div class="backgroundImg">に<img>と同じ大きさ(幅、高さ)を指定すると、見映えは近くなる。文字の見え方はとうぜん異なる。

f:id:ohta-felica:20160824181433j:plain

  •  background imageは印刷されない、という記事があったけれどもそれはないみたいです。

f:id:ohta-felica:20160824182044p:plain

  • background image の場合、マウスを右クリックしても「画像を保存」できない。

f:id:ohta-felica:20160824182346p:plain

  •  imgの場合、マウスを右クリックすると「画像の保存」ができる。

f:id:ohta-felica:20160824182506p:plain

 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">

<title>img or background</title>
<style>
html, body, div, p, img{
margin:0;
padding:0;
line-height: 1.0;
font-size: 24px;
color: #e20613;
font-weight: bold;
}
img{
vertical-align: bottom;
}
/*reset
---------------------------------------------------------------------------*/
body{
background:#000080;
}
.backgroundImg{
background:url(img/bannar_background.PNG) no-repeat;
margin-bottom: 50px;
}
</style>
</head>

<body>
<div class="backgroundImg">
<p>space for background</p>
</div><!--backImg-->
<div class="img">
<p>space for img</p>
<img src="img/bannar_background.PNG" width="978" height="550" alt="img">
</div>
</body>
</html>