検索

キーワード


目次

【HTML】画像を表示させるには

  • 公開日:2020-09-08 20:45:17
  • 最終更新日:2020-11-16 22:37:40
【HTML】画像を表示させるには

Workteria(ワークテリア)では難易度の高いものから低いものまで、スキルや経験に合わせた案件を多数揃えています。会員登録は無料ですので、ぜひ会員登録してご希望の案件を探してみてください!

フリーランス/正社員のエンジニアとして活躍するには、ご自身のスキルや経験に合わせた仕事を選ぶことが大切です。ご希望の案件がみつからない場合はお気軽にお問い合わせください!ユーザ満足度の高いキャリアコンサルタントが在籍していますので、希望条件や悩み事などなんでもご相談ください。ご希望にピッタリの案件をご紹介させていただきます。

こんにちは。駆け出しプログラマーの松下です!

ここでは、imgタグについて紹介します。

HTMLを学び始めたばかりという方の参考になれば幸いです!


imgタグとは

imgタグはブラウザに画像を表示させるときに使います。


<img src=”URL”>のURL部分に、画像がある場所(相対パスまたは絶対パス)を指定することでその画像が表示されます。

指定できる画像形式は、GIF・JPEG・PNGなどです。

終了タグ(</〇〇>)は不要です。


imgタグの書き方

大きさを指定する

画像の大きさを指定するときは、imgタグに「width」と「height」という属性を加えることで、それぞれ幅、高さを指定することができます。

<img src="ねこ.jpg" width="150" height="250">
 庭先にいました

画像の大きさを指定した例


画像の下に文字を配置する

imgタグはインライン要素となるため、続けて文字を書くと上記のように横並びに表示されます。

画像の下に文字を表示するには、<p>でブロック要素とするか改行タグ<br>で改行を入れる必要があります。


title属性

title属性は、画像に対して補足説明をつけたいときなどに使われます。

指定した値は、カーソルを画像の上に重ねると吹出しで表示されます。

<img src="ねこ.jpg" width="150" height="250" title="よく来る野良猫くん">
<p> 庭先にいました</p>

title属性を付けた例


alt属性

alt属性は、画像ファイルのコンテンツを説明するために使用されるものです。

何か不具合があってブラウザに画像が表示されなかったときに、画像の代わりに表示されるテキストを設定します。

音声ブラウザの場合、画像のalt属性のテキストが読み上げられます。

<img src="ねこ.jpg" width="150" height="250" alt="こちらを見てる黒白の猫">
<p> 庭先にいました</p>

alt属性を付けた画像の例

このように、表示されなかった画像の代わりに、alt属性で設定されていたテキストが表示されます。

装飾目的など意味を持たない画像の場合は「alt=””」のように空の記述するのが好ましいです。


【著者】

松下

今年文系未経験からプログラマとなりました。 同じ初心者の方に分かりやすいよう簡潔な記事を心がけていきます。 趣味はサッカー観戦と洋服です。

編集した記事一覧

正社員/フリーランスの方でこのようなお悩みありませんか?

  • 自分に合う案件を定期的に紹介してもらいたい
  • 週2、リモートワークなど自由な働き方をしてみたい
  • 面倒な案件探し・契約周りは任せて仕事に集中したい

そのような方はぜひ、Workteriaサイトをご利用ください!

  • 定期的にご本人に合う高額案件を紹介

  • リモートワークなど自由な働き方ができる案件多数

  • 専属エージェントが契約や請求をトータルサポート

よく読まれている記事
【HTML/CSS】divタグの使い方

【HTML/CSS】divタグの使い方

こんにちは。駆け出しプログラマーの松下です!HTMLで頻繁に見かけるdivタグとはどんなものかを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!divとはdivタグはそれ自身は特に意味を持っていませんが、構造上必要なひとかたまりを示します。例えば、下記のように文字の色を赤にしたいときに、CSSでとを別々に赤色と指定するのは面倒です。HTMLファイル赤い果物 りんご CSS

【HTML】リンクタグについて

【HTML】リンクタグについて

こんにちは。駆け出しエンジニアの竹前です。ここでは、HTMLのリンクタグについて説明します。HTMLについて勉強している方の参考になれば幸いです。リンクタグとはリンクタグとは、HTMLの閲覧中のページから、別のページに遷移させるときに使うタグ(~タグ)のことをいいます。このタグを使うことによって、文字列や画像にリンクを設定することができます。タグとタグの違いHTMLにはタグというものがあります。タ

【HTML/CSS】リストについて

【HTML/CSS】リストについて

こんにちは。駆け出しプログラマーの松下です!リストを作成するol、ulタグを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!リストをつくるHTMLで箇条書きを行うには ol、ul、liタグを使用します。このタグによりただの言葉のあつまりでなく、ひとつのまとまりをもったリストであるということをコンピューターに伝えることができます。ol、ulタグでリストを作成し、その項目にliタ