表（table）系| 記述 | 意味 |
|---|
| border-collapse: collapse; | 隣り合う線を1本にしろ | | table-layout: fixed; | 列幅は均等優先 | | table-layout: auto; | 文字量優先 | | border-spacing: 0; | セル間の隙間なし | | empty-cells: hide; | 空セルを隠せ | | caption-side: top; | 表題を上に置け | | caption-side: bottom; | 表題を下に置け |
サイズ系| 記述 | 意味 |
|---|
| width: auto; | 幅はおまかせ | | height: auto; | 高さはおまかせ | | max-width: 100%; | 親より大きくなるな | | min-width: 100px; | これ以下になるな | | max-height: 300px; | これ以上になるな | | min-height: 50px; | これ以下になるな | | box-sizing: border-box; | 枠や余白込みで計算しろ |
文字系| 記述 | 意味 |
|---|
| line-height: normal; | 行間はおまかせします | | white-space: nowrap; | 改行するな | | overflow-wrap: break-word; | 長すぎたら途中で改行していいよ | | word-break: break-all; | どこでも改行してよい | | text-overflow: ellipsis; | 長すぎたら…にしろ | | text-align: left; | 左揃え | | text-align: center; | 中央揃え | | text-align: right; | 右揃え | | vertical-align: middle; | 上下中央 | | font-weight: bold; | 太字にしろ | | font-style: italic; | 斜体にしろ | | text-decoration: underline; | 下線を引け | | text-decoration: none; | 下線を消せ | | letter-spacing: 2px; | 文字間を広げろ | | letter-spacing: -1px; | 文字間を詰めろ |
はみ出し制御系| 記述 | 意味 |
|---|
| overflow: hidden; | はみ出したら隠せ | | overflow: auto; | 必要ならスクロールしろ | | overflow: scroll; | スクロールを付けろ |
背景・色系| 記述 | 意味 |
|---|
| background: transparent; | 背景なし | | background-color: yellow; | 背景を黄色にしろ | | color: red; | 文字を赤くしろ | | opacity: 0.5; | 半透明にしろ |
レイアウト系| 記述 | 意味 |
|---|
| display: block; | 1行使え | | display: inline; | 文字として並べろ | | display: inline-block; | 並びつつ幅も持て | | display: none; | 表示するな | | position: relative; | 今の位置を基準にしろ | | position: absolute; | 親を基準に自由配置しろ | | position: fixed; | 画面に固定しろ | | float: left; | 左へ寄れ | | float: right; | 右へ寄れ | | clear: both; | 回り込みを解除しろ |
余白系| 記述 | 意味 |
|---|
| margin: 0; | 外余白なし | | margin: auto; | 余白はおまかせ | | padding: 0; | 内余白なし | | padding: 10px; | 内側を10px空けろ |
枠線系| 記述 | 意味 |
|---|
| border: none; | 枠線なし | | border: 1px solid black; | 黒実線1px | | border-radius: 5px; | 角を丸めろ | | border-radius: 50%; | 円にしろ |
操作系| 記述 | 意味 |
|---|
| cursor: pointer; | 指マークにしろ | | cursor: grab; | つかめそうに見せろ | | cursor: not-allowed; | 禁止っぽく見せろ | | user-select: none; | 文字を選択させるな | | pointer-events: none; | クリックを無効にしろ |
その他| 記述 | 意味 |
|---|
| visibility: hidden; | 見せるな、でも場所は残せ | | z-index: 999; | 前面に出せ | | box-shadow: 0 0 10px gray; | 影を付けろ |
あ |
