CSSのremを完全攻略！8つのサンプルコードで使いこなす

はじめに
●CSSとは
- ○CSSの基本
●rem単位の基本
- ○remとは何か
- ○remの計算方法
●remの使い方
●よくあるエラーと対処法
- ○フォントサイズが予想と異なる時
- ○ブラウザ互換性の問題
●rem単位の応用例
●エンジニアなら知っておくべき豆知識
- ○豆知識1：remとemの違い
- ○豆知識2：ピクセルとの関係
まとめ

はじめに

この記事では、CSSの基本から、特に重要な単位である「rem」の使い方に焦点を当てて解説していきます。

プログラミング初心者から中級者まで、誰でも理解できるように、remの基本概念から、実際のサンプルコードを用いた応用例まで、段階的に説明していきます。

CSSのremを理解し、実践的なスキルとして身に付けることで、レスポンシブなウェブデザインや、様々なデバイスに対応したウェブサイト作成が可能になります。

●CSSとは

CSS（Cascading Style Sheets）は、ウェブページのデザインやレイアウトを指定するための言語です。

HTMLがページの構造を定義するのに対し、CSSはそれらの要素の見た目（色、サイズ、フォント等）をスタイリングします。

CSSはウェブデザインにおいて欠かせない技術であり、HTMLと組み合わせることで、静的なページに魅力的なビジュアルとダイナミックなレイアウトを提供します。

○CSSの基本

CSSを理解するためには、まず基本的な構造を知る必要があります。

CSSは主にセレクタと宣言ブロックで構成されています。

セレクタはスタイルを適用するHTML要素を指定し、宣言ブロックはその要素に適用するスタイル（プロパティと値）を定義します。

例えば、h1 { color: red; font-size: 24px; } というコードは、「h1」というセレクタに対して、「色は赤、フォントサイズは24ピクセル」というスタイルを適用することを意味しています。

CSSには多くのプロパティが存在し、これらを組み合わせることで、様々なデザインを実現できます。

●rem単位の基本

CSSにおける「rem」は、レスポンシブデザインを実現するための重要な単位です。

remは「root em」の略で、基準となるフォントサイズに対する相対的なサイズを指定します。

具体的には、HTMLのルート要素（通常はhtmlタグ）で定義されたフォントサイズを基準に計算されます。

この特性により、remを使用することで、ページ全体のフォントサイズを一箇所で調整できるため、デザインの一貫性を保ちながら、異なるデバイスや画面サイズに柔軟に対応することが可能です。

○remとは何か

rem単位は、ルート要素のフォントサイズに対して相対的な大きさを持つ単位です。

例えば、ルート要素のフォントサイズが16pxであれば、1remは16pxと等しくなります。

このように、remはルート要素に基づいて計算されるため、ページ内の異なる要素が同じルールに基づいてサイズが決定され、結果として一貫したレイアウトを作成することができます。

○remの計算方法

remの計算方法は非常にシンプルです。

基本となるルート要素のフォントサイズに対する倍率でサイズを指定します。

例えば、htmlタグでフォントサイズが16pxに設定されている場合、1remは16pxに、2remは32pxに相当します。

この計算法則を用いることで、ページ全体のフォントサイズを容易に調整し、異なるデバイスや画面サイズに適応したデザインを実現することが可能です。

また、remを利用することで、要素間のサイズ関係を維持しつつ、フォントサイズやマージン、パディングなどを効率的に管理することができます。

●remの使い方

CSSでのrem単位の使い方は多岐にわたり、柔軟なデザイン制御が可能です。

特に、フォントサイズ、マージン、パディング、幅などのプロパティに使用することで、異なるデバイスや画面サイズに対応したレスポンシブなウェブデザインを実現できます。

ここでは、具体的なサンプルコードを用いて、remの効果的な使用方法を紹介します。

○サンプルコード1：基本的なフォントサイズ設定

まず、基本的なフォントサイズの設定方法から見ていきましょう。

HTMLのルート要素にフォントサイズを指定し、その後の要素でremを使用します。

html {
    font-size: 16px;
}
body {
    font-size: 1.25rem; /* これは20pxに相当します */
}

このコードでは、html要素のフォントサイズを16pxに設定し、body要素内のテキストのフォントサイズを1.25rem（すなわち、16pxの1.25倍、つまり20px）に設定しています。

○サンプルコード2：レスポンシブデザインでの応用

レスポンシブデザインにおいてremは非常に役立ちます。

下記のコードは、画面の幅に応じてフォントサイズを変更する例です。

html {
    font-size: 100%; /* ブラウザのデフォルト設定に基づく */
}
@media (max-width: 600px) {
    html {
        font-size: 14px;
    }
}
@media (min-width: 601px) {
    html {
        font-size: 16px;
    }
}

この例では、画面幅が600px以下のときにはフォントサイズを14pxに、それ以上の場合は16pxに設定しています。

○サンプルコード3：ネストされた要素での使用法

remはネストされた要素においても一貫性を保ちます。

下記のコードでは、異なるレベルの要素に対してremを使用しています。

html {
    font-size: 16px;
}
nav {
    font-size: 0.9rem;
}
nav ul li {
    font-size: 1rem;
}

ここでは、nav要素には基準より小さめのフォントサイズを、その子要素には標準のフォントサイズを設定しています。

○サンプルコード4：複数のブラウザでの互換性

remはほとんどの現代のブラウザでサポートされています。

ここでは、ブラウザ間で一貫した見た目を実現するための基本的なスタイル設定を紹介します。

