『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン

HTML05 Webページに画像を配置しよう!(7分16秒)

Webページに画像を配置しよう!

Webページに画像を配置するためのタグについて解説しています。

Webページに画像を挿入するには、imgタグを使用します。

imgは、 image(画像)の略。

※終了タグはありません。

概要

  • imgタグの書き方
  • src属性
  • alt属性
  • 画像の大きさを指定する属性

補足・ポイント

src属性

imgタグには、src属性で属性値には、画像ファイルのパス(場所)を記述します。

<p><img src="images/image01.jpg"></p>

alt属性

Altは、alternative(代替)の略。

属性値には、「画像に代わって表示する文字列」を記述します。

画像が表示されない、画像の読み込みに失敗した、画像を表示しない設定にしている場合に、このalt属性の情報がブラウザ上で表示されます。

<p><img src="images/image01.jpg" alt="ブロッコリー"></p>

画像の大きさを指定する属性

画像の大きさを指定するにはタグにwidth属性とheight属性を追加します。

  • width属性=幅を指定する
  • height属性=高さを指定する

それぞれの属性値には、一般的にpx値で表示サイズ指定します。

単位であるpxの記述は必要ありません。

このwidth属性とheight属性は、img要素に必須な属性ではありませんが、幅と高さを指定しておくことで、ブラウザが画像を読み込む最中も画像スペースをあけて表示するため、ページのレイアウトが崩れにくくなります。

<p><img src="images/image01.jpg" alt="ブロッコリー" width="210" height="158"></p>

imgタグはインライン要素の一種なので、p要素などのブロックレベル要素で囲む必要があります。

この記事が気に入ったら
いいね ! しよう

福本 智子

フリーランスWebデザイナー・Webスクール講師。 子育てをしながら、趣味で始めたネットショップからWebを活用したビジネスの楽しさにはまり、Web屋の道を歩む。 Web制作業務に加え【Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ】を運営。 フリーランスでWebデザイナーを目指す方々のサポートに注力している。

Pocket
LINEで送る

関連記事

ライター紹介

Webメディア部 メンバー募集!

  • Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ Webクリエイターズオンラインスクール

ログイン

新米クリエイターズ Webメディア部

『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。

Web・DTPデザイナー・会社員・アルバイト・ライター・ブロガー・主婦・子育てママ...etc。
現在の肩書きは違えど目指すところは皆「フリーランスのWebデザイナー(クリエイター)」

日々の学びやお役立ち情報をブログで発信・アウトプットをしながらWebの世界でコンテンツを配信する、
Webサイトを運営する、アクセスを集めるってどんなことなのか?を体感していきます。

新米クリエイターならではの気づきや学び、Webデザイナーの腕を磨いていく模様をリアルに感じていただけます!