メジャーなやつ、自分がよく使うやつ、などをピックアップしてまとめておきます
領域間のスペース
/* まとめて指定 */ .sample1 { margin: 1px 2px 3px 4px; /*上 右 下 左*/ } /* 個別に指定 */ .sample2 { margin-top: 1px; /*上*/ margin-bottom: 2px; /*下*/ margin-left: 3px; /*左*/ margin-right: 4px; /*右*/ }
値、単位:px,em,rem など
領域内のスペース
/* まとめて指定 */ .sample1 { padding: 1px 2px 3px 4px; /*上 右 下 左*/ } /* 個別に指定 */ .sample2 { padding-top: 1px; /*上*/ padding-bottom: 2px; /*下*/ padding-left: 3px /*左*/ padding-right: 4px; /*右*/ }
値、単位:px,em,rem など
幅
.sample1 { width: 100%; } .sample2 { max-width:200px; /*最大値*/ min-width:100px; /*最小値*/ }
値、単位:px,% など
文字
.sample { color: #FFFFFF; /*文字色*/ font-weight: bold; /*太さ normal,bold,200 など*/ text-align: center; /*水平方向の文字位置*/ vertical-align: middle; /*垂直方向の文字位置*/ text-decoration: underline; /*下線*/ /*上線 overline*/ /*打消し線 line-through*/ /*点滅 blink*/ }
背景色
.sample { background: #FFFFFF; }
値、単位:#FFFFFF など
ボーダー、線
.sample1 { border: solid 1px #333333; } .sample2 { border-top: solid 1px #0000ff; /*上 solid 1本線*/ border-bottom: double 1px #0000ff; /*下 double 2本線*/ border-left: dashed 1px #0000ff; /*左 dashed 破線*/ border-right: dotted 1px #0000ff; /*右 dotted 点線*/ border-spacing: 10px 100px; /*左右 上下*/ }
値、単位:solid px #FFFFFF など
角の丸み
/* まとめて指定 */ .sample1 { border-radius: 10px 2px 5px 5px / 5px 2px 5px 2px; /* 水平方向 / 垂直方向 */ /* 左上 右上 右下 左下 */ } /* 個別に指定 */ .sample2 { border-top-left-radius: 1px; /*上*/ border-top-right-radius: 2px; /*下*/ border-bottom-left-radius: 3px; /*左*/ border-bottom-right-radius: 4px; /*右*/ }
値、単位:px,em,rem など
表
/* セルの隙間を除去 */ .sample1 { border-collapse: collapse; } /* 隙間あり */ .sample2 { border-collapse:separate; border-spacing:2px; } /* 表のコピー禁止 */ .sample3 { -ms-user-select: none; -webkit-user-select: none; user-select: none; cursor: default; } /* セルの幅を固定 */ table.sample4 { table-layout: fixed; } td.sample5 { word-wrap: break-word; }