ワンポイントアドバイス！

CSSの攻略のポイントは配置です！

CSSの記述【配置】

配置
width内容の幅
max-width幅の最大値を指定する
min-width幅の最小値を指定する
height内容の高さ
max-height高さの最大値を指定する
min-height高さの最小値を指定するさ
float回り込み
clear回り込みを解除
position
top
left
bottom
right
z-index		要素の配置方法
display要素の表示形式
overflowボックスからあふれた内容の処理
width
記述例値意味
width:90%;「auto」初期値
「px,%,me」などの数値で指定		内容の幅
max-width
記述例値意味
max-width:400%;「auto」初期値
「px,%,me」などの数値で指定		幅の最大値を指定する
min-width
記述例値意味
min-width:400%;「auto」初期値
「px,%,me」などの数値で指定		幅の最小値を指定する
height
記述例値意味
height:90%;「auto」初期値
「px,%,me」などの数値で指定		内容の高さ
max-height
記述例値意味
max-height:400%;「auto」初期値
「px,%,me」などの数値で指定		高さの最大値を指定する
min-height
記述例値意味
min-height:400%;「auto」初期値
「px,%,me」などの数値で指定		高さの最小値を指定する
float
記述例値意味
float:left;left指定した要素を左に寄せます。後に続く内容はその右側に回り込みます。
float:right;right指定した要素を右に寄せます。後に続く内容はその左側に回り込みます。
float:none;none特に配置を指定しません。これが初期値です。
clear
記述例値意味
clear:both;left
right
both
none		回り込みを解除
※「clear:both;」を覚えときましょう。
position top left bottom right z-index
記述例値意味
position:static;staticこの値のときには、top、bottom、left、rightは適用されません。初期値
position:relative;relative相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
position:absolute;absolute絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
position:fixed;fixed絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。
top:0;
left:5px;
bottom:5%;
right:auto;		「auto」
「auto」初期値
「px,%,me」などの数値で指定		positionプロパティを併用して、配置方法（基準位置）を設定
z-index:999;整数値で指定（数値が多きほど上）
「auto」初期値		z-indexプロパティは、ボックスの重なりの順序を指定する際に使用します。 z-indexプロパティは、positionプロパティでstatic以外の値が指定されている要素に適用されます。
display
記述例値意味
display:block;blockp、div、ul、h1～h6などのタグの初期値
display:inline;inlinea、span、omgなどのタグの初期値
display:inline-block;inline-block並びはinline、中身はblock
display:none;none非表示
display:flex;flexブロックレベルのフレックスコンテナボックスを生成する
overflow
記述例値意味
overflow:visible;「visible」初期値内容がボックスに収まらない場合、ボックスからはみ出して表示される
overflow:hidden;「hidden」収まらない部分は非表示
スクロールバーなどは表示されない
※clearfixと同じ効果として扱われる場合がある
overflow:scroll;「scroll」収まらない部分はボックスからはみ出さない。内容が収まらない場合には、スクロールバーなどが表示される