vw/vh/rem/emを使いこなして最適なフォントサイズを実現！デバイスに合わせた文字サイズ設定

2024-04-02

コンテナサイズに基づいたフォントスケーリング

このチュートリアルでは、CSSとレスポンシブデザインを使用して、コンテナサイズに基づいてフォントサイズを自動的に調整する方法を説明します。これは、さまざまなデバイスや画面サイズでテキストが読みやすく、見栄えが良くなるようにするのに役立ちます。

必要なもの

テキストエディタ
ウェブブラウザ

手順

HTMLファイルを作成し、以下のコードを追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Scaling Example</title>
</head>
<body>
    <h1>見出し</h1>
    <p>これはコンテナサイズに基づいて自動的に調整されるテキストです。</p>
</body>
</html>

body {
    font-family: sans-serif;
}

h1 {
    font-size: 2em;
}

p {
    font-size: 16px;
    /* vw単位を使ってコンテナ幅の1%をフォントサイズに設定 */
    font-size: 1vw;
}

@media (max-width: 576px) {
    p {
        /* 576px以下の画面幅ではフォントサイズを14pxに設定 */
        font-size: 14px;
    }
}

ファイルを保存し、ブラウザで開きます。

コード解説

body セレクタは、すべてのテキスト要素に適用されます。
h1 セレクタは、<h1> 要素にのみ適用されます。
font-size プロパティは、テキストのサイズを設定します。
vw 単位は、viewport幅の1%を表します。
@media クエリは、特定のメディア条件に基づいてスタイルを適用するために使用されます。

この例では、p 要素のフォントサイズは、コンテナ幅の1%に設定されています。つまり、コンテナ幅が大きくなればなるほど、フォントサイズも大きくなります。また、@media クエリを使用して、576px以下の画面幅ではフォントサイズを14pxに設定しています。

rem 単位を使用して、親要素のフォントサイズに基づいてフォントサイズを設定できます。
JavaScriptを使用して、フォントサイズを動的に調整できます。

注意

このチュートリアルは、フォントスケーリングの基本的な概念を示しています。より複雑なレイアウトには、より高度なテクニックが必要になる場合があります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Scaling Example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>見出し</h1>
    <p>これはコンテナサイズに基づいて自動的に調整されるテキストです。</p>
</body>
</html>

body {
    font-family: sans-serif;
}

h1 {
    font-size: 2em;
}

p {
    font-size: 16px;
    /* vw単位を使ってコンテナ幅の1%をフォントサイズに設定 */
    font-size: 1vw;
}

@media (max-width: 576px) {
    p {
        /* 576px以下の画面幅ではフォントサイズを14pxに設定 */
        font-size: 14px;
    }
}

使用方法

上記のコードをHTMLファイルとスタイルシートファイルに保存します。

ブラウザのウィンドウサイズを変更して、フォントサイズがどのように変化するかを確認します。

改善点

さまざまな画面サイズに対応するために、複数のメディアクエリを追加できます。

フォントサイズだけでなく、行間や文字間も調整できます。

コンテナサイズに基づいたフォントスケーリングのその他の方法

rem 単位は、親要素のフォントサイズに基づいてフォントサイズを設定します。これは、すべての要素のフォントサイズを比例的に調整したい場合に便利です。

p {
    font-size: 1.6rem;
}

この例では、p 要素のフォントサイズは、親要素のフォントサイズの1.6倍になります。

em 単位を使用する

h1 {
    font-size: 2em;
}

JavaScriptを使用して、フォントサイズを動的に調整できます。これは、ユーザーの好みに合わせてフォントサイズを調整したい場合や、複雑なレイアウトに対応したい場合に便利です。

const resizeHandler = () => {
    const containerWidth = document.querySelector('.container').offsetWidth;
    const fontSize = containerWidth / 100;

    document.querySelector('p').style.fontSize = `${fontSize}px`;
};

window.addEventListener('resize', resizeHandler);

resizeHandler();