Help us understand the problem. What is going on with this article?

CSSの基本単位としてremを使うと超絶便利

More than 1 year has passed since last update.

皆さんはremという単位を聞いたことがあるでしょうか?
知っている方は「フォントサイズ指定が%とかemとかよりすっきりしたやつ」という印象を持たれているのではないでしょうか。
「remはフォントサイズだけのものではない」という事実を知ると、実はかなり便利な単位だったりします。

詳細についてはこちらのページにも解説・デモがあります。

remとは

Mozillaの説明によると、

rem
ルート要素の font-size (例えば、html 要素の font-size) です。ルート要素で使うと初期値を表します。

とあります。

html {
  font-size: 15px;
}

p {
  font-size: 1.2rem;
}

strong {
  font-size: 1.4rem;
}

p要素には18px、strong要素には21pxのフォントサイズが適用されます。
emや%だと<p>の中に<strong>があったときのように2重掛けが起こってしまうので、そのような煩雑なサイズの継承から逃れられます。

なお、上述の記事には

この単位は完全に拡縮可能なレイアウトを作るのに役立ちます。対象ブラウザのサポートがない場合には em 単位を使って同様のレイアウトを実現可能ですが、やや複雑になります。

とも書かれているので、本稿で述べている使用方法も想定内なのかもしれません。

ズームコントロール

まずは、ズームコントロールの簡単な比較デモを用意しました。
http://jsdo.it/butchi/remhack

CSSを利用した既存の手法としてzoomtransformと比較しましたが、それぞれ

  • zoomはFirefox未対応
  • transformはボックスサイズに影響を与えないので、relative配置の場合は余白の付け方に非常に困る

という大きな弱点があるので、remを使うことによりこれらの問題は解消されます。

ただし、後述のChromeの制約により、文字を含むコンテンツの縮小には限界があるという欠点があります。

なお、emとの併用でローカルなズームコントロールも可能となるハックが公開されていますので、このような使い方をすればより柔軟なレイアウトを作れると思われます。
Font Size Idea: px at the Root, rem for Components, em for Text Elements | CSS-Tricks(英語)

レスポンシブ対応

デモ: http://butchi.github.io/remhack/

transformでまるごと半分にする強引な方法もありますが、
SNSボタン、ウィジェット、その他iframeまで縮小されてしまう問題があります。
本ハックでは可変のものはrem、不変のものはpxと使い分けることができるのも強力なポイントです。

問題点

Google Chromeでは「最小フォントサイズ」というものが存在するので、中途半端なサイズまでしか縮小できません。なので、

html {
  font-size: 1px;
}
p {
  margin-top: 30rem;
}

のようにするとレイアウト崩れするので

html {
  font-size: 10px;
}
p {
  margin-top: 3rem;
}

のように、10px〜20pxぐらいの値を入れるのが丁度よいかと思われます。
(逆に、筆者がこの手法を発見したのも、Apple公式サイトがremのせいでレイアウト崩れが起こってたからでした。)

対応環境

remは比較的最近導入されたCSS3の単位で、IE9から対応しています。
ただし、IE10以下では一部バグあり(恐らく擬似要素のみ)とのことなので、あまりに気軽に使うと泥沼にハマる可能性があります。ご注意ください。

Can I use... Support tables for HTML5, CSS3, etc

IE10/11 のバグを考えると CSS では rem 単位を使わない方が良い | かきしちカンパニー Web Magazine

butchi_y
博士(工学)のフロントエンドエンジニアです。 ローレベルな言語仕様から、アニメーション演出まで幅広く興味を持ってます。 得意な言語はMathematica、JavaScript、ActionScriptです。 CGや音楽にもそれなりに詳しいです。
http://butchi.jp
kayac
古都鎌倉から新しい技術と面白いサービスを、次々にリリースする面白法人カヤックのフロントエンジニアチーム
http://www.kayac.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした