Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【CSS Modules】number型の使い方

number型の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

numberオブジェクトは、CSSのプロパティ値において、単位を持たない数値そのものを表す抽象的な概念です。しかし、これはプログラミング言語のオブジェクトインスタンスを指すものではなく、CSSにおける基本的なデータ型の一つとして、数値がどのように解釈されるかを定義しています。

具体的には、z-indexopacityline-heightなどの様々なCSSプロパティで、単位を伴わない数値を指定する際にこのnumber型が適用されます。例えば、z-index: 10;opacity: 0.5;100.5 の部分がこのnumber型に該当します。整数値だけでなく、小数点を含む浮動小数点数も扱うことができます。これは、色空間におけるアルファ値や、線や要素の比率を指定する際など、多くの場面で活用されます。

CSS Modulesの環境下においても、このnumber型は標準的なCSSの数値の扱いとして適用されます。CSSカスタムプロパティ(変数)を定義する際や、JavaScriptからCSSの値を操作する際に、その値が数値であることを示すための型として理解されます。システムエンジニアを目指す初心者の方にとって、CSSのプロパティ値に指定する数値は、このnumber型として認識されると覚えておくと良いでしょう。

公式リファレンス: <number>

構文(syntax)

1opacity: 0.5;

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ

関連プログラミング言語