CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでパーセント（%）とemを組み合わせてフォントサイズを指定する方法

CSSでは、フォントサイズの指定にパーセント（%）とemを組み合わせて使用できます。この手法を用いることで、ブラウザ間での表示の互換性が向上し、異なる環境でも一貫したテキストサイズを実現できます。

親要素に対する相対的な割合でサイズを設定できるため、レスポンシブデザインやアクセシビリティの観点からも推奨される方法です。

基本構文

CSSのfont-sizeプロパティの基本的な構文は以下のとおりです。

Selector {
    font-size: /*値*/;
}

使用例1：bodyにパーセント、子要素にemを指定

以下の例では、body要素に「80%」を指定し、その子要素であるp要素とspan要素にはem単位でフォントサイズを設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-size: 80%;
}
p {
    font-size: 2em;
}
span {
    font-size: 4em;
    font-style: italic;
}
</style>
</head>
<body>
<p>他人が書いた <span>ソースコード</span> を読むことで、そのコードを書く際に犯されたミスを指摘する機会が得られます</p>
</body>
</html>

出力結果

上記のコードは次のように表示されます。

CSSでパーセント（%）とemを組み合わせてフォントサイズを指定する方法

使用例2：divとpで異なる単位を使い分ける

次の例では、div要素に「120%」を指定し、その中のp要素には「2em」を設定しています。このように、要素ごとに単位を使い分けることで柔軟な文字サイズ調整が可能です。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    font-size: 120%;
}
p {
    font-size: 2em;
}
</style>
</head>
<body>
<h3>デモ見出し</h3>
これはサンプルテキストです。
<div>
実践的な実装を交えると、例はより理解しやすくなります
<p>これは、CSSでフォントサイズを設定するさまざまな方法を示すためのテキストです。</p>
</div>
</body>
</html>

出力結果

上記のコードは次のように表示されます。

CSSでパーセント（%）とemを組み合わせてフォントサイズを指定する方法

まとめ

パーセントとemを組み合わせたフォントサイズの指定は、相対的なスケーリングを活かせるため、ブラウザごとの差異を吸収しながら統一感のあるタイポグラフィを実現できます。特に、ユーザーがブラウザの文字サイズ設定を変更した場合にも適切に追従するため、アクセシブルなWebサイト構築において有効な手法です。

  1. CSSのcolorプロパティを使って要素の文字色を設定する方法

    CSSの color プロパティは、要素のテキスト（文字）の色を変更するために使用されます。値には、標準的なカラーネーム、rgb()、rgba()、hsl()、hsla()、そして16進数（HEX）カラーコードなど、さまざまな形式を指定できます。 構文 CSSの color プロパティの基本構文は以下のとおりです。 Selector {     color: /*値*/ } それでは、実際のコード例を見ていきましょう。 コード例1：複数の色指定方法を使う 次の例では、16進数カラーコード、rgba()、hsl() の3つの異なる指定方法を組み合わせて使用

  2. CSS3の線形グラデーション（linear-gradient）と放射状グラデーション（radial-gradient）の使い方

    グラデーションとは、2つ以上の色を滑らかに組み合わせて表示するCSSの機能です。中でもよく使われるのが「線形グラデーション」と「放射状グラデーション」の2種類です。 線形グラデーションは、上から下、左から右など、直線に沿って色が変化していくスタイルです。一方、放射状グラデーションは、要素の中心から外側に向かって色が広がるように変化します。 ここでは、CSS3でこれら2つのグラデーションを使う方法を、実際のコード例とともに解説します。 サンプルコード <!DOCTYPE html> <html> <head> <style> body{ f