【CSS】頻繁に使うCSS

フォント

color: *
font-size: *
font-weight: *
font-family: *

詳細

color: *

テキストの色を表現するCSSです。背景色は、以下のコードを利用します。

background-color: * 

font-size: *

フォントのサイズを指定するコードです。「%」、「em」や、絶対数値の「px（ピクセル）、pt（ポイント）」などで指定できます。

font-weight: *

文字の太さを設定します。100～900 の 9段階で太さを指定することができます。

font-family: *

　Webページの文字書体となるフォントを指定します。値には「フォント名」、または「総称ファミリー名」を指定します。フォント名の指定はカンマ「, 」 で区切り複数指定でき、フォント名を複数指定した場合は、ユーザーの利用している環境にインストールされているフォントが指定順に優先して反映されます。

テキスト

text-align: *
text-decoration: *
line-height: *
letter-spacing: *
text-indent: *

詳細

text-align: *

テキストのleft（左寄せ）、right（右寄せ）、center（中央揃え）、justify（均等割付）を指定できます。

text-decoration: *

文字にoverline（上線）、underline（下線）、line-through（取消線）、blink（点滅、NN のみ）といった装飾を設定します。半角スペースで区切れば複数の値を同時に指定できます。 

line-height: *

行間の高さを設定します。数値、％、em　で指定します。

letter-spacing: *

文字間隔を設定します。数値に単位をつけて指定。負の値も指定できます。

text-indent: *

文章の１行目の字下げ（インデント）を設定します。数値に単位 em をつけて指定。％は親ボックスの幅に対する割合で指定。負の値も指定できます。

リスト

list-style-type: *
list-style-position: *
list-style-image: *

詳細

list-style-type: *

リストマークの種類を指定します。リストマークの種類として、よく使われる値（キーワード）は次のとおりです。

list-style-type: none
list-style-type: disc
list-style-type: circle
list-style-type: square
list-style-type: decimal

上から順に、「マークなし」「●」「〇」「■」「10進数（１，２，３，４，…）」です。

list-style-position: *

リストマークの位置を指定します。

list-style-image: *

リストマークに画像を利用します。

ボックス

margin: *
padding: *
border: *

詳細

margin: *

padding: *

余白を指定します。

border: *

上下左右のボーダーに対して、スタイル、幅、色を一括して設定します。

画像関係

background-image: *
background-position: *
background-repeat: *
background-attachment: *
vertical-align: *

詳細

background-image: *

背景画像をURIで指定します。

background-position: *

背景画像の表示開始位置を指定します。

background-repeat: *

背景画像の繰り返し表示のしかたを指定します。

background-attachment: *

背景画像の固定、移動を指定します。

vertical-align: *

縦方向の揃え位置を指定します。

幅と高さ

width: *
height: *

詳細

width: *

幅を指定します。px,rem,%などの単位を利用します。autoと記述した場合、関連するプロパティの値によって自動設定されます。

height: *

高さを指定します。px,rem,%などの単位を利用します。 autoと記述した場合、関連するプロパティの値によって自動設定されます。

---

表記

display: *

表示に影響を与えます。