Position Style

要素の配置方法の設定をします。

プロパティ	値	意味
position	static （既定値）	配置方法を指定しない
	relative	通常表示される場所からの相対的な位置を配置
	absolute	上位要素の領域の端からの位置を指定
	fixed	指定法は absolute と同じ。但し、スクロールしても動かない。

上下の位置を指定

要素の上下の位置を設定します。

プロパティ	値	意味
top	数値＋単位	上端からの表示位置を数値で設定
	数値％	上端からの表示位置を上位要素の高さに対する割合で指定
	auto （既定値）	指定しない場合と同じ
bottom	数値＋単位	下端からの表示位置を数値で設定
	数値％	下端からの表示位置を上位要素の高さに対する割合で指定
	auto （既定値）	指定しない場合と同じ

左右の位置を指定

要素の左右の位置を設定します。

プロパティ	値	意味
left	数値＋単位	左端からの表示位置を数値で設定
	数値％	左端からの表示位置を上位要素の幅に対する割合で指定
	auto （既定値）	指定しない場合と同じ
right	数値＋単位	右端からの表示位置を数値で設定
	数値％	右端からの表示位置を上位要素の幅に対する割合で指定
	auto （既定値）	指定しない場合と同じ

位置の設定例

重ね合わせの指定

位置の設定によっては、各要素が重なり合う場合がある、この重ね合わせの順番を指定することができます。

プロパティ	値	意味
z-index	数値（整数）	０を基準に、正の値が大きくなるほど前面に、負の数値が大きくなるほど背後に表示される。
z-index	auto （既定値）	記述順に重なっていく

重ね合わせの設定例

表示の指定

回り込みの指定

回り込みの設定

プロパティ	値	意味
visivility	visible （整数）	要素を表示する
hidden （既定値）	要素を隠す

プロパティ	値	意味
float	none （既定値）	回り込まない
	left	領域が左に寄り、右側に文字が回り込む。
	right	領域が右に寄り、左側に文字が回り込む。

position プロパティが absolute の場合、float プロパティの設定は無効になります。

回り込みの解除

float プロパティによる文字の回り込みを解除します。

プロパティ	値	意味
clear	none （既定値）	回り込みを解除しない
	left	左側に文字が回り込むプロパティを解除（ float:left; の解除）
	right	右側に文字が回り込むプロパティを解除（ float:right; の解除）
	both	全ての回り込みを解除

回り込みの設定例

領域の切り抜き設定

表示する領域の大きさを指定し，内容の一部を切り抜いて表示します．
「position」プロパティで「absolute」属性が指定してある場合に有効となります．

プロパティ	値	意味
clip	rect ( A B C D )	矩形領域として表示．「A，B，C，D」にはそれぞれ「上，右，下，左」の各辺の位置を左上の角を起点として「数値＋単位」で指定します．
clip	auto	元の内容と，同じ大きさ，同じ形で表示します．

切り抜きの設定例

段組みの設定

段組みを設定することが出来ます．

プロパティ	値	意味
column-count	整数	段の数を設定
column-count	auto	自動設定
column-width	数値＋単位	段の幅を設定
column-width	auto	自動設定
columns	column-widthの値 column-countの値	段組みの数と幅をまとめて設定
column-gap	数値＋単位	段の間隔を設定
column-gap	normal	ブラウザの既定値
column-rule-style	none	境界線を表示しない
	hidden	境界線を表示しない
	dotted	境界線を点線で表示
	dashed	境界線を破線で表示
	solid	境界線を実線で表示
	double	境界線を二重線で表示
	groove	境界線を凹んだ線
	ridge	境界線を凸（つばく）んだ線
	inset	内部が凹んだように見える境界線
	outset	内部が浮いたように見える境界線
column-rule-width	thin	細い境界線
	medium	中くらいの太さの境界線
	thick	太い境界線
	数値＋単位	境界線の太さを指定
column-rule-color	色	境界線の色を指定
column-rule	styleの値 widthの値 colorの値	境界線の設定をまとめてする

