見てわかる
プロパティ図鑑を見るborder
要素のまわりに境界線を描くプロパティ。太さ・線のかたち・色を組み合わせます。
padding
contentとborderの間に内側の余白をつくるプロパティ。4方向の広がりを指定します。
border-radius
要素の角を丸くするプロパティ。4つの角をまとめて、または個別に指定します。
margin
borderの外側に余白をつくるプロパティ。要素どうしの距離を調整します。
color
文字やcurrentColorを使う装飾の色を指定するプロパティ。子要素へ継承されます。
background-color
要素の背景を単色で塗るプロパティ。文字色とは別に指定します。
flex
Flexboxの子要素が伸びる・縮む・基準幅をまとめて指定するプロパティです。
box-sizing
widthとheightにpadding・borderを含めるかを切り替えるプロパティです。
display
要素をブロック・インライン・Flexbox・Gridなど、どの形式で表示するか決めます。
width
要素の横幅を指定するプロパティ。pxや%などで、親要素の中での広がりを決めます。
height
要素の高さを指定するプロパティ。pxや%などで、箱の縦方向の大きさを決めます。
max-width
要素が広がれる横幅の上限を決めるプロパティ。画面が狭いときは柔軟に縮みます。
min-width
要素が縮められる横幅の下限を決めるプロパティ。指定した最小幅より小さくなりません。
position
要素を通常の流れ・親要素・画面など、どの基準で配置するかを決めるプロパティです。
overflow
箱からはみ出した内容を、そのまま表示するか、切り取るか、スクロール可能にするか決めます。
opacity
要素全体の不透明度を指定するプロパティ。0から1の値で、子要素もまとめて透けさせます。
font-size
文字の大きさを指定するプロパティ。px・rem・em・%などで読みやすいサイズを決めます。
font-weight
文字の太さを指定するプロパティ。normal・boldや数値で、読みやすさと強調を調整します。
line-height
行の高さを指定するプロパティ。複数行の文章の間隔を整え、読みやすさを調整します。
text-align
ブロック内の文字やインライン要素を、左・中央・右・両端へ横方向に揃えるプロパティです。
gap
Grid・Flexbox・段組みで、行や列に並ぶ要素どうしのすき間を指定するプロパティです。
justify-content
Flexboxの主軸やGridのインライン軸で、余った空間を使って内容を揃え、分配するプロパティです。
align-items
Flexboxの交差軸やGridのブロック軸で、項目の位置や伸び方をまとめて揃えるプロパティです。
grid-template-columns
Gridレイアウトの列数と、それぞれの列幅を指定するプロパティ。比率や繰り返しも設定できます。
transition
要素の状態が切り替わるとき、変化にかける時間・速度の変わり方・待ち時間を指定します。
transform
要素を元の配置から見た目上移動・回転・拡大縮小するプロパティ。変形関数を組み合わせられます。
box-shadow
要素の外側や内側へ影を描くプロパティ。位置・ぼかし・広がり・色を組み合わせます。
flex-direction
Flexboxの主軸をインライン軸・ブロック軸のどちらにするか、通常または逆向きにするかを指定します。
flex-wrap
Flexboxの項目を1行のまま並べるか、複数行へ折り返すか、行を重ねる向きとともに指定します。
align-content
Flexboxの複数行やGrid全体を、交差軸・ブロック軸の余った空間へ配置・分配します。
order
FlexboxやGridの項目を、整数の小さい順に見た目上並べ替えるプロパティです。
z-index
位置指定要素やFlexbox・Gridの項目が重なるとき、整数で前後の重なり順を指定します。
min-height
要素の高さに下限を設けるプロパティ。内容が少ないときは最低高を保ち、多いときは伸びます。
max-height
要素が広がれる高さに上限を設けるプロパティ。上限を超えた内容はoverflowで扱います。
aspect-ratio
要素の幅と高さの望ましい比率を指定するプロパティ。横幅が変わっても形を保てます。
object-fit
画像や動画を固定サイズの枠へどう収めるかを指定するプロパティ。全体表示や切り抜きを選べます。
visibility
要素が占める空間を残したまま、表示・非表示を切り替えるプロパティです。
object-position
画像や動画の中身を、決めた枠のどの位置に合わせて表示するかを指定するプロパティです。
background-size
要素の背景画像を、元の大きさ・枠を覆う大きさ・全体が収まる大きさなどへ拡大縮小します。