【制作会社の常識】なぜhtml{font-size: 62.5%;}とremを使うべきなのか？🤔

こんにちは！😊

デザインカンプを見ながらコーディングしていて、こんな風に書いていませんか？

.title {
    font-size: 24px;
}

.text {
    font-size: 16px;
}

実は、多くの制作会社ではこう書きません…😅

制作会社の「常識」コード 💼

html {
    font-size: 62.5%; /* これが重要！ */
}

.title {
    font-size: 2.4rem; /* 24px相当 */
}

.text {
    font-size: 1.6rem; /* 16px相当 */
}

「なんでこんな面倒なことするの？🤔」って思いますよね。

なぜfont-size: 62.5%なのか？ 🎯

計算が超簡単になる！

通常の場合：

• ブラウザのデフォルト：16px
• 1rem = 16px（計算しづらい…😰）

font-size: 62.5%の場合：

• 16px × 62.5% = 10px
• 1rem = 10px（計算めちゃ簡単！😊）

実際の計算例

/* デザインカンプの指定 → rem換算 */
font-size: 12px; → 1.2rem
font-size: 14px; → 1.4rem
font-size: 16px; → 1.6rem
font-size: 18px; → 1.8rem
font-size: 24px; → 2.4rem
font-size: 32px; → 3.2rem

**小数点一桁ずらすだけ！**めちゃくちゃ楽です✨

なぜpxじゃダメなの？ ❌

1. ユーザビリティの問題

pxの場合：

.text {
    font-size: 16px; /* 固定サイズ */
}

ユーザーがブラウザで文字サイズを大きくしても、16pxのまま変わりません😰

remの場合：

.text {
    font-size: 1.6rem; /* 相対サイズ */
}

ユーザーが文字サイズを大きくすると、一緒に大きくなります👍

2. アクセシビリティの問題

視力の弱い方や高齢者の方が、ブラウザで文字サイズを大きくしたとき：

• px指定：文字が小さいまま（読みづらい…😞）
• rem指定：文字が大きくなる（読みやすい！😊）

3. レスポンシブ対応が楽

html {
    font-size: 62.5%;
}

/* タブレット以下 */
@media (max-width: 768px) {
    html {
        font-size: 58%; /* 全体的に少し小さく */
    }
}

/* スマホ */
@media (max-width: 480px) {
    html {
        font-size: 55%; /* さらに小さく */
    }
}

html要素のfont-sizeを変えるだけで、サイト全体の文字サイズが一括調整できます🎉

制作会社がremを使う理由 🏢

1. メンテナンスが楽

/* 後でデザイン変更があっても... */
html {
    font-size: 62.5%; /* ここを変えるだけ */
}

/* 個別の要素は変更不要 */
.title { font-size: 2.4rem; }
.text { font-size: 1.6rem; }

2. チーム開発で統一しやすい

悪い例：

/* Aさんのコード */
.header { font-size: 18px; }

/* Bさんのコード */
.nav { font-size: 1.125em; }

/* Cさんのコード */
.footer { font-size: 1.2rem; }

良い例：

/* チーム全員がremで統一 */
.header { font-size: 1.8rem; }
.nav { font-size: 1.6rem; }
.footer { font-size: 1.4rem; }

3. クライアントからの修正依頼に対応しやすい

「全体的に文字を少し大きくして」 → htmlのfont-sizeを調整するだけ！楽勝です😎

実際の使い方 💻

基本の設定

html {
    font-size: 62.5%; /* 1rem = 10px */
}

よく使うfont-sizeの一覧

/* 見出し系 */
.h1 { font-size: 3.2rem; } /* 32px */
.h2 { font-size: 2.8rem; } /* 28px */
.h3 { font-size: 2.4rem; } /* 24px */
.h4 { font-size: 2.0rem; } /* 20px */

/* 本文系 */
.text-large { font-size: 1.8rem; } /* 18px */
.text-normal { font-size: 1.6rem; } /* 16px */
.text-small { font-size: 1.4rem; } /* 14px */
.text-mini { font-size: 1.2rem; } /* 12px */

まとめ：プロっぽいコードを書こう ✨

メリット：

• ✅ 計算が楽（デザインカンプの数値を10で割るだけ）
• ✅ アクセシビリティ対応
• ✅ レスポンシブ対応が簡単
• ✅ メンテナンスしやすい
• ✅ チーム開発で統一できる

次のプロジェクトから、ぜひ試してみてください😊

「今までpxで書いてたけど、remに変えてみたら確かに楽だった！」という声をよく聞きます。

きっとあなたのコーディングライフが、より快適になるはずです🎉

この記事が役に立ったら、ぜひシェアしてくださいね！他にも「制作会社の常識」で知りたいことがあれば、コメントで教えてください😊