画像を好きな位置に表示する
プロパティ:position: top: left: right: bottom:値:左から absolute 値 値 値 値
スタイルシートで画像を好きな位置に表示するには、まずpositionプロパティを使います。
positionプロパティにabsolute属性をつけると、「位置を絶対的に指定する」という意味になります。
その後でtopプロパティなどを使って位置を指定します。
この方法は画像ではなく、テキストやテーブルなどにも使えます。
ソース例(太字が学んだ内容です)
<html>
<head>
<title>画像を好きな位置に表示する</title>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<img src="cat.gif" style="position:absolute; top:0; left:0">
<img src="cat.gif" style="position:absolute; bottom:0; right:0">
<h3>画像が左上と右下に表示されています。ただしこの方法を使うと何があろうと絶対に指定した位置に表示されるので、訪問者のブラウザによってはレイアウトがむちゃくちゃに崩れます。なので私はおすすめしません。</h3>
<br><br>
<a href="http://www.homepagesakusei.biz/">ホームページ作成、HTML</a><br>
Webサイト版<a href="http://www.homepagecreation.net/" target="_blank">ホームページ作成とHTML</a>
</body>
</html>
表示はこちら
2006年05月10日