文字や文章の装飾（Decoration）
| font-size | フォントのサイズを指定 | The font-size property sets the size of the text. px、em、rem、% など 【Keyword】 xx-small、x-small、small、medium、 large、x-large、xx-large |
|---|---|---|
| font-family | フォントの種類を指定 | The font family of a text is set with the font-family property. フォントの名前を記述 【Keyword】 sans-serif（ゴシック系）、serif（明朝系）、 cursive（筆記体）など |
| font-weight | フォントの太さを指定 | The font-weight property specifies the weight of a font |
| line-height | 行の高さを指定 |
px、em、% |
| text-aline | テキストを揃える位置を指定 | left、right、center、justify |
| text-decoration | テキストに線を付ける指定 |
none、underline、overline、line-through、blink |
| letter-spacing | 文字の間隔を指定 | px、rem、% |
| color | 文字に色をつける | The color property is used to set the color of the text. カラーコード（例）#dc143c 色の名前（例）red、blue、green |
| font | フォントに関する指定を まとめて行う |
font-style、font-variant、font-weight、 font-size、line-height、font-family |
参考ページ：HTMLの基本とCSS「テキストCSS」
背景（バックグラウンド）の装飾（Decoration）
| background-color | 背景色を指定 | カラーコード（例）#dc143c 色の名前（例）red、blue、green |
|---|---|---|
| background-image | 背景画像を指定 | url／画像ファイルの指定 none／背景画像を使用しない |
| background-repeat | 背景画像の繰り返し表示指定 | repeat／たて・よこ繰り返して表示 repeat-x／よこ方向に繰り返して表示 repeat-y／たて方向に繰り返して表示 no-repeat／繰り返さない |
| background-size | 背景画像の大きさを指定 |
px、rem、% 【Keyword】 cover、containで指定 |
| background-position | 背景画像を表示する位置指定 | px、rem、% 【Keyword】 よこ方向／left、center、right たて方向／top、center、bottom |
| background | 背景に関する指定を まとめて行う |
background-color、background-image、 background-repeat、background-position、 background-attachment |
参考ページ：HTMLの基本とCSS「背景のCSS」
幅と高さ
| width | 幅を指定 | px、rem、% 状況に応じて自動設定 auto |
|---|---|---|
| height | 高さを指定 | px、rem、% 状況に応じて自動設定 auto |
余白
| margin | 外側の余白 上・右・下・左の順に指定 |
px、rem、% 状況に応じて自動設定 auto |
|---|---|---|
| margin-top | 外側の上部分の余白 | px、rem、% 状況に応じて自動設定 auto |
| margin-bottom | 外側の下部分の余白 | px、rem、% 状況に応じて自動設定 auto |
| margin-left | 外側の左部分の余白 |
px、rem、% 状況に応じて自動設定 auto |
| margin-right | 外側の右部分の余白 | px、rem、% 状況に応じて自動設定 auto |
| padding | 内側の余白 上・右・下・左の順に指定 |
px、rem、% 状況に応じて自動設定 auto |
| padding-top | 内側の上部分の余白 | px、rem、% 状況に応じて自動設定 auto |
| padding-bottom | 内側の下部分の余白 | px、rem、% 状況に応じて自動設定 auto |
| padding-left | 内側の左部分の余白 | px、rem、% 状況に応じて自動設定 auto |
| padding-right | 内側の右部分の余白 | px、rem、% 状況に応じて自動設定 auto |
参考ページ：HTMLの基本とCSS「paddingとmargin」
線（Line）
| border-width | 線の太さを指定 | px、rem、% 【Keyword】 thin、medium、thick |
|---|---|---|
| border-style | 線の種類を指定 | none、solid、double、dashed、dotted、 groove、ridge、inset、outset |
| border-color | 線の色を指定 | カラーコード（例）#dc143c 色の名前（例）red、blue、green |
| border-top | 上部の線の色・スタイル・太さを まとめて指定 |
border-width、border-style、border-color の値を指定 |
| border-bottom | 下部の線の色・スタイル・太さを まとめて指定 |
border-width、border-style、border-color の値を指定 |
| border-left | 左の線の色・スタイル・太さを まとめて指定 |
border-width、border-style、border-color の値を指定 |
| border-right | 右の線の色・スタイル・太さを まとめて指定 |
border-width、border-style、border-color の値を指定 |
| border | 線の色・スタイル・太さを まとめて指定 |
border-width、border-style、border-color の値を指定 |
表示・配置
| overflow | はみ出た要素の表示方法を指定 | visible：はみ出たままで表示 Default. The overflow is not clipped. The content renders outside the element's box hidden ：はみ出た部分が隠れる The overflow is clipped, and the rest of the content will be invisible scroll：はみ出た部分がスクロール The overflow is clipped, and a scrollbar is added to see the rest of the content auto：ラウザにより表示が変わる Similar to scroll, but it adds scrollbars only when necessary |
|---|---|---|
| position | ボックスの配置方法（基準位置）を指定する | static：特に配置方法を指定しない HTML elements are positioned static by default. relative：現在の表示位置から相対的に要素の位置を動かす An element with position: relative is positioned relative to its normal position. fixed：親要素を基準に、絶対的な位置を指定する An element with position: fixed is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. absolute：画面のきまった位置に固定する An element with position: absolute is positioned relative to the nearest positioned ancestor |
リスト
| list-style-type | リストマーカーの種類を指定 | none、disc、circle、square、decimal、 decimal-leading-zero、lower-roman、 upper-romam、cjk-ideographic、hiragana-iroha、 katakana-iroha、lower-alpha、lower-latin、 upper-alpha、upper-liatin、lower-greek、 hebrew、armenian、georgian |
|---|---|---|
| list-style-position | リストマーカーの表示位置を指定 | outside／ボックスの外側に表示 indide／ボックスの内側に表示 |
| list-style-image | リストマーカーに使う画像を指定 | url／画像ファイルの指定 none／指定しない |
| list-style | リストマーカーの種類・位置・画像を まとめて指定 |
list-style-type、list-style-position、 list-style-imageの値を指定 |
参考ページ：HTMLの基本とCSS「リストの装飾」
