こちらでは簡単格安ホームページ作成サイト - FunMaker［ファンメイカー］で作成したホームページの文字フォントのサイズに対してのデザイン変更方法を解説します。
対象セレクタとCSSプロパティ
FunMakerにおいて、文字フォントを指定するセレクタは、『html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, .f-container .f-title』になります。
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, .f-container .f-title {
font-size: 値;
}
フォントサイズに使用できる値一覧
フォントサイズに入力できる値は、数値や％の他にも『small』などの言葉の値があります。
以下に、フォントサイズに利用できる値とその意味、使用例を紹介します。
- em
- 意 味：要素のフォントの高さを1emとしたときの相対指定。
- 使用例：『font-size: 2em;』
- ex
- 意 味：要素のx(小文字エックス)のフォントサイズの高さに対する相対指定。
- 使用例：『font-size: 2ex;』『font-style: oblique;』
- px
- 意 味：ピクセル。ディスプレイの画素数。 何個分のピクセルを使って表示するかを指定します。
- 使用例：『font-size: 15px;』
- %
- 意 味：標準となる文字サイズを基準とした指定。
- 使用例：『font-size: 80%;』
- xx-small
- 意 味：『x-small』よりも小さなサイズ。
- 使用例：『font-size: xx-small;』
- x-small
- 意 味：『small』よりも小さなサイズ。
- 使用例：『font-size: x-small;』
- small
- 意 味：『medium』よりも小さなサイズ。
- 使用例：『font-size: small;』
- medium
- 意 味：標準サイズ。
- 使用例：『font-size: medium;』
- large
- 意 味：『medium』よりも大きなサイズ。
- 使用例：『font-size: large;』
- x-large
- 意 味：『large』よりも大きなサイズ。
- 使用例：『font-size: x-large;』
- xx-large
- 意 味：『x-large』よりも大きなサイズ。
- 使用例：『font-size: xx-large;』
- smaller
- 意 味：現在よりも一段階小さなサイズ。
- 使用例：『font-size: smaller;』
- larger
- 意 味：現在よりも一段階大きなサイズ。
- 使用例：『font-size: larger;』