はじめに
CSSの装飾をまとめていきたいと思います。
本日は、font-size(フォントサイズ)、color(カラー)、font-family(フォントファミリー)の３つです。
どれもよく見る装飾ですね。
font-size(フォントサイズ)
文字の大きさを指定するスタイルは「font-size」プロパティを使用します。
値には「数値＋単位」で指定します。
単位の設定につて
| 各種CSSプロパティで共通して使用できる単位は以下のものがあります。 | |
|---|---|
| px | ピクセル。画面の解像度によって表示サイズが異なります。 |
| em | エム。1emは使用しているフォントの高さです。 |
| ex | エックスハイト。1exは使用しているフォントの英数字の高さです。 |
| % | パーセント。設定する対象により割合が異なります。 |
記述例
ruby:qiita.rb
puts "hello word"
h1 {
font-size: 14px;
}
color(カラー)
文字の色を指定するスタイルは「color」プロパティを使用します。
カラーコード（16進数）
・「#」記号に続けて赤(R)緑(G)青(B)の各色の分量を２桁ずつで指定します。
・色の強弱は「0123456789ABCDEF」の16進数で表し「00」が最小値、「FF」が最大値となります。
・アルファベットは小文字でも構いません。
記述例
h1 {
color: #FF0000;
}
「#FF0000」のように各色２桁がゾロ目の場合、「#FF00」というように3桁に省略しての記述も可能です。
font-family(フォントファミリー)
文字のフォントの種類を指定するスタイルは「font-family」プロパティを使用します。
値には「フォント名」または「総称フォントファミリー名」を指定します。
「" ダブルクォート」で挟み、「, カンマ」で区切ります。
ブラウザーはフォントを左から順に読み込むので、一番優先度の高いフォントを一番左側に記述しましょう。
＊Safari（Macintosh)ではフォント名をアルファベット表記にする必要があります。 例：「ヒラギノ角ゴ Pro W3」は「Hiragino Kaku Gothic Pro」と表記。
記述例
h1 {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
}