技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

CSSのチートシート 中編

CSSチートシート 中編

CSSチートシート 前編の続き

フォントの指定方法

font-familyタグを利用すればフォントの指定ができます。

1. 書き方

font-family: フォント名;

font-familuで指定されたフォントが閲覧者のPCにダウンロードされていない場合は利用できないケースが多々ある。そのために、何個かフォントを指定する方法もある。

font-family: "Times New Roman", Times, serif;

Times New Romanがあればそれ。なければ、Times。それもなければserif

文字の太さの指定

font-weightタグ で太さ指定が可能。

言葉で指定する
normal : 通常
bold: 太い
bolder: やや太い
lighter: やや細い
inherit: 親要素を引き継ぐ
p {
  font-weight: bold;
}
数字で指定する
 100 ~ 900で指定する
p {
  font-weight: 900px;
}

文字スタイルの指定

font-style

- normal: 通常
- italic: 斜体
- inherit: 親要素の指定を継承する

font-variant

- normal: 通常
- small-caps: 全ての文字と大文字書記で表記
- inherit: 親要素の指定を継承する

font

fontを細かく指定したい場合はfont指定を利用することをオススメします。

font: <font-style><font-variant><font-weight><font-size>/<line-height><font-family>
書き方例
h1 { font: italic small-caps lighter 1.7em sans-serif; }

行間の指定方法

行間の指定方法はline-heightで変更できます。 line-heightが文字の上下のサイズを指します。 f:id:lhiroki1205:20190322105151p:plain

- px
- em
- ex
- %
cssの書き方の例
p { line-height: 1.5em; }

CSSチートシート 後編に続く

参考サイト

www.youtube.com