DESIGN BLOGデザイン事務所の制作ブログ

【HTML】imgタグについて徹底解説!

優香
株式会社ビーエムビー

imgタグについて


HTMLでimageタグを使って画像を表示するためのHTMLタグのひとつです。
「imgタグ」はインライン要素ですが、ブロック要素と同じ効果が出せるのを覚えておきましょう。
表示する画像ファイルはsrc属性で指定し、
WEB上ではGIF形式、JPEG形式、PNG形式の画像形式を指定することができます。

画像の形式はJPGが一番軽いです。なので基本的にはJPGで書き出して使用するようにしましょう。
☆ファイヤワークスの書き出し方法→control+shift+X

必要な要素

src属性」と「alt属性」を設定する必要があります。順番を入れ替えても問題ありませんが
BMBでの書き方は基本的には以下の通りです。

<img src="画像が格納されている場所" alt="画像の説明文">

ただし、画像を表示するだけなら、src属性だけで十分です。

altの補足説明


alt属性の機能は、あくまで検索エンジンに適切な画像内容を伝えることであり、
コンテンツを検索エンジンやユーザーわかりやすくする役割を担うものです。
HTML5からは必須ではなくなりました。なので使用しなくても大丈夫です。


alt属性を記述すると、検索エンジンにコンテンツの内容を正確に伝えられるというメリット があります。
飾りなどには必要ありませんが、説明などで画像を使用する際は
altを使って補足を入れたほうがSEO上は有利になるのを覚えておきましょう。


また、altタグを使うことによって

・接続が遅く、画像が表示されずに見ている人
・障害を持った方など、音声ソフトを利用してページを理解している人
・テキストだけのブラウザを利用している人がいる


以上のユーザーにも画像を理解してもらうことが可能です。
SEOだけではなくaltを使うことによってより多くの人に理解してもらえるWEBページが完成します。
個人的には、適宜使っていければいいなと思っています。


注意点

imgタグは他のタグと違って終了がありません。
</img>などを書かないようにしましょう。

 

まとめ

個人的にあまりimgタグを使用しないため、最低限の情報を載せました。

注意点は過去に使用されていることがあったようなので皆さんで注意していけたらと思います。

他にも知りたいことがあるよというものがあればコメントにお願いいたします

株式会社ビーエムビー

株式会社ビーエムビー

〒114-0031 東京都北区十条仲原1-4-8 商店街会館311 TEL&FAX:03-5948-5996

東京都北区のWEBやDTP(印刷物)のデザイン制作会社です。ホームページ制作やLP(ランディングページ)の作成、ECサイト(楽天ストアなど)の構築などのWEBデザイン、チラシ・ポスター・名刺・パンフレット・看板などの印刷物デザインに対応しています。お客様の業務形態や用途に合わせたwordpressによるCMSサイトをフルスクラッチにて構築することが可能です。お気軽にお問い合わせください。

その他の制作ブログ一覧

名入れノベルティバッグを制作しました! 名入れノベルティバッグのご依頼を頂きました。 埼玉県新座市の不動産会社さまからのご依頼で、社名入りの手提げ袋を制作しました。 以前使っていたものを使い切ってしまったので、新しいデザインで作りたい!ということで、これまで使用されていたもののデザインと雰囲気が変わるようなデザインを目指しました。 主に営業の方が資料を入れるのに使ったり、お客様にお渡しするノベルティグッズを入れたり...といった用… DTPillustrator
LINEスタンプを制作しました。たくさんのイラスト作画が大変でしたが、とても楽しい作業で納品まであっという間でした。 LINEスタンプ制作のご依頼を頂きました。 兵庫県三木市で彫刻刀の老舗メーカーとしてたくさんの彫刻刀を製造販売しているクライアントさんです。以前にホームページ制作をさせていただいたご縁からいろんなお仕事をご依頼いただいています。 そんな中でもLINEスタンプ制作のご相談をいただきました。クライアントさんのマスコットキャラクターをLINEスタンプにしたいとのこと。 何度かやったことのある仕事で… イラスト制作illustratorphotoshop
【jQuery】slideToggleを使って要素をクリックで要素を表示・非表示させる 「Q&A」などでよく使われる、クリックすると詳細が表示される、アコーディオンメニュー。この記事では、そのアコーディオンメニューを、jQueryのslideToggleというメソッドを使って作成する方法をご紹介します。 1、slideToggleの使用例 まずはjsの記述について <script> $(function($){ $('ul.qa li .question'… TECHNICWEB制作javascriptjQuery
一覧に戻る