よく使うプロパティ - CSS

color

文字の色を指定します。

指定するには、キーワード、rgb、rgba、カラーコードで指定できます

h1 {
  color: red;
  color: rgb(255, 0, 0);
  color: #ff0000;
  color: rgba(255,0,0,0.5)
}

font-size

文字の大きさを指定します。

h1 {
  font-size: xx-small;
  font-size: x-small;
  font-size: small;
  font-size: medium;
  font-size: large;
  font-size: x-large;
  font-size: xx-large;
  font-size: xxx-large;
  font-size: smaller;
  font-size: larger;
  font-size: 12px;
  font-size: 0.8em;
  font-size: 1.6rem;
  font-size: 80%;
}

font-weight

文字の太さを指定します

h1 {
  font-weight: normal;
  font-weight: bold;
  font-weight: 900;
}

font-family

フォントの種類を指定します。

間に半角スペースを含むフォント名の場合は「 ''(クオーテーション) 」で囲みます。

左側に書かれたフォントが優先されます。

h1 { font-family: Arial, sans-serif; }

line-height

行間を指定します。

指定する単位は、px、em、%、単位なしが使用できます。

h1 { line-height: 2; }

letter-spacing

文字同士の間隔を指定します。

指定する単位は、px、em があります。

h1 { letter-spacing: 0.5em; }

text-align

インライン要素に対して水平方向の揃え方を指定します。

h1 { text-align: center; }

width

要素の横幅を指定します。

単位は、px、% などを使います。

h1 { width: 300px; }

height

要素の高さを指定します。

単位は、px、% などを使います。

h1 { height: 300px; }

padding

要素の内側の余白を指定します。

単位は、px、% などを使います。

h1 { padding: 10px; }

margin

要素の外側の余白を指定します。

単位は、px、% などを使います。

h1 { margin: 10px; }

border

要素の周りの線を指定します。

h1 { border: 1px solid red; }

border-radius

要素の角を丸めます。

h1 { 
  border: 1px solid;
  border-radius: 2px;
}

background

背景に関するスタイルを指定します。

h1 { background: red; }

text-decoration

文字の装飾を指定します。

h1 { text-decoration: underline; }
a { text-decoration: none; }