html {
    font-size: 16px;
}
body {
    font-size: 1rem;
    line-height: 1.5;
}

このスタイルは、様々なブラウザでフォントサイズや行間が一定に保たれるようにしています。

○サンプルコード5：remを使ったアニメーション効果

remはアニメーション効果にも使用できます。

ここでは、ボタンのホバー時にサイズが変化するアニメーションの例を紹介します。

button {
    font-size: 1rem;
    transition: font-size 0.3s ease;
}
button:hover {
    font-size: 1.1rem;
}

このコードでは、ボタンにカーソルを合わせるとフォントサイズが1remから1.1remへと変わるアニメーションが設定されています。

アニメーションは0.3秒で滑らかに実行されます。

●よくあるエラーと対処法

CSSのrem単位を使う際には、いくつかの共通のエラーが発生する可能性があります。

これらのエラーを理解し、適切な対処法を知ることで、より効果的なCSSコーディングが可能になります。

○フォントサイズが予想と異なる時

一般的なエラーの一つに、指定したrem単位のフォントサイズが予想と異なる場合があります。

このような状況は、主にルート要素（htmlタグ）のフォントサイズが予期せず変更されている場合に発生します。

例えば、ユーザーのブラウザ設定によりデフォルトのフォントサイズが異なる場合、ページ内のフォントサイズが意図しない形で表示される可能性があります。

この問題に対処するためには、htmlタグで明示的にフォントサイズを指定することが推奨されます。

例えば、html { font-size: 16px; }とすることで、基準となるフォントサイズを16pxに固定し、その上でrem単位を使用します。

○ブラウザ互換性の問題

rem単位はほとんどの現代のブラウザでサポートされていますが、古いブラウザや一部のブラウザでは完全にサポートされていないことがあります。

特に、Internet Explorer 8以下の古いバージョンではrem単位がサポートされていません。

このような古いブラウザの互換性を確保するためには、フォールバックとしてピクセル単位(px)を使用する方法があります。

例えば、下記のように記述することで、古いブラウザではピクセル単位が、新しいブラウザではrem単位が適用されます。

.example {
    font-size: 16px; /* 古いブラウザ用のフォールバック */
    font-size: 1rem; /* 現代のブラウザ用 */
}

この方法により、異なるブラウザ間でも一貫したデザインを維持することが可能になります。

また、必要に応じてブラウザの特定のバージョン向けに特定のスタイルを適用するCSSハックや条件付きコメントを使用することも一つの解決策です。

●rem単位の応用例

rem単位は多様な応用が可能で、特にレスポンシブなウェブデザインを作成する際にその真価を発揮します。

ここでは、rem単位を用いた具体的な応用例として、動的なフォントサイズの調整、メディアクエリとの組み合わせ、グリッドレイアウトの実装について解説します。

○サンプルコード6：動的なフォントサイズ調整

ウェブページにおいて、ビューポートのサイズに応じてフォントサイズを動的に調整することは、ユーザー体験の向上に欠かせません。

下記のCSSは、ビューポートの幅に基づいてルート要素のフォントサイズを変更し、それに伴いページ全体のフォントサイズが調整される例です。

html {
    font-size: calc(1vw + 1vh + 0.5vmin);
}

このコードでは、ビューポート幅（vw）、ビューポート高さ（vh）、およびビューポートの最小次元（vmin）に基づいて、html要素のフォントサイズが計算されます。

○サンプルコード7：メディアクエリとの組み合わせ

メディアクエリを用いることで、特定の画面サイズに合わせて異なるスタイルを適用することができます。

下記の例では、異なる画面幅に応じて異なるフォントサイズを設定しています。

html {
    font-size: 14px;
}
@media (min-width: 600px) {
    html {
        font-size: 16px;
    }
}
@media (min-width: 768px) {
    html {
        font-size: 18px;
    }
}

このコードにより、デバイスやウィンドウの幅に応じてhtml要素のフォントサイズが変更されます。

○サンプルコード8：グリッドレイアウトにおける使用例

CSS Grid Layoutを使用したグリッドシステムの構築にもrem単位は有効です。

下記のコードは、remを用いたグリッドレイアウトの一例です。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
}
.item {
    padding: 0.5rem;
}

このコードでは、コンテナ内の各アイテムが均等な幅で配置され、アイテム間には1remの間隔が設けられています。

また、各アイテムには0.5remのパディングが適用されています。

これにより、さまざまな画面サイズに対応するフレキシブルなレイアウトが実現できます。

●エンジニアなら知っておくべき豆知識

CSSを使用する際、特にrem単位を駆使するうえで、知っておくと有益な豆知識をいくつか紹介します。

これらの知識は、より効果的なウェブデザインを実現するための基盤となります。

○豆知識1：remとemの違い

remとemは共に相対単位ですが、計算の基準点が異なります。

em単位は親要素のフォントサイズを基準にして計算されるのに対し、rem単位はhtmlタグ（ルート要素）のフォントサイズを基準に計算されます。

このため、emはネストされた要素の中で使用すると、意図しないサイズ変更が発生しやすくなりますが、remはそのような影響を受けにくいため、一貫したサイズ制御が可能です。

例えば、下記のような場合を考えてみましょう。

html {
    font-size: 16px;
}
.parent {
    font-size: 1.25em; /* 親要素のフォントサイズは20px */
}
.child {
    font-size: 1.25em; /* 子要素のフォントサイズは25px（20pxの1.25倍） */
}

em単位を使用すると、親要素のサイズ変更が子要素に影響を与えるのに対し、rem単位ではそういった連鎖的な影響を受けません。