font-sizeプロパティ
- px : 絶対値
- em : 親要素のfont-sizeを１とした時の倍率.
- rem : ルート要素のfont-sizeを１とした時の倍率.
margin・paddingプロパティ
例)
margin 10px : 全ての余白指定.
margin 10px 20px : 上下の余白指定.
margin 10px 20px 30px: 上、左右、下の順に余白指定.
margin 10px 20px 30px 40px: 全ての余白指定.
div要素のブロックレベルの要素を親要素に対して中央寄せしたい場合は左右marginをautoにすればよい.
box-sizingプロパティ
要素の幅と高さの中にpaddingとborderを含めるかどうか変更できる.
親要素からはみ出ることがなくレスポンスデザインに向くデザインとなる.
尚box-sizing: inheritとすれば親要素の指定を引き継ぐことができる.
displayプロパティ
diplayは要素の表示形式を決める.
●block
前後に改行が入る.
高さや幅,paddin,marginが適用可能.要素は幅いっぱいに広がる.
●inline
改行が入らず横並びに続いていく.ブロック要素の中に入ることが多い.
高さや幅は指定できないが、paddin,marginは左右方向にのみ指定可能.
text-alignは指定可能.
●inline-block
名前の通りblockとinlineの要素を併せ持つ.
inlineと異なり途中で改行されないので綺麗に整列できる.
positionプロパティ
positionプロパティを用いることで要素の位置を指定ピクセルだけ動かしたり要素の上に別の要素を重ねたり、要素を画面の決まった位置に要素を固定することができる.
top,bottom,left,rightを用いて位置を調節できるが基本的には上からの距離と左からの距離を指定すれば位置は決まるので、topとleftを用いる.
- static : 位置を固定.topなどで指定しても位置は不変.
- relative : topやleftの値を変えることで本来あるべき位置から対象をずらすことができる.
- absolute : ずらすベースが親要素となる.
- fixed : スクロールしても位置を固定することができる.ヘッダーなどに用いる.
vertical-allignプロパティ
テキストの縦軸の位置を指定するためのプロパティ.
vertical-align: ○○○で指定する.ただdivなどのブロック要素に対しては指定してもうまく動かないので注意.
before after
::afterと::beforeは、疑似要素と呼ばれ、HTMLには書かれていない要素を作成できる.
box-shadowプロパティ
box-shadow: [右][下][ぼかし][拡張][影の色];で指定.
insetを指定することで内部に影ができる.
overflowプロパティ
要素のボックスからはみ出た部分をどう扱うか指定するプロパティ.
min max widthプロパティ
当然heightにも適用可能.display: inline-block;とともに使用.
transformプロパティ
floatとclearfix
ある要素のなかで横並びのレイアウトを実現するためにfolatを用いると、親クラスの高さが消えてしまい表示が崩れてしまう可能性がある.
解決策としてclearプロパティを末尾に追加することで子要素の回り込みをクリアすることができる.
nthoftypeプロパティ
要素が複数並んでいた場合n番目かを指定することによって特別な処理を施すことができる.
cssカウンタ
親要素でカウンタをリセットし、子要素でインクリメント、表示を行う.
z-index
通常ファイルの上から記述するため記載順に積み上げていく形式になる.
この順序を入れ替えるにはzindxプロパティを用いて優先順位を変える.