画像を表示させるタグ

2015-04-08

基本－画像を表示させるタグ

上記は画像を表示させる基本的なタグです。何も設定していない状態では、画像は左寄せに表示されます。
画像を右寄せ、中央寄せにする場合は下記のようにします。

	画像を左寄せに表示する <img src=”画像のアドレス” align=”left”>
	画像を右寄せに表示する <img src=”画像のアドレス” align=”right”>
	画像を中央（センタリング）に表示する <div align=”center”><img src=”画像のアドレス”></div>
	画像に枠線を表示する <img src=”画像のアドレス” border=”数値” /> サンプルは <img src=”画像のアドレス” border=”1″ /> <img src=”画像のアドレス” border=”0″ />で枠線なし
	枠線の種類を変える <img src=”画像のアドレス” style=”border:dotted”>
	枠線の太さと色を変える <img src=”画像のアドレス” style=”border:solid 2px #色”>

????????

imgタグにborderを使わないと、画像にリンクをはった場合、青い枠が出てしまいます。この枠が出ないようにするためには画像の borderを”0″ にしなくてはなりません。htmlでいちいち記述するのも面倒（自動的に記述される作成ソフトもありますが・・）なので、cssで簡単に一括処理します。

img {border: 0px;
}

img {border: none;
}

上記どちらでも結果は同じです。スタイルシートに記述しておくととても便利です。この指定は全ての画像に枠線がつかないので、
<img src=”画像のアドレス” border=”1″/>
が無効になってしまいます。

リンクを貼った画像のみ border=”0″ にするには

a img {border: 0px;
}

a img {border: none;
}

どちらでも結果は同じです。html内の画像タグにはborderの指定はしません。
画像が表示されなくなるからです。
html

<a href="リンク先のurl"><img src="画像のアドレス /></a>

????????