はじめに
文字を表示させるやり方はわかってきました！
そろそろ画像などを入れて見たいんですが難しいですか？
そろそろ画像などを入れて見たいんですが難しいですか？
画像を入れるもの簡単にできますよ
パスといわれる概念をちゃんと把握していれば、とても簡単に習得できると思います。
パスといわれる概念をちゃんと把握していれば、とても簡単に習得できると思います。
パスですか・・・
ボールを投げるわけではないんですよね
ボールを投げるわけではないんですよね
そのパスではないですね。
ファイルの構造をさします。
自分が今どの場所にいて、画像はどこにあるのかをさすことを相手と自分の関係から相対パスと言います。一方、どの場所にいてもフォルダの根元から参照することを絶対パスと言います。
ファイルの構造をさします。
自分が今どの場所にいて、画像はどこにあるのかをさすことを相手と自分の関係から相対パスと言います。一方、どの場所にいてもフォルダの根元から参照することを絶対パスと言います。
なるほど・・
よくわかりません！！
よくわかりません！！
では順をおって説明してきましょうか。
今あなたは、階段を登っていると考えてください。
階段は入り口から見て階段A、階段B、階段Cの３種類があります。今あなたは階段Aの３段目にいます。
ではここで問題です。階段Bの２段目にあなたのお友達がいます。そこに行くにはあなたはどうすればいいですか？
今あなたは、階段を登っていると考えてください。
階段は入り口から見て階段A、階段B、階段Cの３種類があります。今あなたは階段Aの３段目にいます。
ではここで問題です。階段Bの２段目にあなたのお友達がいます。そこに行くにはあなたはどうすればいいですか？
階段Aの３段目から階段Bの２段目に行けばいいんですね。それなら簡単です。
階段Aを降りて一度入り口に戻って階段Bを２段登ればいいんです。
階段Aを降りて一度入り口に戻って階段Bを２段登ればいいんです。
そう簡単ですね。その考え方が相対パスの考え方です。自分がどこにいてどこに相手がいるのかということを考えるやり方ですね。一方絶対パスは、入り口から見てどこにいるのかという入り口という絶対変わらない場所からの考え方になります。
なるほど・・だいぶわかってきました！この考え方が画像を表示するためには必要な考えなんですね。
画像を読み込むには、画像ファイルを読み込まないと行けないので、パスの考え方が必要なのです。では、サンプルを使って説明していきましょうか。
HTML基礎（画像表示編）
画像をHTMLで表示するには、表示する画像を用意しましょう。今回の例では、こちらの画像を表示させて見ましょう。
ファイル構造は次のようにしましょう。
- index.html
- images/sample.jpg
画像ファイルはindex.htmlからみてimagesフォルダの中にあるような形になります。この点を考慮して、画像を表示するコードを書くと次のようになります。
<html>
<head>
<meta charset="UTF-8">
<title>html画像を表示します。</title>
</head>
<body>
<h2>画像サンプル</h2>
<img src="images/sample.jpg" alt="画像サンプル" width="600" height="auto"/>
</body>
</html>
サンプル（画像表示）
imgタグで画像を表示することができます。
<img src="images/sample.jpg" alt="画像サンプル" width="600" height="auto"/>こちらのコードの src は画像のパスの位置を指しています。つまりこのパスが間違っていると正常に画像が表示されないようになります。
alt は画像が表示されない時に代わりに文字としてその画像が何を意味しているのかを表示してくれる設定になります。
上図のように画像が表示されていない時に代替テキストして表示されていることがわかるかと思います。
また、width,heightについては画像を表示するサイズになっています。作成するサイトに合わせて画像のサイズを指定してください。
