文字設定 - font

文字設定 - font

• 文字の修飾
• ページ全体に反映したい場合は「body」に指定します（継承）

文字のプロパティ

• color : 文字の色
• font-size : 文字の大きさ
• font-family : フォントの種類
• font-weight : 文字の太さ
• font-style : 文字のスタイル
• line-height : 文章の行間

個別の値が指定されなかった場合は、それぞれの初期値が設定されます。

font-size

• 文字の表示される大きさ
• 単位は、「px、em、rem、％、vw」などが設定できます
  • px（画面サイズの可変や、他要素の単位や大きさに関わらずサイズが固定される絶対値です）
  • ％（指定する要素の親要素に対する相対値です）
  • em（親要素のフォントサイズに影響を受ける単位です）
  • rem（ルート要素のフォントサイズが基準になります）
  • vw（vwは「viewport width」の略で、画面幅を100とした時の単位になるため、1vwであればビューポート幅の 1%ということになります）

font-family

• テキストP.081
• 複数の書体名を記述する場合は、頻度の少ないものから順に記述し、最後に「総称ファミリー名」を記述します

《一般的な記述例》

• Neue, [nɔ́Yə]-ドイツ語：ノイエ（新しい）

body {
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

• 最小指定は「sans-serif（総称ファミリー名）」のみ、各ブラウザーではデバイスフォントで表示されます

body {
  font-family:  sans-serif;
}

文字色・背景色

• 16進数：hexadecimal number
• #：number
• 0123456789ABCDEF（16個）
• RGBを2個ずつの数字を割り振る
• 2個の左側の数字が明度(Brightness)、右側の数字が彩度(Saturation)

CSSで定義されている147色について

• redやgreenといった、CSSで定義されている色は以下でも確認することができます。全部で147色あるようです。
• http://www.147colors.com/

www.colors.commutercreative.com

16進数のRGB(Red/Green/Blueviolet)

• 色をあらわす16進数の表記は、先頭から2桁ずつ赤、緑、青の色の強さをあらわします
• #FFFF00 だったら 赤=FF / 緑=FF / 青=00 となります

例

• #000000（黒）
• #FFFFFF（白）
• Hue（色相）・Brightness（明度） ・Saturation（彩度）

RGBA（不透明度あり）

• テキストP.079
• 不透明度（alpha）
• 完全透明：0　完全不透明：1 の間で指定します

h1 {
  color: rgba(100, 189, 178, 0.7);
}