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

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

損をしない自動車保険選び損をしないクレジットカード選び銀行の利用就職・アルバイト情報
TOPページに戻る文字サイズを変えるには Control キーを押しながらマウスのスクロールホイールを回してください

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

画像と文章の配置

float:left;

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

上のような表示にするためには、次のように書きます。

<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">

</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ピクセルの位置に画像が表示されます。
かなり使いにくい指示方法です。

右上の猫の写真が、上記入力内容の表示結果です。
この写真の位置は何があっても変わりませんから、文字サイズが変更になったりすると文字と写真が重なり、非常に見辛いものになってしまいます。

上に戻る

画像を好きなところへ置く　その-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"> テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。
</BODY></HTML>

本来表示される位置
を確認してみます

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

本来表示されるのは
この位置です

テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。

位置変更指示を
追加します

<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">

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

位置変更指示を
追加します

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

位置変更指示後の
表示

テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。

本来表示される位置は空白になり、指示どおり左に300pxよった位置に新たに表示されます。
その場所に文字とか写真があるときは、重なって表示されます。

上に戻る

画像を重ねる順番を決める

z-index:数値;

2枚の画像を各々位置指定するだけで、重なるような位置指定なら、重なったまま表示されます。
どちらを上にするかは『 z-index: 数字』で指示します。数字が大きいほど手前に表示されます。

上に戻る

画像と文章を好きなところへ表示

画像だけではなく、文章も好きな位置に指定できます。
文章の場合は<DIV></DIV> で挟み、一つのブロックにします。こうすると画像の場合とまったく同じ要領で位置指定ができます。
下の例の場合は <DIV style="position: relative; left:320px; top:-100px; width:160px;"> と指定しています。
width:160px; と入れることにより文章ブロックの幅を160ピクセルになるようにし、バランスよく収まるようにしています。

<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY>
<IMG class="a" src="cat1.jpg"> <IMG class="b" src="cat1.jpg">
<DIV>テレビも映画も音楽も、ワンタッチですばやく楽しめる。
<BR>ＡＶ感覚で気軽に使えるマルチＡＶノート誕生</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>ＡＶ感覚で気軽に使えるマルチＡＶノート誕生</DIV>
</BODY></HTML>

テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。

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