css – プロパティ一覧

メジャーなやつ、自分がよく使うやつ、などをピックアップしてまとめておきます

領域間のスペース

 

/* まとめて指定 */
.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;
}

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です