CSSのem単位でフォントサイズを設定する方法
テキストを拡大縮小可能なサイズにしたい場合は、font-sizeプロパティをem単位で指定します。デフォルトでは1emは16px（または12pt）に相当し、その値は親要素のフォントサイズを基準とした相対値になります。この特性により、ページ全体の文字サイズを柔軟かつ一貫性のある形で管理できます。
構文
CSSのfont-sizeプロパティの基本構文は以下のとおりです。
Selector {
font-size: /*値*/
}
例1：divとspanでのem指定
次の例では、font-sizeプロパティをem単位で設定する方法を示しています。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 40%;
border: 2px solid yellow;
padding: 20px;
font-size: 1em;
}
span {
font-size: 2em;
background-color: chartreuse;
}
</style>
</head>
<body>
<div>
<p>This is a demo paragraph<span> displaying font sizes</span> set with em in CSS.</p>
</div>
</body>
</html>
出力
上記のコードを実行すると、以下のような結果が表示されます。
この例では、div要素のフォントサイズが1em（16px）に設定され、その子要素であるspanは2emとして指定されているため、親要素の2倍である32pxで表示されます。これがemの相対的な性質です。
例2：table内でのem指定
続いて、表（table）に対してem単位のフォントサイズを適用した例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 40%;
border: 2px ridge red;
font-size: 0.8em;
}
span {
font-size: 1.5em;
background-color: silver;
}
</style>
</head>
<body>
<h2>Class Info</h2>
<table>
<tr>
<th>Number of Students</th>
</tr>
<tr>
<td>Class A</td>
<td><span>50 Students</span></td>
</tr>
<tr>
<td>Class B</td>
<td><span>40 Students</span></td>
</tr>
</table>
</body>
</html>
出力
上記のコードを実行すると、以下のような結果が表示されます。
この例では、table要素のフォントサイズが0.8em（約12.8px）に縮小され、セル内のspan要素はさらに1.5倍のサイズで表示されます。このようにem単位を使いこなすことで、親子関係に基づいた柔軟なタイポグラフィ設計が可能になります。
-
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));サイズに指定できる値グラデーションのサイズには、以下