Webふぉれすとうぇぶ実験室：CSSを使って文字や画像の位置指定をしてみよう


	Web制作、Webデザインのスキルアップに役立つ情報をお届けします！みんなが癒され、元気になるWebを目指します。

Webふぉれすとトップ > うぇぶ実験室


	CSSを使って文字や画像の位置指定をしてみよう

CSS（カスケーディングスタイルシート）では、ページに置いた文字や画像などを１つ１つの部品として個別に扱うことができ、それぞれを数値で直接位置指定したり、画面上で重ねて配置したりすることができます。

【実験1】z-indexで重なりの順序を指定します
		CSSでは、画像の上の好きな場所に文字を重ねることができます。この場合は、画像の上に文字を重ねたのですが、同じ方法を使って複数の画像の上に文字を置いたりもできます。重なり順の指定には z-index を使います。数値で位置を指定することもできます。 ○サンプル画面を見る

１．まずはページのHTMLを書きます。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>文字や画像の重なる順序の指定</title> <style type="text/css"> <!-- ここにスタイルシートを記入します --> </style> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ここにブラウザに表示させる部分（画像と文字）を記入します--> </body> </html>

２．<head> ～ </head> の間にCSSを書きます。 ○挿入するCSSの内容及び CSS解説

３．文字と画像をページに配置します。 <body> ～ </body> の間に画像と文字を <div> タグで挟んで配置します。挿入する内容 <div id="gazou">　 <!--画像を配置します。CSSで #gazou で設定しているので id="gazou" で適用させます--> <img src="images/lab200402_2_1.jpg" width="600" height="180"> </div> <div id="moji">グルメな気分で至福のひととき。</div> <!--文字を配置します。CSSで#moji で設定しているので id="moji" で適用させます-->

○完成したページのソース【注意】：CSSへの対応が不完全なブラウザでは表示が崩れてしまいます。 Netscape 4.7では文字がなくなってしまいました。配置指定がきかず、重なり指定だけが適用され、文字が画像の下に隠れて見えなくなっているようです。

｜ページのトップへ｜Webふぉれすとトップへ｜

Copyright(c)2002-2004 Step-First All rights reserved. [About WebForest]
E-Mail：webforest@step-first.com