HTML・CSS講座

画像タグ(HTML・CSS)

 

サイトやブログで画像を入れることもよくある事です。
テキストだけのサイトやブログは滅多に見ないでしょう。

 

HTMLでも頻繁に使われるタグの一種です。使い方を知っておくとかなり便利でしょう。

 

 

画像を使うための前提条件

 

画像タグは単純にHTMLにタグを入れれば画像が表示されるというわけではありません。
画像タグを使って画像を表示するためには前提条件があります。

 

まず表示できる画像の形式。

 

画像ファイルにはGIFやJPEGなどさまざまな画像形式があります。
ところがすべての画像形式をサイトで表示できるわけではありません。

 

サイトで画像として表示できる形式は「GIF」・「JPEG」・「PNG」の主に3つです。
ウィンドウズでよく用いられるビットマップなどはサイトでは表示できませんのでご注意ください。

 

次の前提条件として、表示する画像がサーバにアップロードされていることです。
これは当たり前の事かもしれませんが、画像ファイル自体がなければ当然表示もできません。

 

この2つの前提条件(画像形式、サーバにアップされていること)を忘れないようにしてください。

 

 

基本的な画像タグの使い方

<img src="(画像ファイルの場所とファイル名)" />

 

imgタグと使い、src属性で画像ファイルの場所とファイル名を指定します。
imgタグは囲むタイプのタグではなく、単体で使うタグです。

 

 

imgタグの属性でもうひとつよく使われる属性がalt属性です。

<img src="(画像ファイルの場所とファイル名)" alt="(画像の説明)"  />

表示上は変化はありませんが、画像がなにかしらの原因で表示できないときに
この画像の説明が文字として表示されます。

 

検索エンジンからも画像の説明が読み取れるので、alt属性は使っておくといいでしょう。

 

 

画像ファイルの指定方法

 

画像タグのsrc属性で画像の場所とファイル名を指定すると先述しましたが
具体的に指定する方法をご説明します。

 

画像ファイルを指定する場合、絶対パスと相対パスの2種類があります。

 

絶対パス

画像ファイルのURLを指定する方法です。

<img src="http://exsample.com/aaa.gif" />

画像ファイルがネット上にあればどんなファイルでもURLを指定して表示できます。
ただし、他人がアップしている画像を使って画像タグを表示するのは直リンクといってマナー違反ですのでやめてください。

 

相対パス

HTMLファイルと画像ファイルの位置関係を使って画像ファイルを指定する方法です。

 

▼HTMLファイルと画像ファイルが同じ位置にある場合

<img src="./aaa.gif" />

HTMLファイルと画像ファイルが同じ場所にある場合は、「./(画像ファイル名)」と指定します。
./は同じ場所という意味ですが、省略することもできます。

 

▼画像ファイルがHTMLファイルより下層(フォルダ内)にある場合

<img src="./img/aaa.gif" />

画像ファイルが下層にある場合は、「./(フォルダ名)/(画像ファイル名)」と指定します。
HTMLファイルから見て2階層下のある場合は「./(フォルダ名)/(フォルダ名)/(画像ファイル名)」のように
HTMLファイルから参照するためのフォルダ名をすべて記述します。

 

▼画像ファイルがHTMLファイルより上層にある場合

<img src="../aaa.gif" />

画像ファイルがHTMLファイルより上層にある場合は、「../(画像ファイル名)」と指定します。
2階層上にある場合は「../../(画像ファイル名)」というように../を増やしていきます。

 

 

基本的にはどちらでもいいですが、相対パスのほうがよく利用されます。

 

 

CSSによる画像のスタイル定義

【HTML】
<img src="./aaa.gif" />

【CSS】
img{ (スタイル定義) }

 

あまり画像全般に対してスタイル定義をおこなうことはありませんが
クラスを使って部分的にスタイル定義をおこなうことはあります。

 

参考:同じタグでデザインを分ける(CSS)

 

 

画像を使ったリンク

【HTML】
<a href="(リンク先)"><img src="(画像ファイルの場所とファイル名)" /></a>

 

画像を使ってリンクを貼る場合、imgタグをaタグで囲むことのよってリンクを貼ることができます。

 

 

 

 

 

HTML・CSS講座 記事一覧


トップページ アフィリエイトとは? ASP一覧 おすすめ教材・ソフト 無料稼ぐ情報
Yahoo!ブックマークに登録  このエントリーをはてなブックマークに追加