ついて、最新仕様に基づいた解説します。記述が可能になります。いう古い仕様での実装でした。使い方について最新の仕様に基づく解説を書いてみようと思います。関数が入れ子にできるようになると、カスタムプロパティと組み合わせてもっと便利になるよという記事を書いています。本解説の基となる仕様書は下記です。いう形で呼び出すという形になります。white;}下記のように、任意の場所で呼び出します。var(--box-padding);}実際のスタイルとしては下記のように解釈されます。的な感じになってしまっていますが、うまく利用すれば効率的なスタイルシートの記述が可能になります。プリプロセッサをすでに利用している人ならイメージしやすいかと思いますが。ちなみに、カスタムプロパティの大文字小文字は区別されます。それぞれ個別に認識されます。使用する変数とカスタムプロパティが少し異なるのが、その解釈のされ方です。</div></div>これに対して下記のカスタムプロパティとスタイルを指定したとします。var(--text-color);}これが実際に反映されると画像のようになります。対してカスタムプロパティの定義がされている状態となります。直してみると下記のような感じに解釈されるということですね。(普通はこんな面倒な書き方しないと思いますが)、同じ変数を使うと言っても、記述の仕方はかなり異なることがわかると思います。変化しますし、同じ変数に異なる値が定義された場合にどの値が優先されるかが決まりますが、カスタムプロパティの場合は、カスタムプロパティの定義や変数呼び出し時に指定したセレクタと、継承によって値がセットされることになります。ユニバーサルセレクタによる変数の呼び出し仕様書内のサンプルソースにもありますが、下記のように、ユニバーサルセレクタで変数を呼び出す指定もできます。上記が適用されると、それぞれ内容に書いてあるとおりのテキストカラーになります。的には下記のように解釈されているということになります。下記のように、カスタムプロパティ内で、別のカスタムプロパティで定義された変数を呼び出すということも可能です。white);}もちろん、変数は別々に使用することができます。適用されてしまいますね。そこで、下記のようにカスタムプロパティが定義されていなかった場合に適用される指定を追加しておきます。適用されることになります。blue);}カスタムプロパティが使用できる場所カスタムプロパティは通常のプロパティと同じ扱いになりますので、プロパティが書ける場所であれば同様に使用できます。内で使ったりもできます。下記のような記述は不正な記述になり、正常に動作しませんので注意しましょう。変数として定義されていますが、変数として定義できるのは値だけですので、このような記述は不正です。20px;}単位なしの値を変数にしてしまう下記のサンプルではカスタムプロパティで単位なしの数値のみ変数として定義し、呼び出す際に単位を指定しています。便利そうですが、このような記述は正しく動作しませんので注意が必要です。使用することで、単位なしの値を変数として定義して使用することは可能です。下記のような記述なら、正しく動作します。しては下記のように解釈されます。使用した記述例を次にもう少し詳しく説明していきましょう。高度なカスタムプロパティの使用方法さらに高度な使い方を見てみましょう。使用して、より高度な変数の定義をすることも可能です。下記の記事で書いていますので詳しくはそちらをご覧ください。下記のように変数を定義できます。変数に定義する数値を変えることで、カラム数を簡単に変更することができますね。最後に、変数で呼び出された値が、そのプロパティでは使用できない値など、不正な値が呼び出されたときの挙動について見てみます。セットされてしまいますので、スタイルの指定としては不正な指定となります。方が適用されるのかというと、そうはなりません。あるプロパティに本来指定できない、不正な値がセットされた場合はそのプロパティの初期値が適用されます。指定されたことになるということですね。正しい値だったとしてもです。基本なのでわざわざ書く必要もないかもしれませんが。red;}さて、いかがだったでしょうか。使い方によってはかなり便利な機能だということがおわかりいただけたんではないかと。7月22日に正式リリースされる予定です。マーケティングに関するコンサルティングサービスを提供しています。詳しくはバーンワークス株式会社のサービス案内をご覧ください。ファイルがそのままでは正常に動作しなくなりました。ファイルの修正点をまとめます。サイトを制作するお仕事をしている方に向けた、なるべくわかりやすい解説としてまとめてみました。このフォーマットは、タップ操作によって軽快に閲覧可能なフルスクリーンのビジュアルコンテンツを提供可能にします。サポートなどが行われています。カスタムプロパティに対応したので早速試してみました。プロパティを変数から読み込めないようです。スタイル定義がすべて削除されました。観戦、インターネット、音楽鑑賞、筋トレ、腕時計収集が趣味。好物はゼリー、グミ、お酒、ラーメン。いいね!で最新情報を取得この記事が気に入ったらいいね!してください。最新の記事をお届けします。クリエイターが身につけておくべき新・100の法則。クリエイターが身につけておくべき新・100の法則。(yoshiki.kato@gmail.com)。