|
■画像の表示位置を座標(200,50)にする
<style type="text/css">
<!--
.pos { position:absolute; left:200px; top:50px; }
-->
</style>
|
<body>
<img src="photo.jpg" class="pos">
</body>
|
画像の位置を指定するにはposition:absolute;として絶対位置を指定し、left:200px;で左側からの座標、top:50px;として上側からの座標を指定します。
|
|
■画像の回りに枠を付ける
<style type="text/css">
<!--
.bdr { border:4px solid red;
-->
</style>
|
<body>
<simg src="photo.jpg" class="bdr">
</body>
|
画像の回りに枠を付けるにはborderを使って「border:枠幅 形状 色」の順番に指定します。
|
|
■画像の回りに枠を付ける（枠との間に余白を入れる）
<style type="text/css">
<!--
.bdr { border:2px solid black;
padding:6px; }
-->
</style>
|
<body>
<img src="photo.jpg" class="bdr">
</body>
|
画像の回りに枠を付けるにはborderを使って「border:枠幅 形状 色」の順番に指定します。画像と枠の間の余白（パディング）は「padding:余白」のように指定します。
|
|
■画像を右下に表示する
<style type="text/css">
<!--
.pos { position:absolute; bottom:0%; right:0%; }
-->
</style>
|
<body>
<img src="photo.jpg" class="pos">
</body>
|
画像の位置を指定するにはposition:absolute;として絶対位置を指定し「bottom:0%; right:0%;」として右下に配置します。
|
|
■画像を右上に表示する
<style type="text/css">
<!--
.pos { position:absolute; bottom:0%; right:0%; }
-->
</style>
|
<body>
<img src="photo.jpg" class="pos">
</body>
|
画像の位置を指定するにはposition:absolute;として絶対位置を指定し「top:0%; right:0%;」として右上に配置します。
|
|
■画像を左下に表示する
<style type="text/css">
<!--
.pos { position:absolute; bottom:0%; left:0%; }
-->
</style>
|
<body>
<ssimg src="photo.jpg" class="pos">
</body>
|
画像の位置を指定するにはposition:absolute;として絶対位置を指定し「bottom:0%; left:0%;」として右上に配置します。
|
|
自宅で仕事がしたい人必見！
]
]
キャッシング 
花
出会い 無料アクセス解析