画像の配置に関してのスタイルシート具体例


画像の配置に関してのスタイシートの具体的な書き方です。
画像と文章を好きなところに配置したり、画像同士を重ねて表示させたりします。 多数の画像、文章を好きなところに配置することもできます。


TOPページに戻る   文字サイズを変えるには Control キーを押しながらマウスのスクロールホイールを回してください
画像の配置に関してのスタイルシート具体例       

画像と文章の配置
float:left;
画像のところにfloat:leftと書くと画像が左に寄り、文章がその横(右)に表示されます。
画像のところにfloat:rightと書くと画像は右に寄り、文章はその横(左)になります。
文章を横に書くのをやめたい時は、<BR clear="all">の指示を入れます。

上のような表示にするためには、次のように書きます。
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
IMG{float:left; margin-right:50px;}  
-->
</STYLE>
</HEAD>
<BODY>
<IMG src="cat1.jpg"> 画像のところにfloat:leftと書くと画像が左に寄り、文章がその横(右)に表示されます。
<Br>画像のところにfloat:rightと書くと画像は右に寄り、文章はその横(左)になります。
<Br>文章を横に書くのをやめたい時は、<BR clear="all">の指示を入れます。
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
<IMG src="cat1.jpg" style=" float:left; margin-right:50px;"> 画像のところにfloat:leftと書くと画像が左に寄り、文章がその横(右)に表示されます。
<Br>画像のところにfloat:rightと書くと画像は右に寄り、文章はその横(左)になります。
<Br>文章を横に書くのをやめたい時は、<BR clear="all">の指示を入れます。
</BODY></HTML>


画像を好きなところへ置く その-1
position: absolute; left:数値; top:数値;
position: absolute; と書き、次いでleft:700px; top:1250px; と位置を指定すると、表示されたページの 左上を基準にし、そこから右へ700ピクセル・下へ1250ピクセルの位置に画像が表示されます。
かなり使いにくい指示方法です。
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
IMG{position: absolute; left:700px; top:1250px;}  
-->
</STYLE>
</HEAD>
<BODY>
<IMG src="cat1.jpg">
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
<IMG src="cat1.jpg" style=" position: absolute; left:700px; top:1250px;">
</BODY></HTML>
右上の猫の写真が、上記入力内容の表示結果です。
この写真の位置は何があっても変わりませんから、文字サイズが変更になったりすると 文字と写真が重なり、非常に見辛いものになってしまいます。


上に戻る
画像を好きなところへ置く その-2
position: relative; left:数値; top:数値;
position: relative; と書き、次いでleft:300px; top:0px; と relative を使って位置を指定すると、画像が本来表示される 位置を基準にし、そこから右へ300ピクセル・下へ0ピクセルの位置に画像が表示されます。
画像の「本来表示される位置」とは IMG タグを書いた場所です。
確認のため最初に位置指定をしない場合を表示させます。 これで本来表示される場所がわかります。
次に位置を変更させます。 両者を比べると position: relative の指定の意味がわかると思います。

本来表示される位置
を確認してみます
<HTML><HEAD><TITLE>  </TITLE>

</HEAD>
<BODY>
<IMG src="cat1.jpg"> テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。
</BODY></HTML>

本来表示される位置
を確認してみます
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
<IMG src="cat1.jpg" > テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。
</BODY></HTML>

本来表示されるのは
この位置です
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。

位置変更指示を
追加します
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
IMG{ position: relative; left:300px; top:0px;}  
-->
</STYLE>
</HEAD>
<BODY>
<IMG src="cat1.jpg"> テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。
</BODY></HTML>

位置変更指示を
追加します
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
<IMG src="cat1.jpg" style=" position: relative; left:300px; top:0px;"> テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。
</BODY></HTML>

位置変更指示後の
表示
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。
本来表示される位置は空白になり、指示どおり左に300pxよった位置に新たに表示されます。
その場所に文字とか写真があるときは、重なって表示されます。
上に戻る

画像を重ねる順番を決める
z-index:数値;
2枚の画像を各々位置指定するだけで、重なるような位置指定なら、重なったまま表示されます。
どちらを上にするかは『 z-index: 数字 』で指示します。 数字が大きいほど手前に表示されます。
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
IMG.a{ position: relative; left:0px; top:60px;z-index:1;}  
IMG.b{ position: relative; left:-20px; top:0px;z-index:2}  
-->
</STYLE>
</HEAD>
<BODY>
<IMG class="a" src="cat1.jpg"> <IMG class="b" src="cat1.jpg">
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
<IMG src="cat1.jpg" style="position: relative; left:0px; top:60px;z-index:1;">
<IMG src="cat1.jpg" style="position: relative; left:-20px; top:0px;z-index:2">
</BODY></HTML>





上に戻る
画像と文章を好きなところへ表示
画像だけではなく、文章も好きな位置に指定できます。
文章の場合は<DIV></DIV> で挟み、一つのブロックにします。こうすると画像の場合と まったく同じ要領で位置指定ができます。
下の例の場合は <DIV style="position: relative; left:320px; top:-100px; width:160px;"> と指定しています。
width:160px; と入れることにより文章ブロックの幅を160ピクセルになるようにし、バランスよく収まるようにしています。
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
IMG.a{ position: relative; left:0px; top:60px;z-index:1;}  
IMG.b{ position: relative; left:-20px; top:0px;z-index:2}  
DIV{ position: relative; left:320px; top:-100px; width:160px;}  
-->
</STYLE>
</HEAD>
<BODY>
<IMG class="a" src="cat1.jpg"> <IMG class="b" src="cat1.jpg">
<DIV>テレビも映画も音楽も、ワンタッチですばやく楽しめる。
<BR>AV感覚で気軽に使えるマルチAVノート誕生</DIV>
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
<IMG src="cat1.jpg" style="position: relative; left:0px; top:60px;z-index:1;">
<IMG src="cat1.jpg" style="position: relative; left:-20px; top:0px;z-index:2">
<DIV style="position: relative; left:320px; top:-100px; width:160px;">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
<BR>AV感覚で気軽に使えるマルチAVノート誕生</DIV>
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。





上に戻る TOPページに戻る 前に戻る 順番に次を見ていく