1. 現在位置:
  2. トップページ
  3. HP作成tips
  4. stylesheet
  5. 画像
ひとまとめに指定 |  回り込みを指定 |  margin |  表示位置 |  画像下の余白 |  拡大を指定 | 
画像img要素
枠線の太さ、色、種類をひとまとめに指定
img {
border: 2px red solid;
}
a img { border: none; } /*リンク画像のボーダーを消す*/
float 回り込みを指定
#example {
float: left;
}
テキスト
テキスト
left (画像を左に配置・テキストを右側に回り込ませる)
right (画像を右に配置・テキストを左側に回り込ませる)
none (指定なし)デフォルト
clear 回り込みを解除
.img {
clear: both;
}
left (画像の右側にある回り込みを解除)
right (画像の左側にある回り込みを解除)
both (どちらの回り込みも解除)
none (解除しない)デフォルト
margin マージン(余白)を指定
#img {
margin: 10px;
}
数値+単位(px、他)か %(割合)、auto(自動)で指定
vertical-align 表示位置(縦方向)を指定(画像に並ぶ文字の位置(縦方向)を指定)
#img {
vertical-align: middle;
}
テキスト
baseline (標準位置)デフォルト
top または text-top (画像横の上部に文字を表示します)
middle (画像横の中央に文字を表示します)
bottom または text-bottom (画像横の下部に文字を表示します)
数値+単位 (任意の位置に表示します)
% (任意の位置に表示します)
画像下の余白
vertical-align
左ccs
#container {
	width:100px;
	margin:20px auto 0;
}

ul li {
	margin:0;
	padding:0;
	list-style-type:none;
}
     
右ccs
ul li img {
	vertical-align:bottom;
}
ul li {
	margin:0;
	padding:0;
	list-style-type:none;
}
左html
<div id="container">
<ul>
<li><img src="img/banner1.gif"></li>
<li><img src="img/banner2.gif"></li>
<li><img src="img/banner3.gif"></li>
</ul>
</div>
     
右html
<ul>
<li><img src="img/banner1.gif"></li>
<li><img src="img/banner2.gif"></li>
<li><img src="img/banner3.gif"></li>
</ul>
zoom 拡大を指定
#example {
zoom: 1.5;
}
数値(単位なし)か %(割合)で指定
デフォルトは normal(標準サイズ)です。(例:zoom: normal)