Html語アンチョコ

 

 Html語アンチョコ  
yy/mm/dd

表(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;影を付けろ
P