表示と位置

◆ はじめに

つぎは、表示と位置などのプロパティです。
テーブルに代わるレイアウトは、これらのプロパティを理解しないと出来ません。
では、頑張っていきましょう！

スタイルシートの基本的なとこは、スタイルの適用方法を参照してください。
スタイルシートのリファレンスは、こちらにありますので参照してください。
尚、各種ブラウザのCSS2対応状況ガイド（他所様）は、こちらを参照のこと。

◆ displayプロパティ

displayプロパティ

displayプロパティは、指定された要素をどのように表示するかを設定するプロパティです。
設定値は、以下の通りです。
尚、現状（2001/06/12)このプロパティをまともにサポートしているブラウザはIE5-Macぐらいです。

none: 指定された要素（含まれる全ての要素も）を表示しないようにします。
block: 指定された要素をブロックレベルにします。
inline: 指定された要素をインラインにします。
run-in: 指定された要素の後に続く要素をインラインで改行なしに配置します。
compact: 指定された要素の後に続くブロックレベル要素の左マージン内にインラインで配置します。
list-item: 指定された要素に対して、リストのマーカー用ボックスも生成します。
marker: ブロックレベル要素の疑似要素（before,after）のみに適用され、その生成内容がリストのマーカーであることを宣言します。
table関係: 何か、テーブル関係の要素がない言語（ＸＭＬ）等で使用するらしい...。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
全要素	inline	no	NN6,IE5.5ともにnone,block,inline以外はどうでしょう？

[サンプル]

display: run-in

「中学でも新しい友達の良い所をどんどん見つけて行きます！」

----------CSS2 ソース------------------------------------------------
h6.sample1 {
	display: run-in;
	color: #ff6600;
	background-color: #ffffff;
	font-size: large;
}
hr{
	display: none;
}
---------- HTML4.01 ソース ------------------------------------------
<h6 class="sample1">display: run-in</h6>
<hr>
<p>
「中学でも新しい友達の良い所をどんどん見つけて行きます！」
</p>

補足

現状、run-in は、OP6.0とMac系IE5で有効のようです。NN6、WIN系IEでは無視されます。

◆ position,top,bottom,left,right,z-indexプロパティ

positionプロパティ

positionプロパティは、ボックスの表示位置を決定するための配置方法を設定するプロパティです。
実際の配置は、top,bottom,left,rightプロパティで指定します。
また、z-indexプロパティは重なり順序を指定できます。

positionプロパティ設定値は、以下の通り。

static（初期値）: top,bottom,left,rightプロパティを適用しません。
relative: 通常の配置される位置からの相対位置で配置します。
absolute: 親ボックスを基準として絶対位置で配置します。他の要素の配置に一切影響を与えません。
尚、親ボックスは、「position が static 以外である祖先要素、それが存在しない場合は「閲覧領域」（ウィンドウ ≒ BODY 要素）」になります。
fixed: absoluteと同様、だたし、スクロールぜず固定されます。（Ｎ６、IE5.5では、サポートされていないみたいです。）

top,bottom,left,rightプロパティ

top,bottom,left,rightプロパティ設定値は、実数値＋単位、%値、autoがあります。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
positionプロパティでstatic以外が指定されている要素	auto	no	NN6,IE5.5

z-indexプロパティ

z-indexプロパティ設定値は、整数値、autoがあります。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
positionプロパティでstatic以外が指定されている要素	auto	no	NN6,IE5.5

[サンプル]

POSITION
TEST
「中学でも新しい友達の良い所をどんどん見つけて行きます！」

----------CSS2 ソース------------------------------------------------
h6.sample2 {
	color: #ff6600;
	background-color: #ffffff;
	font-size: large;
	text-align:center;
}
#postest1{
	color: #000000;
	background-color: transparent;
	font-size: small;
	position: relative;
/*	position: absolute;   */
/*	position: fixed;      */
	top: -10px;
	left: 10%;
}
---------- HTML4.01 ソース -----------------------------------------
<h6 class="sample2">POSITION<br>
TEST<br>
<span id="postest1">
「中学でも新しい友達の良い所をどんどん見つけて行きます！」
</span>
</h6>

