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

CSSのfont-sizeプロパティでキーワードを使ってフォントサイズを指定する方法

CSSのfont-sizeプロパティでは、数値や単位(px、emなど)だけでなく、あらかじめ定義されたキーワードを使ってフォントサイズを指定することもできます。キーワードは大きく分けて「絶対サイズ(absolute-size)」と「相対サイズ(relative-size)」の2種類があります。

相対サイズ(relative-size)キーワード

親要素のフォントサイズを基準に、相対的にサイズを変更するキーワードです。以下の2つが用意されています。

  • larger: 親要素より一段階大きなサイズにする
  • smaller: 親要素より一段階小さなサイズにする

絶対サイズ(absolute-size)キーワード

ユーザーのデフォルトフォントサイズ(medium)を基準とした、固定された段階的なサイズを指定するキーワードです。以下のキーワードが使用できます。

  • xx-small
  • x-small
  • small
  • medium(初期値)
  • large
  • x-large
  • xx-large
  • xxx-large

例1：絶対サイズキーワードでフォントサイズを設定する

まずは、絶対サイズキーワード(xx-large、small、medium、x-large)を使って各要素のフォントサイズを設定する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    grid-area: newArea;
    font-size: xx-large;
}
.item3 {
    font-size: small;
}
.item4 {
    font-size: medium;
}
.item5 {
    font-size: x-large;
}
.grid-container {
    display: grid;
    grid-template-areas:
    'newArea newArea . . .'
    'newArea newArea . . .';
    grid-gap: 5px;
    background-color: blue;
    padding: 5px;
}
.grid-container > div {
    background-color: orange;
    text-align: center;
    padding: 5px 0;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>Set some random numbers</p>
<div class="grid-container">
<div class="demo">250</div>
<div class="item2">120</div>
<div class="item3">333</div>
<div class="item4">298</div>
<div class="item5">645</div>
<div class="item6">543</div>
<div class="item7">555</div>
</div>
</body>
</html>

実行結果

CSSのfont-sizeプロパティでキーワードを使ってフォントサイズを指定する方法

上記のコードでは、.demoにはxx-large、.item3にはsmall、.item4にはmedium、.item5にはx-largeが適用され、それぞれ異なる文字サイズで表示されていることが確認できます。

例2：相対サイズキーワードでフォントサイズを設定する

次に、相対サイズキーワード(larger、smaller)を使ってフォントサイズを設定する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    grid-area: newArea;
    font-size: smaller;
}
.item3 {
    font-size: smaller;
}
.item4 {
    font-size: larger;
}
.item5 {
    font-size: larger;
}
.grid-container {
    display: grid;
    grid-template-areas:
    'newArea newArea . . .'
    'newArea newArea . . .';
    grid-gap: 5px;
    background-color: blue;
    padding: 5px;
}
.grid-container > div {
    background-color: orange;
    text-align: center;
    padding: 5px 0;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>Set some random numbers</p>
<div class="grid-container">
<div class="demo">250</div>
<div class="item2">120</div>
<div class="item3">333</div>
<div class="item4">298</div>
<div class="item5">645</div>
<div class="item6">543</div>
<div class="item7">555</div>
</div>
</body>
</html>

実行結果

CSSのfont-sizeプロパティでキーワードを使ってフォントサイズを指定する方法

この例では、.demoと.item3にsmallerを適用して標準より小さく、.item4と.item5にlargerを適用して標準より大きく表示しています。

まとめ

フォントサイズをキーワードで指定すると、ブラウザ側の設定(ユーザーのデフォルトフォントサイズ)に応じて柔軟にスケールされるため、アクセシビリティの観点でも有効な手法です。絶対サイズキーワードは段階的に固定されたサイズ、相対サイズキーワードは親要素との相対関係でサイズが決まるという違いを理解して使い分けましょう。

  1. 【CSS】Flexboxで作る高度なレイアウト！基本プロパティと実装サンプルを解説

    Flexbox（フレックスボックス）とは？ CSS3には「Flexible Box Layout（フレキシブルボックスレイアウト）」と呼ばれるレイアウトモードが用意されており、一般的にはFlexbox（フレックスボックス）として知られています。Flexboxを活用することで、従来のfloatやpositionを使った手法よりもはるかに簡単かつ柔軟に、複雑なWebアプリケーションやWebページのレイアウトを構築できます。 Flexboxは「フレックスコンテナ」（親要素）と「フレックスアイテム」（子要素）という2つの概念で構成されます。親要素にdisplay: flex;を指定するだけで、その直下

  2. CSSだけで実現するスムーススクロールの書き方

    CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。 このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