【HTML/CSS】画像表示の仕方（img）

プログラミング

2020.06.05

【HTML/CSS】画像表示の仕方（img）
画像ファイルを用意しよう
<img src=”” alt=””>に記述しよう
表示の様子とコード（サンプル）

【HTML/CSS】画像表示の仕方（img）

水降

前回は「calc」を使って画面を横に３分割するなど、高さや幅を変えるレイアウトの仕方についてご紹介しました。

アメオ

でも、なんか文字だけで寂しいですね。

水降

そうですね、見た人を引きつけるページをつくる上で欠かせないのが画像になります。
では、今回は画像を表示する方法について紹介します。

画像ファイルを用意しよう

水降

画像をつかうためには、まず画像を用意しないといけません。

アメオ

画像をダウンロードしましたけど、これをどうしたらいいんですか？

水降

まずはこちらを現在編集しているフォルダの中に入れましょう。
imagesという名前は分かりやすいようにしているので、他の名前でも構いません。

水降

そうすると、VSCode上でも以下のようになります。

水降

これで下準備は終了です。

<img src=”” alt=””>に記述しよう

水降

あとは、こちらをindex.html上に記述していくだけです。

水降

記述の方法としてはこのようになります。

<img src=”データがある場所” alt=”データが表示されなかったときに表すテキスト”>

水降

実際に見てみましょう。

水降

src内の記述としては、imagesファイルの中にあるsample1.jpgを参照する、という意味になります。
ここの記述を先ほど用意したファイルやデータと１文字でも違うと正しく読み込むことができません。

アメオ

一文字・・・厳しいですね。

水降

コンピューターは正確性を求めますので、仕方ないです。

水降

そして、下の図のような場合でも表示できません。
何故か分かりますか？

アメオ

sample1.jpgがファイルに入っていない！

水降

そうです。
画像が表示されないときは、スペルミスがないか（特に拡張子、.jpgや.pngの書き間違い）または、データは正しくファイルに入っているかを確認しましょう。

表示の様子とコード（サンプル）

【HTML】

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>sample</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<header>
<div class=”title”>
<h1>Test page</h1>
</div>
<divc lass=”nav”>
<ul class=”lists”>
<li>メニュー</li>
<li>メニュー２</li>
</ul>
</div>
</header>
<div class = “contents”>
<div class = “left-contents”>
<h2>images list</h2>
<ul class=”images”>
<li>
<img src=”images/sample1.jpg” alt=”kasa” class=”image”>
<p class=”image-name”>test</p>
</li>
<li>
<img src=”images/sample1.jpg” alt=”kasa” class=”image”>
<p class=”image-name”>tesr2</p>
</li>
</ul>
</div>
<div class = “right-content”>
</div>
</div>
<footer>
<h3>test page 2020</h3>
</footer>
</body>
</html>

【CSS】
body{
font-size: 14px;
color: #333;
margin: 0auto;
}
h1,h2,h3,h4,h5,h6,p{
padding: 10px0;
margin: 0;
}
ul,li{
padding: 0;
margin: 0;
}
header{
background-color: lightskyblue;
height: 50px;
width: 100vw;
display: flex;
justify-content: space-between;
}
.title{
margin-left: 40px;
}
.nav{
width: 30%;
padding: 20px;
}
li{
list-style: none;
}
.lists{
display: flex;
justify-content: space-around;
}

.contents{
display: flex;
height: calc(100vh – 100px);
width: 100vw;
}
.images{
display: flex;
}
.image{
height: 200px;
width: 200px;
margin-left: 30px;
}
.image-name{
text-align: center;
}
footer{
background-color: lightskyblue;
height: 50px;
width: 100vw;
display: flex;
justify-content: center;
}