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

【CSS】レスポンシブタイポグラフィの作り方をわかりやすく解説

レスポンシブタイポグラフィとは

レスポンシブタイポグラフィとは、画面サイズ（ビューポート）の大きさに応じて文字のサイズが自動的に調整されるテキスト表示のことです。CSSでは、ビューポート単位である vw（viewport width） を使うことで、メディアクエリを書かなくても簡単に実現できます。

「1vw」はビューポート幅の1%を表します。たとえば画面幅が1000pxの場合、1vwは10pxになります。この単位をフォントサイズに指定すれば、画面幅に連動して文字が拡大・縮小されるため、スマートフォンからデスクトップまで一つのスタイルで対応可能です。

実装コード例

以下のコードでは、h1 要素に「10vw」、p 要素に「5vw」を指定し、画面幅に応じて文字サイズが変化するレスポンシブなタイポグラフィを実装しています。

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
<style>
    h1 {
        font-size: 10vw;
    }
    p {
        font-size: 5vw;
    }
</style>
</head>
<body>
<h1>Responsive Text Example</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, rerum.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, necessitatibus officiis hic est in nobis!
</p>
</body>
</html>

実行結果

上記のコードを実行すると、次のような表示になります。

【CSS】レスポンシブタイポグラフィの作り方をわかりやすく解説

ブラウザの画面幅を狭くすると、文字サイズもそれに合わせて自動的に縮小されます。

【CSS】レスポンシブタイポグラフィの作り方をわかりやすく解説

補足：clamp()関数でより実用的に

vw単位のみを使うと、極端に大きな画面では文字が大きすぎたり、小さな画面では読みにくくなったりすることがあります。そんなときは、最小値と最大値を設定できる clamp() 関数 の活用がおすすめです。

h1 {
    font-size: clamp(24px, 10vw, 80px);
}

このように指定すると、文字サイズは最低でも24px、最大でも80pxに制限されながら、画面幅に応じて滑らかに変化します。可読性とデザインのバランスを保ちたい場合にぜひ試してみてください。

  1. CSSでレスポンシブなブログレイアウトを作成する方法【完全なコード例付き】

    CSSを使ってレスポンシブなブログレイアウトを作成するには、viewportメタタグの設定と、デバイスの画面幅に応じて柔軟に調整されるレイアウト構造の定義がポイントになります。以下に、ナビゲーションバー・ブログ本文・サイドリンク・フッターを備えた、ブログサイトの完全なコード例を紹介します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <

  2. CSSでレスポンシブなカラムカードを作成する方法【コード例付きで解説】

    CSSを使えば、画面サイズに応じてレイアウトが自動的に切り替わるレスポンシブなカラムカードを簡単に作成できます。本記事では、floatとcalc()、そしてメディアクエリを組み合わせた基本的な実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 レスポンシブカラムカードの仕組み この手法のポイントは、主に以下の3つです。 calc(25% - 20px)：4枚のカードを横並びにするため、各カードの幅を「全体の25%からマージン分を引いた値」として計算しています。 float: left：カードを左に回り込ませることで、横一列に並べています。 @mediaクエリ：画面幅が