見える開発
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
要素の背景画像を、元の大きさ・枠を覆う大きさ・全体が収まる大きさなどへ拡大縮小します。
background-position
要素の背景画像を、決めた表示領域の左上・中央・右下など、どの位置へ合わせるか指定します。
background-repeat
背景画像を縦・横・両方向へ繰り返すか、1枚だけ表示するか、間隔や大きさを調整して並べるか決めます。
background-image
要素の背景へ画像ファイルやグラデーションを描き、複数の画像レイヤーを重ねられるプロパティです。
background-origin
背景画像をborder・padding・contentのどの領域を基準に配置するか決めるプロパティです。
background-clip
要素の背景をborder・padding・contentのどの領域まで描画するか決めるプロパティです。
background-attachment
背景画像を要素・内容・ビューポートのどこに固定し、スクロールに追従させるか決めます。
background
背景の色・画像・位置・大きさ・繰り返し・固定方法を、1つの宣言にまとめて指定します。
letter-spacing
文字どうしの間隔を、通常より狭くしたり広くしたりするプロパティです。
word-spacing
文章に含まれる単語どうしの間隔を、通常より狭くしたり広くしたりするプロパティです。
white-space
要素内の連続する空白や改行を残すかまとめるか、文章を自動で折り返すか指定します。
overflow-wrap
長いURLや分割できない単語が行からはみ出すとき、文字列の途中で折り返してよいか指定します。
word-break
英単語や日本語が行末へ届いたとき、文字列の途中で改行してよいか規則を指定します。
text-overflow
1行からはみ出した文字をそのまま切るか、省略記号で続きがあることを示すか指定します。
hyphens
英単語を行末で分けるとき、ハイフンを付ける位置を手動または自動で決めます。
text-transform
元の文字列を変えずに、英字を大文字・小文字・各単語の先頭を大文字へ表示変換します。
font-style
文字を通常体・イタリック体・斜体のどれで表示するか選び、obliqueでは傾きの角度も指定できます。
font-family
使用する書体を優先順に並べ、利用できない場合に備えて一般ファミリーまで指定します。
font
文字のスタイル・太さ・大きさ・行間・書体を、決められた順番で1つの宣言にまとめます。
border-color
要素の境界線の色を、1〜4つの値で上・右・下・左の各辺へ指定します。
border-width
要素の境界線の太さを、1〜4つの値で上・右・下・左の各辺へ指定します。
border-style
要素の境界線のかたちを、実線・破線・点線などから選び、1〜4つの値で各辺へ指定します。
outline
要素のborderより外側へ、レイアウトを動かさずに太さ・線種・色を組み合わせた外枠を描きます。
outline-offset
要素のborderとoutlineの間隔を、負の値・0・正の長さで内側または外側へ調整します。
text-decoration
文字へ下線・上線・取り消し線を引き、線の形・色・太さも1つの宣言で指定します。
text-decoration-line
文字の下・上・中央のどこへ装飾線を引くか選び、複数の線も組み合わせて指定します。
text-decoration-style
文字へ引いた装飾線を、実線・2本線・点線・破線・波線のいずれかで描きます。
text-decoration-color
下線・上線・取り消し線など、文字へ引いた装飾線の色を文字色とは別に指定します。
text-decoration-thickness
下線・上線・取り消し線など、文字へ引いた装飾線の太さを書体・長さ・割合で指定します。
text-underline-offset
文字へ引いた下線を本来の位置からどれだけ離すか、長さや割合で距離を指定します。
text-underline-position
横書きの下線を文字全体の下へ置き、縦書きの傍線を左右のどちらへ置くか指定します。
text-shadow
文字の形に沿う影の横・縦位置、ぼかし、色を指定し、複数の影も重ねられます。
text-indent
段落の先頭行をインライン開始側からどれだけ字下げするか、長さや割合で指定します。