CSSのfont-sizeプロパティをキーワードで設定する方法
CSSのfont-sizeプロパティは、絶対キーワードと相対キーワードを使って設定できます。キーワードを指定することで、テキストのサイズを意図した通りに柔軟に拡大・縮小できます。
構文
CSS font-sizeプロパティの基本構文は以下のとおりです。
セレクター {
font-size: /*値*/
}
CSSで使用できる標準キーワードの一覧は、次の表をご参照ください。
| 番号 | 値と説明 |
|---|---|
| 1 | medium フォントサイズを中程度（標準）に設定します。デフォルト値です |
| 2 | xx-small フォントサイズを極小に設定します |
| 3 | x-small フォントサイズをとても小さく設定します |
| 4 | small フォントサイズを小さめに設定します |
| 5 | large フォントサイズを大きめに設定します |
| 6 | x-large フォントサイズをとても大きく設定します |
| 7 | xx-large フォントサイズを極大に設定します |
| 8 | smaller 親要素よりも小さいフォントサイズに設定します |
| 9 | larger 親要素よりも大きいフォントサイズに設定します |
それでは、実際のコード例を見ながら、font-sizeプロパティをキーワードで指定する方法を確認していきましょう。
例1：見出しと段落への適用
<!DOCTYPE html>
<html>
<head>
<style>
h1{
font-size: larger;
}
#demo {
font-size: medium;
text-align: center;
background-color: floralwhite;
}
p {
font-size: xx-large;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p id="demo">This is demo text.</p>
<p>This is another demo text.</p>
</body>
</html>
出力結果
上記のコードを実行すると、次のような表示になります。
この例では、h1要素にlarger（親要素より大きい）、idがdemoの段落にmedium（標準サイズ）、その他のp要素にxx-large（極大）がそれぞれ適用されています。
例2：div要素内での相対的なサイズ指定
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
padding: 5px;
width: 30%;
border: 1px solid;
border-radius: 29%;
text-align: center;
font-size: xx-small;
}
p {
font-size: xx-large;
}
</style>
</head>
<body>
<div>
<div>One</div>
<p>Two</p>
</div>
</body>
</html>
出力結果
上記のコードを実行すると、次のような表示になります。
このように、外側のdivにはxx-smallが適用され、その内側のp要素にはxx-largeが適用されるため、同じコンテナ内でもキーワードによって文字サイズに明確な差をつけることができます。
-
CSSのfont-sizeプロパティとは？フォントサイズの指定方法を実例付きで解説
CSSのfont-sizeプロパティは、テキストのフォントサイズ（文字の大きさ）を設定するために使用されるプロパティです。値はパーセンテージ（%）や、px（ピクセル）、cm、pt（ポイント）、emなどの単位、さらには絶対的なキーワードによって指定できます。特に相対的な値を使用することで、ユーザーがブラウザの設定を変更しても文字サイズが追従し、アクセシビリティを最大限に高めることができます。なお、フォントサイズのデフォルト値は16px（または12pt）です。構文CSSのfont-sizeプロパティの基本構文は以下の通りです。セレクタ { font-size: /*値*/ }font-si
-
CSSで放射状グラデーションのサイズを指定する方法
CSSで放射状グラデーションのサイズを制御するには、radial-gradient() 関数を使用します。この関数は、背景画像として放射状グラデーションを定義するもので、第1引数にサイズ（形状と大きさ）を、その後に位置やカラーストップを指定します。基本的な書き方以下の例のように、関数の最初のパラメータとして希望するサイズを設定します。background-image: radial-gradient(40% 50px at center, rgb(30, 255, 0), rgb(0, 195, 255), rgb(128, 0, 32));サイズに指定できる値グラデーションのサイズには、以下