当サイトはアフィリエイト広告を利用しています

CSS要素

文字サイズ font-size

文字サイズを指定する

コード

p {
    font-size: 20px;
}

よく使われる指定方法は下記3つ。
px ピクセルサイズで指定
%  親要素の文字サイズを100%とした相対値で指定
em 親要素の文字サイズを1emとした相対値で指定

デスクトップとスマホなど、複数の画面サイズに対応したレスポンシブデザインを採用する場合、親要素だけをpxで指定して、子要素は全て%, emを使った相対値で指定する。そうすれば、親の文字サイズを画面に合わせて変更するだけで全て対応できる。

文字の太さ font-weight

コード

p {
    font-weight: 400;
}

400を基準として、100 〜 900 の9段階で太さを指定する。
100単位であって、250といった半端な数字は指定できない。
100が最も細く、900が最も太い。
数字を変更しても、フォント側で用意されていない場合もあって変化しないこともある。
(特に日本語フォントは漢字の兼ね合いもあって変化しないケースが多々ある)
数字以外にキーワードでも指定できる。
normal 標準(400)
bold 太字(700)
lighter 親要素から相対的に一段階細くする
bolder 親要素から相対的に一段階太くする

行間隔を指定する line-height

コード

p {
    line-height: 1.5;
}

数字のみの指定だと文字サイズの倍数扱いになる。
1 と指定すれば行間隔がない表示になる。
数字のみで倍数指定するのが一般的。
他に、
normal(ブラウザ判断)
px, %, em, など

水平方向の揃え方(テキスト、画像) text-align

コード

p {
    text-align: left;
}

left 左揃え
center 中央揃え
right 右揃え
justify 均等割付

文字色指定 color

コード

p {
    color: red;
}

red, blueなどのカラー名以外に16進数のカラーコードが指定できる。

16進数
color: #ff0000

rgb( red, green, blue);
color: rgb(255, 0, 0);

半透明指定あり。 1 〜 0 の間を小数で指定(1:不透明 0:完全な透明 0.5:半透明)
rgba( red, green, blue, alpha);
color: rgba(255, 0, 0, 0.5);

%指定
rgb( red%, green%, blue% );
color:rgb(100%, 0%, 0%);

背景色 background-color

コード

p {
    background-color: red;
}

指定できる値は文字色と同様