情報技術|CSS|配置

floatプロパティ

回り込みや段組みの効果を作る．

適用できる要素	すべての要素
継承	しない

テンプレート	float: `値`;

指定できる値	値の効果
lift	指定した要素のボックスが左に寄せられる．
right	指定した要素のボックスが右に寄せられる．
none	左右への配置と回り込みをしない．

CSSの例文	p.float{ float: left; }
XHTMLの例文	<p class="float">見出し1<br />見出し2</p> <p>文章1</p> <p>文章2</p>
出力結果	見出し1 見出し2 文章1 文章2

clearプロパティ

回り込みを解除する．

適用できる要素	ブロック要素
継承	しない

テンプレート	clear: `値`;

指定できる値	値の効果
left	float: left;を解除する．
right	float: right;を解除する．
both	float: left;とfloat: right;を解除する．
none	解除しない．

CSSの例文	p.float{ float: left; } p.clear{ clear: left; }
XHTMLの例文	<p class="float">見出し1<br />見出し2</p> <p>文章1</p> <p class="clear">文章2</p>
出力結果	見出し1 見出し2 文章1 文章2

positionプロパティ

ページの中で座標を指定して要素を配置できる．

適用できる要素	すべての要素
継承	しない

テンプレート	position: `値`;

指定できる値	値の効果
static	通常どおりに配置される．
absolute	下4つのプロパティで指定された座標に要素を配置する．
relative	下4つのプロパティで指定された分だけ，要素の位置を元の位置からずらす．
fixed	ページの中で，下4つのプロパティで指定された座標に要素を配置する．スクロールしても位置が動かないように見える．

leftプロパティ

要素の左からの位置を指定できる．

適用できる要素	positionプロパティを指定した要素
継承	しない

テンプレート	position: ; left: `値`;

指定できる値	値の効果
em	em単位で長さを指定する．
px	px単位で長さを指定する．
%	パーセンテージで長さを指定する．
auto	要素やboxの種類に応じて自動的に配置される．

CSSの例文	p.left{ position: relative; left: 1em; }
XHTMLの例文	<p class="left"> ● </p>
出力結果	●

rightプロパティ

要素の右からの位置を指定できる．

適用できる要素	positionプロパティを指定した要素
継承	しない

テンプレート	position: ; right: `値`;

指定できる値	値の効果
em	em単位で長さを指定する．
px	px単位で長さを指定する．
%	パーセンテージで長さを指定する．
auto	要素やboxの種類に応じて自動的に配置される．

CSSの例文	p.right{ position: relative; right: 1em; }
XHTMLの例文	<p class="right"> ● </p>
出力結果	●

topプロパティ

要素の上からの位置を指定できる．

適用できる要素	positionプロパティを指定した要素
継承	しない

テンプレート	position: ; top: `値`;

指定できる値	値の効果
em	em単位で長さを指定する．
px	px単位で長さを指定する．
%	パーセンテージで長さを指定する．
auto	要素やboxの種類に応じて自動的に配置される．

CSSの例文	p.top{ position: relative; top: 1em; }
XHTMLの例文	<p class="top"> ● </p>
出力結果	●

bottomプロパティ

要素の下からの位置を指定できる．

テンプレート	position: ; bottom: `値`;

適用できる要素	positionプロパティを指定した要素
継承	しない

指定できる値	値の効果
em	em単位で長さを指定する．
px	px単位で長さを指定する．
%	パーセンテージで長さを指定する．
auto	要素やboxの種類に応じて自動的に配置される．

CSSの例文	p.bottom{ position: relative; bottom: 1em; }
XHTMLの例文	<p class="bottom"> ● </p>
出力結果	●

overflowプロパティ

指定された高さや幅から要素の内容がはみ出したときの表示方法を指定できる．

適用できる要素	ブロック要素
継承	しない

テンプレート	overflow: `値`;

指定できる値	値の効果
visible	通常どおり，要素の内容をはみ出して表示する．
hidden	はみ出した部分は表示しない．
scroll	常にすスクロールバーが付き，スクロールすることではみ出した部分がみれる．
auto	はみ出した時のみスクロールバーが付き，スクロールすることではみ出した部分がみれる．

CSSの例文	p.overflow{ width: 95px; height: 70px; overflow: auto; }
XHTMLの例文	<p class="overflow"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん </p>
出力結果	あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん

CSSの例文

p.overflow{
width: 95px;
height: 70px;
overflow: auto;
}

XHTMLの例文

<p class="overflow">
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
やゆよ
わをん
</p>

出力結果

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん

その他のプロパティ

displayプロパティ
visibilityプロパティ
z-indexプロパティ
clipプロパティ

COE documents

配置

回り込みや段組みの効果