CSSの単位(em, rem)を使った、これから取り入れていきたい実装テクニックのまとめ

CSSの相対的な単位(em, rem)を使って、Webページで使われるUIコンポーネントのさまざまなサイズを変化させるスタイルシートのテクニックを紹介します。

em, remは文字の大きさだけでなく、画像やアイコンのサイズ、背景、フォーム、ボタン、配置など、さまざまな指定に利用できます。

サイトのキャプチャ

Building Resizeable Components with Relative CSS Units

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

フォントのサイズを変化

最初はプロポーショナルフォントのサイズを変化させるシンプルなテクニックです。

コンポーネントは、3つの要素で構成されています。

  • サブタイトル
  • タイトル
  • 左のボーダー

このようなコンポーネントのサイズを変化させる時は、フォントのサイズだけでなく、ボーダーもそれに合わせて変化させる必要があります。

デモのキャプチャ

Featured Post

「border-left: 0.25em solid #4a90e2;」のように、ボーダーもサイズ指定の単位に「em」を使用することで簡単に実現できます。

縦と横の比率を維持したボタン

ボタンはバリエーションが必要なUIエレメントです。より大きなボタンはユーザーのアクションを呼びかける重要な存在です。
これはpaddingにemを使うことで実現でき、font-sizeとpaddingの両方を通じて簡単にボタンの大きさを変化させることができます。角丸ボタンでborder-radiusを使う時は、同様にemで指定します。

デモのキャプチャ

Buttons

縦と横の比率を維持した画像

画像も下記のように、著者と日付が変化するように写真画像も変化する必要があります。ここで注目すべき点は、ブルーのボーダーです。フォントのサイズが変化するにつれ、その高さも変化します。

デモのキャプチャ

box-shadowを使ったボーダーの幅と高さ

emの単位指定をしておくといいもう1つのプロパティが、box-shadowです。box-shadowで実装されたボーダーはemを使うことで、拡大縮小が可能になります。

デモのキャプチャ

Headline - Box Shadow

アイコンの幅と高さ、そして間隔も

引用文のように、テキストとアイコンをセットにしたコンポーネントは、フォントサイズが変化した時に、アイコンの幅と高さ、そしてテキストとの間隔も変化する必要があります。ここでも相対的な単位で指定するのが役に立ちます。
px指定を使ってしまうと、アイコンとテキストが重なってしまったり、非常に離れてしまったりします。

デモのキャプチャ

Blockquote

キャプション付き画像

キャプションが重なって配置された画像がどのようにアレンジされるか想像してみてください。もちろんこのコンポーネントもfont-sizeに基づいて、左と上のオフセット、パディング、そしてシャドウも変化させることができます。

デモのキャプチャ

Figure

装飾された背景

このコンテンツのブロックは、タイトルの背景にサークルと破線を配置しています。このサークルもfont-sizeが変化する時に、変化します。単にサイズを変化させるだけでなく、border-radiusは破線の太さと同様に相対的にします。

デモのキャプチャ

Block

アイコン付き検索フォーム

ボタンとしてアイコンを使うことは普通ですが、検索フォームのようなinput要素にアイコンを使うこともできます。背景画像として配置したアイコンのサイズ、そしてサイズ変更に伴って位置が変わるのを阻止するためにパディングも変化させます。

デモのキャプチャ

Search

チェックボックスで実装されたトグル

最近ではチェックボックスをトグルスイッチのような見た目で実装することもあります。トグルにしたチェックボックスもfont-sizeの変化に合わせることができます。

デモのキャプチャ

Switch Toggle

ブロックの一行の長さ

ブロックに見出し・パラブラフ・リンクがあるコンポーネントで、それぞれ水平のスペースを持っています。max-widthで最大幅を指定するのは素晴らしい方法ですが、pxで指定するのではなく、相対的な単位で指定すると更にフレキシブルなコンポーネントを実装できます。

デモのキャプチャ

Hero Section

ボタンとしてのSVGアイコン

アイコンフォントを使用する一番の理由は、フォントのサイズが変化した時に、アイコンも自動的にサイズが変化することです。しかしこれはアイコンフォントに限ったものではなく、img要素でも実装でき、さらにインラインのsvg要素でも実装することができます。

デモのキャプチャ

Social Links

リストのコンテナ

リストのビュレットをデザインすることはよくあることです。こういったリストもfont-sizeが変化した時に、同じように変化することができます。ビュレットだけそのままのサイズだったり、大きくしたら重なってしまったとかはNGです。

デモのキャプチャ

List

モーダルウインドウのアイコン

モーダルウインドウ、アラートパネル、リストなどを開いた時に、閉じるアイコンが必要です。このアイコンも相対的にサイズを変化させることができます。

デモのキャプチャ

Modal Header

疑似要素を使ったアイコン

ハンバーガーメニューのように、空要素に疑似要素を使ってアイコンを実装することがあります。これももちろん拡大・縮小ができるようにすべきです。

デモのキャプチャ

Hamburger Menu Icon

グラデーション

これまで、背景のサイズのために相対的な単位をどのように使うことができるかを見てきました。ここで少し新しいテクニックを見てみましょう。グラデーションも相対的な単位で指定することができます。

デモのキャプチャ

Gradients

CSSスプライト

ラスター画像のように、px単位で扱う固定サイズのものがあります。しかしそれが相対的な単位を使うことができないことを意味しません。例えば、CSSスプライトの背景におけるポジションやサイズもemで指定することができます。

デモのキャプチャ

Image Sprites

emとremのコンビネーション

ここまで単位にemを使用してきました。emは親要素のfont-sizeに基づいて、サイズを確定させる単位です。似た単位にremがあります、これはルートに対して相対的にサイズを確定させます。
このremとemのコンビネーションで、さらにダイナミックに適用することができます。

例えば下記のコンポーネントのように、見出しと本文のサイズはremでルートに対して、画像のサイズやスペースはemで親要素に対してという実装もできます。

デモのキャプチャ

Bio

相対的な単位を使ってサイトを制作

ここまで実装したコンポーネントは単独でも使用できますが、組み合わせることでページ全体が相対的なサイズに対応します。拡大・縮小すべきサイズは変化し、サイズ変更の影響を受けない箇所はそのままです。

デモのキャプチャ

Knowledge Space

ブラウザのズーム機能

emベースのデザインは、ブラウザのズーム機能にも対応しており、互換性があります。pxベースのデザインだとズーム機能は問題になることがしばしばあります。

デモのキャプチャ

Knowledge Space

重要: あまり知られていないemの注意点

単位にemを使用する時、注意しなければならないことは、基づくfont-sizeは最も近い親要素であることです。

「.child」のサイズは、最も近い親要素「.parent」のサイズに基づいて算出されます。
しかしemの中の他のサイズを決める時は、現在の要素の新たに調整されたサイズに基づきます。

最終的には同じ値(30px)ですが、emでの指定値が異なるので、見た目で混乱してしまうことがあります。複数のemを指定する時は充分に注意を払い、指定してください。

top of page

©2017 coliss