Home/Menu

スタイルなCSSの基礎講座

表示と位置

◆ はじめに

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

◆ displayプロパティ

displayプロパティ

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

none
指定された要素(含まれる全ての要素も)を表示しないようにします。
block
指定された要素をブロックレベルにします。
inline
指定された要素をインラインにします。
run-in
指定された要素の後に続く要素をインラインで改行なしに配置します。
compact
指定された要素の後に続くブロックレベル要素の左マージン内にインラインで配置します。
list-item
指定された要素に対して、リストのマーカー用ボックスも生成します。
marker
ブロックレベル要素の疑似要素(before,after)のみに適用され、その生成内容がリストのマーカーであることを宣言します。
table関係
何か、テーブル関係の要素がない言語(XML)等で使用するらしい...。
適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素inlinenoNN6,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と同様、だたし、スクロールぜず固定されます。(N6、IE5.5では、サポートされていないみたいです。)

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

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

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

z-indexプロパティ

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

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
positionプロパティでstatic以外が指定されている要素autonoNN6,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のみテスト)
絶対配置でないボックスを生成する要素nonenoNN6,IE5.5

clearプロパティ

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

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
ブロックレベル要素nonenoNN6,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のみテスト)
ブロックレベル要素、置き換え要素visiblenoNN6
[サンプル]

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


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


ちゃいちゃんは「一生懸命生きること」実践したよ! また、ちゃいちゃんは「人の良いところ」をどんどん見つけたよ! ちゃいちゃんのローマ字でのスペルは、 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のみテスト)
ブロックレベル要素、置き換え要素autonoNN6

visibilityプロパティ

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

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

directionプロパティ

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

unicode-bidiプロパティ

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

Home/Menu/スタイルシート概説リファレンス