レイアウト系プロパティ
- width プロパティ 内容の幅
box-sizing プロパティの値に content-box が指定されていると「content」の幅を指定し、border-box が指定されていると「content + padding + border」の合計値を指定します。
初期値は「auto」 - max-width プロパティ 幅の最大値
初期値は「none」 - min-width プロパティ 幅の最小値
初期値は「auto」 - height プロパティ 内容の高さ
box-sizing プロパティの値に content-box が指定されていると「content」の幅を指定し、border-box が指定されていると「content + padding + border」の合計値を指定します。
初期値は「auto」 - max-height プロパティ 高さの最大値
- min-heightプロパティ 高さの最小値
- float プロパティ 回り込み
初期値は「auto」 - clear プロパティ 回り込みを解除
初期値は「auto」 - position/top/left/bottom/right プロパティ 要素の配置方法
position: 配置方法; top: 上からの位置; bottom: 下からの位置;
left: 左からの位置; right: 右からの位置;
static（初期値）通常の配置を行います。この値のときには、top/bottom/left/right プロパティは、適用されません。relative相対位置への配置となります。position プロパティで static を指定した場合に表示される位置が基準位置になり top/bottom/left/right プロパティを使用して相対位置に配置されます。他の要素の配置には影響を与えません。absolute絶対位置への配置となります。親要素に position プロパティの static 以外の値が指定されている場合は、親要素の位置が基準位置になり top/bottom/left/right プロパティを使用して相対位置に配置されます。親要素に position プロパティの static 以外の値が指定されていない場合は、ウィンドウ全体が基準位置になります。本指定での親要素は直近の親要素だけでなく祖先要素が対象になります。本指定がされている要素の空間は作成されません。fixed絶対位置への配置となるのは、absolute と同じですがスクロールしても位置が固定されたままになります。本値が指定されている要素の空間は作成されません。sticky通常の配置を行いますが配置位置を指定する条件を満たすとフロートされ位置が固定されたままになります。本指定は、表示されている場所により他の指定と類似する動作をします。指定条件を満たしていない時は、static や relative と同様に元の領域が確保され要素が配置されますが指定条件を満たすと fixed のように指定条件の位置にとどまります。ヘッダー、フッター、サイドバーなどをフロートさせて固定位置に表示にする場合などで使用します。
（上／下／左／右からの位置）は、position プロパティと併用して配置の基準位置を正の値または負の値で指定します。初期値は「auto」
position プロパティの使用例
元の表示位置からの相対位置に配置元の表示位置（「position: static;（初期値）」プロパティで表示される位置）からの相対位置に配置する場合は、「position: relative;」プロパティを指定して top/bottom/left/right プロパティで配置する相対位置を指定します。
親要素からの相対位置に配置親要素からの相対位置に配置する場合は、親要素に「position: relative;」プロパティを指定して自要素に「position: absolute;」プロパティを指定します。相対位置は、top/bottom/left/right プロパティで配置する位置を指定します。本指定の場合は、親要素の横幅が継承されません。本例での親要素は直近の親要素だけでなく祖先要素が対象になります。
ページ全体からの相対位置に配置ページ全体からの相対位置に配置する場合は、親要素に position プロパティを指定しないで自要素に「position: absolute;」プロパティを指定します。相対位置は、top/bottom/left/right プロパティで配置する位置を指定します。本指定の場合は、親要素の横幅が継承されません。
画面（ウィンドウ）上の固定位置に配置画面上の固定位置に配置する場合は、「position: fixed;」プロパティを指定して top/bottom/left/right プロパティで配置する位置を指定します。本指定を行うと画面をスクロールしても表示位置は変化しません。本指定の場合は、親要素の横幅が継承されません。 - z-index プロパティ 重なりの順序方法
マイナス値も使用可能で数値が大きいほど前面（上）に表示されます。初期値は「auto」
position プロパティを指定していないか、position プロパティに static が指定されている時は、重なりの順序は適用されません。 - display プロパティ 要素の表示方法
- blockブロック属性（p,div,ul,h1～h6 タグなどの初期値）を指定。
inlineインライン属性（a,strong,span タグなどの初期値）を指定。
inline-blockインラインブロック属性（img タグなどの初期値）を指定
none非表示の属性を指定。flexblock 属性の Flex コンテナを指定。
inline-flexinline-block 属性の Flex コンテナを指定。gridblock 属性の Grid コンテナを指定。inline-gridinline-block 属性の Grid コンテナを指定。 - overflow プロパティ ボックスからあふれた内容の処理方法
visible（初期値）内容がボックスに収まらない場合は、ボックスからはみ出して表示。
hidden内容がボックスに収まらない場合は、はみだした部分は非表示。
本指定は、float プロパティで指定された回り込み指定を続く要素に影響を与えない効果（clear プロパティと同等）として使用することができます。scrollスクロールバーを使って全体を参照できるようにします。auto内容がボックスに収まらない時だけスクロールバーを表示して全体を参照できるようにします。
その他のプロパティ
- border-radius プロパティ ボーダーの丸み
- box-shadow プロパティ ボックスの影
ボックスの影値は、「水平方向の影のオフセット距離」・「垂直方向の影のオフセット距離」・「ぼかしの距離」・「広がりの距離」・「色」・「inset」の順でスペースで区切って指定します。ボックスの影値は、複数指定することができ複数指定する時はカンマ（,）で区切って指定します。ボックスの影値の初期値は「none」で影なし
「inset」を指定するとボックスの内側の影になります。 - box-sizing プロパティ ボックスサイズ計算
- content-box 初期値
width プロパティ、height プロパティの指定値にパディングとボーダーの幅と高さを含めない。（コンテンツ領域の幅と高さを指定）border-boxwidth プロパティ、height プロパティの指定値にパディングとボーダーの幅と高さを含める。（コンテンツ領域の幅と高さを小さくする） - content プロパティ 挿入コンテンツ
要素の直前または直後に文字列や画像などのコンテンツの挿入を指定します。
content プロパティを適用できるのは ::before 疑似要素や ::after 疑似要素だけです。content プロパティと一緒に font-size プロパティや color プロパティなどを指定した時は、挿入するコンテンツに適用されます。
文字列挿入する文字列をダブルクォーテーション（”）またはシングルクォーテーション（’）で囲って指定します。画像などのファイル「url(“ファイルパス”)」型式で挿入する画像などのファイルを指定します。 - object-fit プロパティ 画像トリミング object-fit: はめ込み方法;
containコンテンツのアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小してはめ込みます。
coverコンテンツのアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小してはめ込みます。オブジェクトコンテンツと要素のコンテンツボックスのアスペクト比が合わない場合は、オブジェクトの方が合うように切り取られます。
fillのコンテンツボックス全体を埋めるように拡大縮小してはめ込みます。（初期値）none
scale-downコンテンツは、none または contain が指定されたかのようにサイズが決められ、オブジェクトの実際のサイズが小さい方を採用します。 - object-position プロパティ 画像の配置位置指定
iframe タグ、img タグ、video タグの中身の配置位置を指定。配置位置は、以下の値で指定します。初期値は、「50% 50%」で、指定は、片方を省略することも可能です。横方向配置位置横方向の配置位置を以下の値で指定します。
left、right、center
left、right 数値（単位付き）
数値（単位付き）
縦方向配置位置縦方向の配置位置を以下の値で指定。
top、bottom、center
top、bottom 数値（単位付き）
数値（単位付き）
コメント