Rem
Webflowでは、デフォルトでpx単位を使用しています。Designerの入力欄に「10」と入力し、「Enter」キーを押すと、「10px」が設定されるようになっています。
Client-Firstではremを使用しています。この単位は単位のドロップダウンから選択することができます。
remとは？
Remは 「root em」の省略形です。
- Remはルート要素のfont-sizeに基づく相対的な単位です。
- ルート要素はhtmlです。
- Remはhtmlのフォントサイズに相対します。
- Client-Firstで適用されるほとんどのサイズはremで設定されています。
ブラウザのフォントサイズの継承
Client-Firstでは、htmlのfont-sizeをブラウザから継承します。
ブラウザは初期設定として16pxをデフォルトのhtmlのfont-sizeとして使用します。
つまり、ブラウザのデフォルト設定は 1rem = 16px の変換となります。
Client-Firstで承認されたサイズに基づいて、pxからremに簡単に変換できます。例えば、Client-Firstで承認されたrem値には0.5、1、1.5、2、2.5、3などがあります。
RemとClient-Firstは、ブラウザのフォントサイズのベストなアクセシビリティの実践に従うための強力な組み合わせです。
計算方法
Eブラウザのfont-sizeがブラウザの設定で「デフォルト」に設定されている場合、16pxは1remです。
Webflowのプロジェクトを構築する際には、常に16pxをremの計算の基本値として使用します。
すべてのremの計測変換は16の倍数です。
px値をremに変換するには、その値を16で割ります。
64px / 16px = 4rem
rem値をpxに変換するには、その値をに16を掛けます。
2rem x 16px = 32px
計算の際は便宜上、1、2、2.5、3、4、5のような簡単に読み取れるrem値を使用することをおすすめします。
例えば、8.4375remのような長い数字の値の使用することは望ましくありません。このような値は覚えることが難しく、ワークフローを遅延させる可能性があります。
Webflow Designerでの計算
Webflow Designerのほとんどの単位入力では、Webflow内でremをそのまま計算することができます。
例えば、Designerの幅入力欄に「100/16rem」と入力し、「Enter」キーを押すと、rem値が計算されます。
Webflow Designerでは、であらゆる数値を16で割ってそのrem値を取得することができます。
アクセシビリティの利点
ブラウザのフォントサイズ設定
ブラウザはデフォルトで16pxをhtmlフォントサイズとして使用しており、デフォルトのフォントサイズは更新することができます。ユーザーは、自分の好みに応じてフォントサイズの設定を変更することができます。
ブラウザのフォントサイズ設定は、アクセシビリティにおける重要なトピックです。ユーザーがブラウザのフォントを更新する際には、ウェブサイトのコンテンツもその変更に合わせて調整されることが理想です。Client-Firstのremシステムはユーザーのブラウザのフォントサイズ設定に適応するように作られています。
pxやvwのような他の単位で作業すると、ユーザーがブラウザのフォントサイズ設定を更新するための設定を無視することになります。
ブラウザのズーム
Remはユーザーのブラウザのズーム制御も尊重します。ユーザーがページをズームインまたはズームアウトすると、レイアウトとremでのコンテンツが一緒にズームします。
vwやvhのような単位を使用する場合、このようなブラウザのズームは動作しません。
vwはブラウザのビューポートの幅（vhの場合は高さ）に依存します。これらの単位で設定されたサイズに影響を与えることができるのは、ブラウザウィンドウでの変更だけです。
Client-Firstでは、最も優れたアクセシビリティの実践法を使用します。remを使用しているのは、アクセシビリティとUXの利点があるからです。
remを使用したアクセシビリティについては、WizardryとClient-Firstの比較の記事で詳しく学べます。この記事は、使いやすい測定単位としてのremの利点を技術的概要を説明しています。
推奨されるpx/rem値
以下は、Client-Firstで推奨されるrem値とそれらの値を変換したpx値のリストです。
リストに含まれるClient-Firstの承認値はあくまで推奨であり、厳格な要件ではありません。
当サイズリストはインタラクティブです。スティッキーナビゲーションメニューを通じて値を更新します。
{{We will add the px-rem calculator here}}
Client-Firstでは、これらの値で作業することを推奨しています。
ただし、上記の値を使用する際には3つの例外があります。
1. タイポグラフィ
フォントサイズに14pxを使用するケースはよく見られます。これは16pxでは大きすぎる場合に推奨されます。12pxのフォントサイズはタイポグラフィには小さすぎることが多いです。
14px = 0.875rem
2. 2pxのスペーサー
特に小さなスペーサーには2pxを使用します。4pxよりも小さいスペーサーが必要な場合は、2pxの使用が適しています。
2px = 0.125rem
3. 1pxは1px
例えば、CSSのborderに1pxを使用する場合は、値として1pxを使用します。
1pxの値をremに変換することは推奨されません。
Retinaデバイスは非Retinaデバイスと異なるスケーリングルールを持っています。1pxを使用すると、どのデバイスでもRetinaスケーリングに干渉されることなく正確に1pxの線が作成されます。
1px = 1px
Finsweet Extension - pxからremへの移行ツール
Finsweet Extensionは、pxで作成されたプロジェクトをremに変換するツールを提供しています。
このツールは、プロジェクト内のすべての値をpxから計算されたremの値に変換します。
Finsweet ExtensionのClient-Firstタブ内にある「PX to REM Migrator」機能を利用すると、サイズ単位の移行を管理できます。