レイアウト関係

float、clear、overflow、display、visibility、position（top、bottom、left、right）、
z-index

左右の配置と回り込みを指定する

floatプロパティは、指定した要素を左または右に配置して、その反対側に後に続く要素を回り込ませる指定をします。
値にleftを指定すると左に、rightを指定すると右に配置します。noneを指定すると左右の配置を回り込みはしません。
回り込みを解除するにはclearプロパティを使用します。

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	.type { float:left;}
    	</style>
    

HTML

    	<p><img src="tree.png" class="type" /></p>
        <p>画像の右側にテキストを回り込ませるには、floatプロパティを使います。</p>
    

回り込みの解除を指定する

clearプロパティは、ある要素を左または右に配置して文章などの文字や直後のブロックレベル要素などを回り込ませた場合の回り込みの解除を指定します。

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	.type1 { float:left;}
            .type2 { clear:left;}
    	</style>
    

HTML

    	<p><img src="tree.png" class="type1" /></p>
        <p>画像の右側にテキストを回り込ませるには、floatプロパティを使います。</p>
    	<p class="type2">この段落の文字を回り込みから解除します。</p>
    

はみ出る部分の処理方法を指定する

overflowプロパティは、内容がボックスに入りきらない場合に、その部分をどのように処理するかを指定します。このプロパティは、ブロックレベル要素と置き換えインライン要素（img、inputなど）に対して指定することができます。
通常、ボックスに幅と高さを指定した場合、その範囲ではみ出して表示されるが、overflowで「scroll」を指定することで、スクロールバーを表示させ、その指定範囲内ではみ出た内容も見ることができるようになります。

■ サンプルコードと結果

CSS

    	<style type="text/css">
            p { width:200px;height:80px;background:#ccffcc;}
        	.type1 { overflow:hidden;}
            .type2 { overflow:scroll;}
    	</style>
    

HTML

    	<p class="type1">この段落の内容がすべて見えるようにするにはoverflowでscrollを指定する。
        この段落の内容がすべて見えるようにするにはoverflowでscrollを指定する。</p>
        <p class="type2">この段落の内容がすべて見えるようにするにはoverflowでscrollを指定する。
        この段落の内容がすべて見えるようにするにはoverflowでscrollを指定する。</p>
    

要素の表示形式の変更を指定する

displayプロパティは、ブロックレベル要素をインライン要素に、逆にインライン要素をブロックレベル要素の表示に変える指定をします。また、要素を非表示にすることもできます。

※ 「display:none」を指定するとボックスそのものが生成されなくなり、あたかもその要素がない状態が表現されます。

■ サンプルコードと結果

CSS

    	<style type="text/css">
            p { background:#ccffcc;}
        	.type1 li { display:inline;}
            .type2 { display:block;}
    	</style>
    

HTML

    	<ul class="type1">
    		<li>ブロック要素1</li>
            <li>ブロック要素2</li>
            <li>ブロック要素3</li>
        </ul>
        <p>インライン要素を<span class="type2">ブロック要素</span>	に指定する。</p>
    

ボックス内部の表示を指定する

visibilityプロパティは、ボックス内の内容の表示・非表示を指定します。「visibility:hidden」を指定すると、その要素の表示領域は確保されますが、内容そのものは見えない状態になります。

■ サンプルコードと結果

CSS

    	<style type="text/css">
            p { background:#ccffcc;}
            .type1 { visibility:visible;}
            .type2 { visibility:hidden;}
    	</style>
    

HTML

    	<p class="type1">ボックス要素の中を表示する</p>
        <p class="type2">ボックス要素の中を表示しない</p>
        <p class="type1">ボックス要素の中を表示する</p>
    

ボックスの配置位置の基準を指定する

これらのプロパティは、指定された要素をボックスの配置基準を決め、そこからの距離を指定します。
positionプロパティで、ボックスを配置する基準を決め、ボックスの配置はtop、right、bottom、leftのプロパティで指定します。

topプロパティは、親ボックスの上から指定した要素のボックスの上までの距離を指定
bottomプロパティは、親ボックスの下から指定した要素のボックスの下までの距離を指定
leftプロパティは、親ボックスの左から指定した要素のボックスの左までの距離を指定
rightプロパティは、親ボックスの右から指定した要素のボックスの右までの距離を指定

■ サンプルコードと結果（絶対配置）

CSS

    	<style type="text/css">
            p { background:#ccffcc;padding:50px;}
            .type { position:absolute;
            		top:50px;
                    left:100px;}
    	</style>
    

HTML

    	<p class="type">絶対配置のボックス要素</p>
    

※ サンプル（絶対配置の場合）は、ブラウザの左上を基準（基点）として、指定したボックス要素の左上の隅との距離を指定しています。

■ サンプルコードと結果（相対配置）

CSS

    	<style type="text/css">
        	* {	margin:0}
            h1 { font:bold 20px;background:#cccccc;}
            p { background:#ccffcc;padding:50px;width:260px;}
            .type { position:relative;
            	    top:20px;
                    left:20px;}
    	</style>
    

HTML

    	<h1>親ボックス</h1>
    	<p class="type">相対配置のボックス要素</p>
    

※ サンプル（相対配置の場合）は、親要素となるボックスを基準（基点）として、指定したボックス要素の左上の隅との距離を指定しています。

ボックス要素の重ね順を指定する

z-indexプロパティは、絶対配置や相対配置されている要素の重なる順序を指定します。通常表示される状態を0として、値が大きいものほど上に表示されます。つまり、重なり順は値が大きいほど上で小さいほど下になります。

■ サンプルコードと結果

CSS

    	<style type="text/css">
            p { text-align:center;padding:50px;width:150px;}
        	.type1 { position:absolute;
            		 left:10px;
                     top:10px;
                     background:red;
                     z-index:4;}
            .type2 { position:absolute;
            		 left:140px;
                     top:15px;
                     background:green;
                     z-index:2;}
            .type3 { position:absolute;
            		 left:80px;
                     top:110px;
                     background:pink;
                     z-index:3;}
    	</style>
    

HTML

    	<p class="type1">赤のボックス要素</p>
        <p class="type1">緑のボックス要素</p>
        <p class="type1">ピンクのボックス要素</p>