9月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP(旧WEBCAMP PRO)。
8月受入枠は満員となっております。9月枠に向け、お早めの申込みをオススメします。
・フリーランスのように自由に働きたい
・会社の将来が不安だ
・給与や待遇に不満がある

上記にあてはまる方は、ぜひご検討ください!


みなさんはHTMLの学習をしていませんか?

HTMLでサイトを作り始める時に、「画像ってどうやって挿入するんだろう?」と疑問に思う初心者の方もいらっしゃると思います。

今回の記事では画像を挿入する方法を解説します!

・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

概要

HTMLで画像を挿入するためには <img>タグを使用します。imgタグと一緒に使用する、src属性、alt属性、title属性の使い方も紹介し、サンプルコードを使って実践してみます。

文書だけでなく画像を加えると、よりわかりやすく直感的なページがつくれます。今回はHTMLで画像を表示する方法を学びましょう。

画像を表示する際は、imgタグを使います。

<img src="image.png" alt="家族の写真"title="家族" width="300" height="200">

終了タグは必要ありません。

・学習におすすめの本を探している方は、「【初心者向け】htmlの学習におすすめの本12選!」の記事を参考にしてください。

属性

1.src (画像を指定する)

画像や文書など、表示したいファイルの出処を指定します。指定する際は絶対パス、相対パスどちらでも可能です。
相対パスの場合は、実行するHTMLファイルの格納位置で変わってくるので注意が必要です。

2.alt (画像の説明文を記載する)

目の不自由な方のための読み上げ機能において、何の画像であるかを読み上げたり、Googleなどの検索エンジンもこの属性で何の画像か判断します。
また、画像が表示されなかったときにもこの属性が表示されます。title属性と同じにしがちですが、より詳しい内容をこちらに書きます。

3.title (タイトルを設定する)

画像やリンク先のタイトルを表示します。マウスカーソルを画像に合わせると吹き出し形式で表示されます。

4.width、height (画像の幅、画像の高さを指定)

この属性を指定することで、画像の表示サイズを変更することができます。ピクセル数またはパーセントで指定します。
パーセントとは、実際のサイズに対する比率です。つまり、50%と書くと半分のサイズで表示されます。

しかし、データ量そのものは変化しないので、巨大な画像を扱う際(サムネイルとして縮小する場合など)には注意が必要です。
また、この属性で表示サイズを変更すると、画質が悪くなってしまう場合があります。(画像サイズの変更には、画像編集ソフトを使用して適正サイズにした方がベストです)

 大きさを変更しない場合でもサイズ指定を行う

画像の大きさを変更しない場合でも、サイズの指定を行っておくことをお勧めします。
例えば、幅200ピクセル×高さ130ピクセルの画像を読み込む場合は、そのサイズをそのまま次のように指定しておきます。

<img src="image.jpg" alt="写真" width="200" height="130">

画像のサイズを指定しておくと、画像の読み込みを待たずに文書全体が表示されるようになります。
そのため、感覚的には表示速度が高まります。
また、画像表示途中の表示崩れ(画像が読み込まれるごとにレイアウトが動いてしまう現象)がなくなります。

・学習サイトでの練習を考えている方は、「【初心者向け】htmlの練習ができる学習サイト8選!」の記事を参考にしてください。

サンプル


<!DOCTYPE html>
<html>
<head>
<title>Webページ練習<span></title></span>
</head>
<body>
<img src="test.jpg" alt="写真<span>" width="193" height="130"> </span>そのままの大きさ<span>
</span>
<img src="test.jpg" alt="写真<span>" width="96" height="65"> </span>縮小<span>
</span>
<img src="test.jpg" alt="写真<span>" width="100%" height="130"> </span>幅だけを拡大<span>
</span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
</body>
</html>

・ホームページ作成を勉強する時に参考にしたい記事を集めてみました。

【初心者入門】HTMLの学習で参考になるおすすめのブログ○選!を参考にしてみてください。

まとめ

初心者の方向けに画像を挿入する方法を紹介していきましたが、いかがでしたか?

サイト何画像を正しく挿入できることはWebサイトを作成する上で基本となる部分ですので、しっかり基本を抑えてくださいね!

1ヶ月でHTML・CSSができる!「WebCamp」とは?

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。

参加する方の90%は未経験者です!

短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです!

わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。

学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください!

9月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP
8月受入枠は満員となっております。9月枠に向け、お早めの申込みをオススメします。
・フリーランスのように自由に働きたい
・会社の将来が不安だ
・給与や待遇に不満がある

上記にあてはまる方は、ぜひご検討ください!

*カウンセリング予約に面倒な電話の必要はございません!


おすすめの記事