フレキシブルボックス

フレキシブルボックスの指定をすると，その内部の要素の領域の大きさや配置を柔軟に変更できるようになります．

プロパティ	値	意味
display	flex	設定した要素をブロックレベル（領域単位）のフレキシブルボックスにする．
display	inline-flex	設定した要素をインラインレベル（文字単位）のフレキシブルボックスにする．

フレキシブルボックス内の要素に設定できるプロパティ

要素の大きさ

並べる方向

プロパティ	値	意味
min-width	auto	横幅の最小値
min-height	auto	高さの最小値

プロパティ	値	意味
flex-direction	row	領域内の要素の配列方向を左から右にする．
	rwo-reverse	領域内の要素の配列方向を右から左にする．
	column	領域内の要素の配列方向を上から下にする．
	column-reverse	領域内の要素の配列方向を下から上にする．
flex-wrap	nowrap	領域内の要素を一列に並べる
	wrap	領域内の要素を複数列に並べる
	wrap-reverse	領域内の要素を逆並びの複数列にする
flex-flow	(flex-directionの値)(flex-wrapの値)	flex-directionとflex-wrapを一度に設定
order	数値	並べる順番を指定

大きさの柔軟性

プロパティ	値	意味
flex-basis	数値＋単位	要素の基本的な大きさを設定する
flex-grow	数値	要素を状況に合わせて広げる時の比率を設定
cflex-shrink	数値	要素を状況に合わせて縮める時の比率を設定
flex	none	要素の大きさを状況に合わせて変更しない
flex	(flex-growの値)(flex-shrinkの値)\|(flex-basisの値)	要素の大きさの変更に対する柔軟さをまとめて設定

要素の並べ方

プロパティ	値	意味
justify-content	flex-start	一列の要素を，横配列の場合は左詰めに，縦配列の場合は上から詰めて並べる．
	flex-end	一列の要素を，横配列の場合は右詰めに，縦配列の場合は下から詰めて並べる．
	center	一列の要素を，横配列の場合は横中央に，縦配列の場合は縦中央に並べる．
	space-between	最初の要素はflex-startと同様に，最後の要素はflex-endと同様に置き，残りはその間に等間隔で並べる
	space-around	space-betweenと同様に並べるが，最初と最後の要素を領域の境界から他の要素の間隔の半分だけ開ける
align-items	flex-start	一列の要素を，横配列の場合は領域の上辺に，縦配列の場合は領域の左辺に揃える．
	flex-end	一列の要素を，横配列の場合は領域の下辺に，縦配列の場合は領域の右辺に揃える．
	center	一列の要素を，横配列の場合は横中央に，縦配列の場合は縦中央に揃える．
	baseline	一列の要素を，横配列の場合，要素内の文字のベースラインを合わせるように並べる．
	stretch	一列の要素を，要素が領域内に隙間なく納まるように並べる
align-self	flex-start	align-itemの場合と同じ
	flex-end	align-itemの場合と同じ
	center	align-itemの場合と同じ
	baseline	align-itemの場合と同じ
	stretch	align-itemの場合と同じ
	auto	親要素のalign-itemに合わせる．親がなければstretchにする

列の揃え方

プロパティ	値	意味
align-content	flex-start	要素の複数列を，横配列の場合は領域の上辺に，縦配列の場合は領域の左辺に揃える．
	flex-end	要素の複数列を，横配列の場合は領域の下辺に，縦配列の場合は領域の右辺に揃える．
	center	要素の複数列を，横配列の場合は横中央に，縦配列の場合は縦中央に揃える．
	space-between	要素の複数列で，要素の最初の列はflex-startと同様に，最後の列はflex-endと同様に揃え，残りの列はその間に等間隔で配列する．
	space-around	要素の複数列で，最初の列と最後の列を，横配列の場合は上下の辺，縦配列の場合は左右の辺から残りの列の配列間隔の半分だけ開けて揃える．
	stretch	要素の複数列を，隙間ができないように揃えて配列．

位置に関するスタイル

配置を指定