◆ float,clear,プロパティ

floatプロパティ

floatプロパティは、指定された要素のボックスを左、または右によせて、その反対側に続く要素を配置します。
設定値は、left,right,noneがあります。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
絶対配置でないボックスを生成する要素	none	no	NN6,IE5.5

clearプロパティ

clearプロパティは、floatプロパティの効果をクリアーにします。
設定値は、left,rightがあります。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
ブロックレベル要素	none	no	NN6,IE5.5

[サンプル]

右の画像はちゃいちゃんで、"float: right" で設定されています。これは、画像が右にフロートの状態で配置され、後に続く内容は左側に回り込みます。

この設定は"clear: right"で解除することが出来ます。

----------CSS2 ソース------------------------------------------------
#floatsmp{
	float: right;
	height: 80px;
}
.clearsmp{
	clear: right;
}
---------- HTML4.01 ソース -----------------------------------------
<p>
<img id="floatsmp" src="../img/chaichan.gif" alt="ちゃいちゃん">
右の画像はちゃいちゃんで、<em>"float: right"</em>
で設定されています。これは、画像が右にフロートの状態で配置され、
後に続く内容は左側に回り込みます。
</p>
<p class="clearsmp">
この設定は<em>"clear: right"</em>で解除することが出来ます。
</p>

◆ overflowプロパティ

overflowプロパティ

overflowプロパティは、ブロックレベル要素の内容がボックスからはみ出してしまう場合、どのよに表示するかを設定します。
設定値は、visible,hidden,scroll,autoがあります。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
ブロックレベル要素、置き換え要素	visible	no	NN6

[サンプル]

ちゃいちゃんは「一生懸命生きること」実践したよ！また、ちゃいちゃんは「人の良いところ」をどんどん見つけたよ！ちゃいちゃんのローマ字でのスペルは、 Chaichan Chaichanです

----------CSS2 ソース------------------------------------------------
#overflowsmp1{
	width: 200px;
	height: 70px;
	overflow: hidden;
	background-color: #88ffff;
}
#overflowsmp2{
	width: 200px;
	height: 70px;
	overflow: scroll;
	background-color: #88ffff;

}
#overflowsmp3{
	width: 200px;
	height: 70px;
	overflow: visible;
	background-color: #88ffff;
}
---------- HTML4.01 ソース -----------------------------------------
<p id="overflowsmp1">
ちゃいちゃんは「一生懸命生きること」実践したよ！
また、ちゃいちゃんは「人の良いところ」をどんどん見つけたよ！
ちゃいちゃんのローマ字でのスペルは、
Chaichan Chaichanです
</p>
<hr>
<p id="overflowsmp2">
ちゃいちゃんは「一生懸命生きること」実践したよ！
また、ちゃいちゃんは「人の良いところ」をどんどん見つけたよ！
ちゃいちゃんのローマ字でのスペルは、
Chaichan Chaichanです
</p>
<hr>
<p id="overflowsmp3">
ちゃいちゃんは「一生懸命生きること」実践したよ！
また、ちゃいちゃんは「人の良いところ」をどんどん見つけたよ！
ちゃいちゃんのローマ字でのスペルは、
Chaichan Chaichanです
</p>

◆ clip,visibility,direction,uicode-bidiプロパティ

clipプロパティ

clipプロパティは、ボックスの見える範囲を設定します。
設定値は、rect(上,右,下,左）,autoがあります。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
ブロックレベル要素、置き換え要素	auto	no	NN6

visibilityプロパティ

visibilityプロパティは、ボックスを表示するかどうかを設定します。
設定値は、visible,hidden,collapseがあります。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
全要素	inherit	no	NN6,IE5.5ともに全要素に対してはサポートしていないみたいです。

directionプロパティ

directionプロパティは、割愛します。
どうしても知りたい方は、CSS2 Specification 邦訳参照してください。

unicode-bidiプロパティ

unicode-bidiプロパティは、割愛します。
どうしても知りたい方は、CSS2 Specification 邦訳参照してください。

スタイルなCSSの基礎講座