ホームページに画像を載せてみよう！

今回はホームページのトップ画面に画像を表示させていきたいと思います。

文字だけでなく画像も織り交ぜたほうが見やすいですもんね。とはいえ僕のホームページは買取系というかブランド品とかなんであまりいい画像はないんですが、うーん。

画像選びに時間がかかりそうです。

■画像を表示させる

htmlに表示させたい画像のurlを指定しないといけないようなので、まずはそれ用のフォルダを作り、そこに画像を保存していきます。

僕の場合はwwwのフォルダの中に作りました。wwwフォルダの中にはcssフォルダ、imageフォルダ、htmlファイル、バックアップ用のメモ帳が入っています。

とにかくhtmlファイルのあるところに一緒に入れておけばOKかと思われます。

じゃ、画像選びも終わったので画像を表示させるコードを入力していきます。

画像を表示させたい場所に <img src="image/topimage1.jpg" alt="" width="auto" heigth="390">と追加します。

はい、こんな感じですね。

13行目がタイトル、14行目がサブタイトルなのでその下に画像を表示させたかったので15行目に追加しました。

■img src=""

imgはそのままimageの略でしょう。srcはsourceの略でソースと読むようです。

資料、出典、情報源とかって意味です。なので画像の情報源を指定するわけです。

画像はimageフォルダの中のtopimage1.jpgという名前なので="image/topimage1.jpg"となります。

■alt=””

alternate　オルタネイトですかね。代理とか代替って意味です。画像が表示されなかった場合やもともと表示されないブラウザで画像の代わりに文章を表示させることができます。alt="時計の画像"のように書くみたいですが、まあ書かなくてもいいらしいので””にしてあります。

■width height

横幅と高さの指定をしています。本だとwidth="720" height="390"になってるんですけど横幅720px？にすると小太り感はんぱなかったのでいろいろいじりました。900でもまだ小太りですし、1200とかだとみーんって長くなっちゃってもうめんどくさっ！ってさぼってたんですけどそういえばautoってあったなって思い出してautoにしました。

そしたらまあ一番ましになりましたね。

あとなんか次のページには画像をfigureタグで囲むってあるんですけど、パッと読んだ感じいらない気がするので飛ばします。必要だったらまたあとでやりますね。

次回5章レイアウトをいじっていきます。