rem)を使って、Webページで使われるUIコンポーネントのさまざまなサイズを変化させるスタイルシートのテクニックを紹介します。remは文字の大きさだけでなく、画像やアイコンのサイズ、背景、フォーム、ボタン、配置など、さまざまな指定に利用できます。Units下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。最初はプロポーショナルフォントのサイズを変化させるシンプルなテクニックです。コンポーネントは、3つの要素で構成されています。サブタイトルタイトル左のボーダーこのようなコンポーネントのサイズを変化させる時は、フォントのサイズだけでなく、ボーダーもそれに合わせて変化させる必要があります。#4a90e2;」のように、ボーダーもサイズ指定の単位に「em」を使用することで簡単に実現できます。em(22);}}縦と横の比率を維持したボタンボタンはバリエーションが必要なUIエレメントです。大きなボタンはユーザーのアクションを呼びかける重要な存在です。これはpaddingにemを使うことで実現でき、font-sizeとpaddingの両方を通じて簡単にボタンの大きさを変化させることができます。角丸ボタンでborder-radiusを使う時は、同様にemで指定します。画像も下記のように、著者と日付が変化するように写真画像も変化する必要があります。ここで注目すべき点は、ブルーのボーダーです。フォントのサイズが変化するにつれ、その高さも変化します。3.125em;}box-shadowを使ったボーダーの幅と高さemの単位指定をしておくといいもう1つのプロパティが、box-shadowです。box-shadowで実装されたボーダーはemを使うことで、拡大縮小が可能になります。#e7e7e7;}}アイコンの幅と高さ、そして間隔も引用文のように、テキストとアイコンをセットにしたコンポーネントは、フォントサイズが変化した時に、アイコンの幅と高さ、そしてテキストとの間隔も変化する必要があります。ここでも相対的な単位で指定するのが役に立ちます。px指定を使ってしまうと、アイコンとテキストが重なってしまったり、非常に離れてしまったりします。1.35em;}キャプション付き画像キャプションが重なって配置された画像がどのようにアレンジされるか想像してみてください。このコンポーネントもfont-sizeに基づいて、左と上のオフセット、パディング、そしてシャドウも変化させることができます。1.75em;}}装飾された背景このコンテンツのブロックは、タイトルの背景にサークルと破線を配置しています。このサークルもfont-sizeが変化する時に、変化します。サイズを変化させるだけでなく、border-radiusは破線の太さと同様に相対的にします。0.25;}}}アイコン付き検索フォームボタンとしてアイコンを使うことは普通ですが、検索フォームのようなinput要素にアイコンを使うこともできます。背景画像として配置したアイコンのサイズ、そしてサイズ変更に伴って位置が変わるのを阻止するためにパディングも変化させます。no-repeat;}}チェックボックスで実装されたトグル最近ではチェックボックスをトグルスイッチのような見た目で実装することもあります。トグルにしたチェックボックスもfont-sizeの変化に合わせることができます。1em));}}}ブロックの一行の長さブロックに見出し・パラブラフ・リンクがあるコンポーネントで、それぞれ水平のスペースを持っています。max-widthで最大幅を指定するのは素晴らしい方法ですが、pxで指定するのではなく、相対的な単位で指定すると更にフレキシブルなコンポーネントを実装できます。none;}}ボタンとしてのSVGアイコンアイコンフォントを使用する一番の理由は、フォントのサイズが変化した時に、アイコンも自動的にサイズが変化することです。これはアイコンフォントに限ったものではなく、img要素でも実装でき、さらにインラインのsvg要素でも実装することができます。0.6;}}}リストのコンテナリストのビュレットをデザインすることはよくあることです。いったリストもfont-sizeが変化した時に、同じように変化することができます。ビュレットだけそのままのサイズだったり、大きくしたら重なってしまったとかはNGです。50%;}}}モーダルウインドウのアイコンモーダルウインドウ、アラートパネル、リストなどを開いた時に、閉じるアイコンが必要です。このアイコンも相対的にサイズを変化させることができます。1em;}疑似要素を使ったアイコンハンバーガーメニューのように、空要素に疑似要素を使ってアイコンを実装することがあります。これももちろん拡大・縮小ができるようにすべきです。em(24);}}}グラデーションこれまで、背景のサイズのために相対的な単位をどのように使うことができるかを見てきました。ここで少し新しいテクニックを見てみましょう。グラデーションも相対的な単位で指定することができます。100%;}CSSスプライトラスター画像のように、px単位で扱う固定サイズのものがあります。それが相対的な単位を使うことができないことを意味しません。CSSスプライトの背景におけるポジションやサイズもemで指定することができます。0;}}emとremのコンビネーションここまで単位にemを使用してきました。emは親要素のfont-sizeに基づいて、サイズを確定させる単位です。似た単位にremがあります、これはルートに対して相対的にサイズを確定させます。このremとemのコンビネーションで、さらにダイナミックに適用することができます。下記のコンポーネントのように、見出しと本文のサイズはremでルートに対して、画像のサイズやスペースはemで親要素に対してという実装もできます。1.45;}}相対的な単位を使ってサイトを制作ここまで実装したコンポーネントは単独でも使用できますが、組み合わせることでページ全体が相対的なサイズに対応します。拡大・縮小すべきサイズは変化し、サイズ変更の影響を受けない箇所はそのままです。Spaceブラウザのズーム機能emベースのデザインは、ブラウザのズーム機能にも対応しており、互換性があります。pxベースのデザインだとズーム機能は問題になることがしばしばあります。単位にemを使用する時、注意しなければならないことは、基づくfont-sizeは最も近い親要素であることです。1.5em;}}「.child」のサイズは、最も近い親要素「.parent」のサイズに基づいて算出されます。emの中の他のサイズを決める時は、現在の要素の新たに調整されたサイズに基づきます。black;}}最終的には同じ値(30px)ですが、emでの指定値が異なるので、見た目で混乱してしまうことがあります。複数のemを指定する時は充分に注意を払い、指定してください。