HTML/CSS

たったこれだけ?画像を表示![HTML/CSS入門]

はじめに

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

今回はHTMLを使ってWebページに画像を表示させてみましょう。
HTMLの記述からおさらいしたい方は、下の記事を参考にしてみてください♪

http://itthestudy.com/%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91%e3%80%80html%E5%85%A5%E9%96%80/

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

さっそく画像を表示させてみよう!

文書だけでなく画像が入ってくるとWebページのみやすさやわかりやすさは段違いで変わってきます。
みなさんが何気なくいつもネットサーフィンして調べ物などしている時も、画像があったほうが見やすいですよね!

IT博士
IT博士

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

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

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

画像を表示する<img>

このタグがないと基本的に画像は表示できないので、必須だと覚えてください。
この<img>タグを基にして様々なプロパティと呼ばれる属性を指定していきます。

 "src"属性

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

IT博士
IT博士

つまり、この属性も必須項目ですね!
表示するものの場所がわからなければなにもできないので。

"alt"属性

この属性は基本的には、目の不自由な方たちのためにある文章の読み上げ機能が使われたときにどのような情報なのかを読み上げて説明してくれます。
ほかにも、Googleなどの検索エンジンもこの属性でなんの画像なのかを判断するため大事な要素となってきます。

"title"属性

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

IT博士
IT博士

基本的にはこの項目さえ押さえておけば、画像表示はばっちりです!
次は実際に使ってみた例をソースコードと一緒に見ていきましょう。

サンプルコードと一緒に見ていきましょう

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

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

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

IT博士
IT博士

もし万が一表示されなかったらクレームを言いに来てください!(笑)
丁寧にご説明させていただきます。

 

お問い合わせフォーム

画像リンク切れには注意!

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


なぜかというと、先ほど示したサンプルコードのように、画像ファイル名だけで指定した場合はその画像を表示しているWebページである、

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

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

まだプログラミングを始めたばかりの人にとっては、聞きなれない言葉かもしれません。
簡単に言うと、
「ファイルのある住所」なんですが、これだけ聞いてもあまりピンとこないですよね。
例えば、パソコンのデスクトップに画像ファイル[sample.jpg]があったとします。
その場所のパスは、「desktopsample.jpg」となります。

 

わからない場合にはエクスプローラ(windowsの場合、Macの方はFinder)で調べることができるので、詳しくはまた別の機会にまとめておきますね!

https://itthestudy.com/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%AE%E5%9F%BA%E7%A4%8E%E5%AD%A6%E7%BF%92-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%83%91%E3%82%B9%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/

まとめ

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


もしいろいろわからないことがあれば、まずはソースコードをコピペでもいいので書いてみてください!そうすることで、仕組みが分かりやすくなると思います。

~HTMLクイックリファレンス~ タグ一覧


Copyright© FUNA BLOG , 2020 All Rights Reserved.