cman.jp > WEBページ作成TOP > CSSリファレンス > 「文字の大きさ」
WEBページ作成
広告
font-size 「フォントのサイズ（大きさ）を指定」
font-size プロパティは、使用するフォントのサイズ（大きさ）指定することができます。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 2.1 3.0で拡張 | 全て | する |
広告
font-size の値
【構文】
font-size : 値;| font-size [フォントの大きさ] ( サンプル ) | |
|---|---|
| font-size: 20pt; font-size: 20px; font-size: 0.5in; font-size: 1cm; font-size: 15mm; font-size: 1.2pc; |
絶対サイズで指定 「長さ・大きさの単位」参照 |
| font-size: 150%; font-size: 3ex; font-size: 3em; font-size: 3rem; |
相対サイズで指定 「長さ・大きさの単位」参照 |
| font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; |
適用されているフォントサイズを「medium」として、上下3段階を表します |
| font-size: smaller; font-size: larger; |
smallerは、1段小さく largerは、1段大きく |
| font-size: initial; font-size: inherit; font-size: unset; |
initialは、継承を無視してデフォルトのfont-sizeが適用されます。 inheritは、強制的に親要素を継承する。 |
font-size のサンプル
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<style type="text/css">
html {
font-size: 40px;
}
p {
margin:0;
padding:5px;
}
</style>
</head>
<body>
<p>BODYは【font-size:40px】</p>
<div style="font-size: 0.6em;border: 1px solid #333;padding:10px">
<p>ここは【font-size: 0.6em】「40px × 0.6em ＝ 24px」</p>
<div style="font-size: 0.6em;border: 1px solid #333;padding:10px">
<p>ここは【font-size: 0.6em】「24px × 0.6em ＝ 14.4px』</p>
</div>
<div style="font-size: 0.6rem;border: 1px solid #333;padding:10px">
<p>ここは【font-size: 0.6rem】「40px × 0.6em ＝ 24px」</p>
</div>
</div>
</body>
</html>
関連するCSSプロパティ
| font-style | フォントのスタイル（標準／斜体）を指定 |
| font-variant | フォントをスモールキャップ（英小文字の表示方法）を指定 |
| font-weight | フォントの太さを指定 |
| font-size | フォントのサイズを指定 |
| font-family | フォントの種類を指定 |
| line-height | 1行の高さを指定 |
| @font-face | Webフォントの利用 |
| 関連するCSS(STYLE) | |
|---|---|
| font | 文字のデザイン |
| font-family | フォント |
| font-feature-settings | OpenTypeフォントの字形の切替え |
| font-kerning | 字間スペース |
| font-language-override | 言語を一時的に変更 |
| font-size-adjust | 文字サイズの自動調節 |
| font-stretch | フォントの形状（幅広・幅狭） |
| font-style | 斜体のスタイル |
| font-synthesis | 太字や斜体を持たないフォントの表示方法 |
| font-variant | フォントの変換ルール |
| font-variant-alternates | 代替文字の置き換え指定 |
| font-variant-caps | 英大文字での表示制御 |
| font-variant-east-asian | 漢字の表示指定 |
| font-variant-ligatures | 合字の制御指定 |
| font-variant-numeric | 数値の表示形式指定 |
| font-variant-position | 上付き文字・下付き文字の指定 |
| font-weight | 文字の太さ |
| 関連するHTMLタグ | |
|---|---|
| big | 大きな文字 |
広告