Edited at

CSS装飾(基本編) ~font-size / color / font-family~


はじめに

CSSの装飾をまとめていきたいと思います。

本日は、font-size(フォントサイズ)、color(カラー)、font-family(フォントファミリー)の3つです。

どれもよく見る装飾ですね。


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)の各色の分量を2桁ずつで指定します。

・色の強弱は「0123456789ABCDEF」の16進数で表し「00」が最小値、「FF」が最大値となります。

・アルファベットは小文字でも構いません。

記述例


h1 {

​ color: #FF0000;

}


「#FF0000」のように各色2桁がゾロ目の場合、「#FF00」というように3桁に省略しての記述も可能です。


font-family(フォントファミリー)

文字のフォントの種類を指定するスタイルは「font-family」プロパティを使用します。

値には「フォント名」または「総称フォントファミリー名」を指定します。

" ダブルクォート」で挟み、「, カンマ」で区切ります。

ブラウザーはフォントを左から順に読み込むので、一番優先度の高いフォントを一番左側に記述しましょう。

*Safari(Macintosh)ではフォント名をアルファベット表記にする必要があります。 例:「ヒラギノ角ゴ Pro W3」は「Hiragino Kaku Gothic Pro」と表記。

記述例


h1 {

​ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";

}