【CSS Modules】rem()関数の使い方
rem()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
rem()関数は、CSSにおいて、ルート要素（通常は<html>要素）のフォントサイズを基準とした相対的な長さを指定するために用いられる特別な単位を表現するものです。これは、Webページの要素のサイズを、ユーザーの基本設定やデバイスに柔軟に対応させるために利用されます。
remは"root em"の略であり、常にドキュメントのルート要素、すなわち<html>要素に設定されたfont-sizeの値を基準とします。例えば、ルート要素のfont-sizeが16pxに設定されている場合、1remは16pxに相当します。この特性により、font-sizeが親要素に依存するem単位とは異なり、要素がどれだけ深くネストされていても、常にルート要素からの相対的なサイズを保つことができます。これにより、予測しやすく、一貫性のあるレイアウトを構築することが可能です。
この関数の大きな利点は、レスポンシブデザインへの適応とアクセシビリティの向上にあります。メディアクエリなどでルート要素のフォントサイズを調整することで、ウェブサイト全体のUI要素のサイズを比例的に変更し、様々な画面サイズに効率的に対応できます。また、ユーザーがブラウザの基本フォントサイズを変更した場合でも、それに合わせてrem単位で指定された要素も自動的にスケーリングされるため、読みやすさが向上し、アクセシビリティが高まります。
フォントサイズだけでなく、margin、padding、width、height、line-heightなど、さまざまなCSSプロパティの単位として幅広く利用されており、ベースとなるサイズを一つ変更するだけでサイト全体の比率を維持したまま調整できるため、デザインの変更や保守が容易になります。
構文(syntax)
1.element { 2 font-size: rem(1.5); 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
rem() 関数は、ルート要素（通常は <html> 要素）のフォントサイズを基準とした相対的な長さを返します。この戻り値は、要素の幅や高さ、パディング、マージンなどの長さを指定するために使用できます。