ブログ作成 その４
ブログ作成その４では、HTMLタグで画像を表示していきましょう。画像の保存先やタグの入力に注意してください。
4-1.画像をimageフォルダに保存する
ブログ作成においてぜひとも使用したいのが画像です。自分で撮った写真や、書いた絵などをHTMLでは表示することができます。では、ここから画像を表示する方法を解説していきます。まず最初に作ったimageフォルダーの中に画像を保存していきます。使う画像は下この２つです。
レストランの画像（step4-1.jpg）サイズ：300×225px
花火の画像（step4-2.jpg）サイズ：300×300px
これらの画像を名前をつけて、拡張子を.jpgにしてimageフォルダ内に名前をつけて保存します。レストランの画像の名前をstep4-1.jpg、花火の画像をstep4-2.jpgとします。
画像を右クリック、名前を付けて保存でimageフォルダに保存してください。
4-2.HTMLで画像を挿入する
では次にtomoblog.htmlに画像を表示させるコードを追加していきます。先ほどと同じようにメモ帳を開いて、tomoblog.htmlをおとします。そこに以下のテキストを追加してください、青文字の部分が追加したテキストです。（他のコードは省略してあります、article内にimgタグを記入してください。）
なおHTMLタグは開始と終了タグがセットになっていると解説しましたが、imgタグはひとつで完結します。ですので終了タグは必要ありません。
<div class="article">
<h3>7月18日</h3>
<p>今日は友達と軽井沢へサイクリングに行きました。とても風が気持ちよく、一日中自転車で、いろいろな場所を観光しました。途中でたまたま見つけたレストランが気になったので昼食をそこで取りました。そこで食べたオムライスがとてもおいしかったです。</p>
<p><img src="image/step4-1.jpg" width="300" height="225" alt="レストランの画像"></p>
</div>
<div class="article">
<h3>7月19日</h3>
<p>今日は仕事の帰りに、彼女と花火を見に行きました。車で行くと渋滞していたり、駐車場が空いていなかったりと不便になるだろうと思い、電車で行きました。</p>
<p>人の込み具合がすごくて、座って見られる場所がなく、住宅街をウロウロしていたら、そこに住んでいる近所の方々に誘ってもらい、絶好の穴場スポットで花火を見ることができました！</p>
<p><img src="image/step4-2.jpg" width="300" height="300" alt="花火の画像"></p>
</div>| width | 横幅の設定をします。 |
| height | 高さの設定をします。 |
| alt | 画像が表示されなかった場合、このテキストが表示されます。 |
入力したら上書き保存して完了です。下のサンプルのように表示されたと思います。
サンプルはこちら↓
