【HTML/CSS入門】たったこれだけ？画像を表示する方法や各プロパティの紹介

こんにちは、リバティエンジニアのFUNA（フナ）です。

現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

今回は、HTMLを使ってWebページに「画像」を表示させる方法について解説していきます。

はじめに

HTMLの記述からおさらいしたい方は、下の記事を参考にしてみてください♪

>> 【はじめてのHTML】 ブラウザに表示させて確認する方法

ではさっそく「画像の表示」の仕方を見ていきましょう！

【HTML】さっそく画像を表示させてみよう！

文書だけでなく画像が入ってくるとWebページのみやすさやわかりやすさは段違いで変わってきます。

みなさんが何気なくいつもネットサーフィンして調べ物などしている時も、画像があったほうが見やすいですよね!

FUNA

私は逆に見づらいページだと「戻る」ボタンで戻ってしまうかも...(笑)
そんな人もいるので見やすいものを作りましょう！

すこし話が逸れてしまいましたが、さっそく画像を表示させてみましょう！

画像を表示するときには、「imgタグ」を使います。

HTMLで画像を表示する<img>タグ

このタグがないと基本的に画像は表示できないので、必須だと覚えてください。

この<img>タグを基にして様々なプロパティと呼ばれる属性を指定していきます。

【HTMLのimgタグで使えるプロパティ】 "src"属性

この属性を設定することで画像や文書などの、表示したいファイルの場所を指定することができます。

つまり、この属性も必須項目ですね！

表示するものの場所がわからなければなにもできないので。

【HTMLのimgタグで使えるプロパティ】"alt"属性

この属性は基本的には、目の不自由な方たちのためにあります。

文章の読み上げ機能が使われたときにどのような情報なのかを読み上げて説明してくれます。

ほかにも、Googleなどの検索エンジンもこの属性でなんの画像なのかを判断するため大事な要素となってきます。

【HTMLのimgタグで使えるプロパティ】"title"属性

画像やリンク先のタイトル(題名)を記述するための属性です。

基本的にはこの項目さえ押さえておけば、画像表示はばっちりです！

次は実際に使ってみた例をソースコードと一緒に見ていきましょう。

【HTML】画像表示のサンプルコード

表示したい画像ファイルを用意します。今回は例題ということで仮に、「サンプルの画像」というタイトルの「sample.jpg」という画像ファイルを用意したとします。

<img src="sample.jpg" alt="サンプルの画像" title="サンプル画像">

このように指定してあげることで、画像を表示させることができます。

FUNA

もし万が一表示されなかったらクレームを言いに来てください！(笑)

丁寧にご説明させていただきます。

お問い合わせフォーム

画像のリンク切れには注意！

先ほど説明した「sample.jpg」のファイルを別のフォルダに移動したらWebページから画像が消えてしまいます。

画像ファイル名だけで指定した場合はその画像を表示しているWebページである「HTMLのソースファイルと同じフォルダに入れておかなければならない」ためです。

なので、もしHTMLと同じフォルダに画像ファイルをどうしても置けない場合は、画像ファイルの”パス”というものを指定してやる必要があります。

画像ファイルの”パス”とは

まだプログラミングを始めたばかりの人にとっては、聞きなれない言葉かもしれません。

簡単に言うと、「ファイルのある住所」なんですが、これだけ聞いてもあまりピンとこないですよね。

例えば、パソコンのデスクトップに画像ファイル[sample.jpg]があったとします。

その場所のパスは、「desktop/sample.jpg」となります。

わからない場合にはエクスプローラ(windowsの場合、Macの方はFinder)で調べることができるので、詳しくは下記の記事を参考に。

>> プログラミングの基礎学習- 絶対パスや相対パス -

【HTMLのimgタグ】まとめ

今回は、HTMLにおける画像の表示の仕方を、初心者の方でもわかるように基本からしっかり説明しました。

もしいろいろわからないことがあれば、まずはソースコードをコピペでもいいので書いてみてください！

そうすることで、仕組みが分かりやすくなります。

>> 【HTMLクイックリファレンス】タグ一覧

関連記事