備忘録的プログラミングリファレンス

画像に関する CSS

 web ページにおける画像の扱いについての解説です。大きさの調整、テキストの回り込み、背景画像について解説します。

 webページで <img> を使って画像を扱う場合、大きさとその余白の調整周辺の文字の回り込みのために スタイルシート ( CSS ) を使います。 背景はさらに特殊で CSS を利用しないと表示されません。
 背景として画像を表示するには <img> を使いません。cssで任意のタグエレメントを指定して、その background-image プロパティを利用します。

- ad -

大きさと余白の調整

 画像の大きさは、widthheight プロパティを使用します。幅と高さ、どちらかを指定しかた方は auto に指定します。
 widthheight プロパティは、比率%で設定した方がよいでしょう。比率で指定した方が元の画像の感じがくずれ難いです。

 余白は margin または padding プロパティを使用します。 margin または padding プロパティの違いは背景を含むか、含まないかです。
 margin は背景を含まないために余白は親エレメントの背景色で表示されます。padding は自身のエレメント背景が余白として表示されます。

#img{
	width: 50%;
	margin: 10px;
}

回り込み

 画像の周辺のテキストを回り込ませるには、float プロパティを使います。

 例えば、左に画像を表示し、その画像の右にテキストを回り込み表示したい場合は float プロパティの値に left を指定します。そして回り込みを終了させるには、直後のタグエレメントに clear プロパティを利用します。

img{
	float:left;
}

p{
	clear: both;
}

 回り込みで扱う画像の周辺は円形や楕円形、矩形に変えることができます。詳しくは clip-path プロパティを参照してください。

バックグランドイメージ

 webページのバックグランドに画像を表示するには CSS の background-image プロパティを利用します。
 例えば以下のようにある <div> 領域に背景画像を表示する場合です。

  background-image プロパティは繰り返し表示されます。繰り返し表示をしたくない場合は、background-repeat を no-repeat に指定します。

div {
	background-image:url(./img/img.jpg);
	background-repeat:  no-repeat;
	width: 80%;
	height: auto;
}

- ad -