関数について、具体的なサンプルソースをそえて解説してみたいと思います。プロパティに指定する値を計算式で書くことができる仕様です。関数についての解説を書いた記事がもう6年も前の記事で、さすがに古すぎるということでリンクを張れなかったんですが、いい機会なのでちょっと書き直してみます。すべてのモダンブラウザがサポートしていますので、念のため古いブラウザ向けに最低限のフォールバックとなる記述だけしておいてあげれば問題なく使用できます。関数の仕様は下記にあります。型の値が許容される場所であればどこでも使用できます。プロパティの値として使用したりはできません。基本的な記述方法は下記のようになります。関しては演算子の前後に半角スペースを必ず入れなければなりません。関しては前後の半角スペースについて任意ですが、ミスを防ぐためにも記述上は前後に半角スペースを入れる記述で統一しておいた方がよいでしょう。書式についてもう少し詳しく書いていきますが、仕様書上は下記のように書かれています。)また、あわせて下記のように定められています。演算子ごとに使用できるオペランド(演算の対象となる値)が決まっていますので覚えておく必要があります。(整数)」であるかがチェックされます。いう異なる型の値が指定されていますので、不正ということになります。あるかがチェックされます。逆側に指定された値の型で解決されます。ような指定は不正です。ようにしなければなりません。あるかがチェックされます。して解決され、それ以外であれば、左側の値の型に解決されます。割らないといけないということですね。ような記述をしてはいけません。除算はエラーになります。関数による四則計算の優先順位は学校で習うとおりです。使用することができます。いうことになりますね。ように記述する必要があります。具体的なサンプルソース基本的なところがわかったところで、具体的にどういうところで使うケースが考えられるか、サンプルソースを挙げてみます。計算したい例えば、デザインで下記のようにして欲しいという指定があったとします。とってねという指定です。指定があるので、下記のように表示されるはずです。余白にはならないということになります。しちゃう手もありますが、テキストが折り返された時に非常に可読性が悪く、よろしくない感じになりますので避けたい。みたいな指定がされている場合でもこの計算式で同じ効果が出せますね。変えないといけません。この辺はカスタムプロパティとの併用が可能な環境であればもっと楽に書けそうです。左にずらしたい場合、下記のように指定すれば実現できます。関数に対応しない環境用に、念のため下記のようにフォールバックとなる記述をしておくとよいかもしれません。余白を持たせたいなんて場合、下記のように指定することもできます。プロパティで要素を横並びにしたい場合、例えば左側は画像だから横サイズが固定だけど、右側はテキストエリアで、ここの横サイズは可変にしたいなんてことありますよね。なんとかできますが)、多くの場合、下記のような指定で頑張ることが多いんじゃないでしょうか。みたいな指定をして、高さを確保したりしますが、画像サイズやテキスト量の変化に柔軟に対応しづらいという問題があります。関数を使えば下記のように楽に書けます。使う方がよいとは思いますが、こういう使い方もできますよというサンプルのひとつとして挙げてみました。関数はうまく使うととても便利ですので、気になった方はぜひ上の解説を参考に使ってみてください。マーケティングに関するコンサルティングサービスを提供しています。詳しくはバーンワークス株式会社のサービス案内をご覧ください。サイトを制作するお仕事をしている方に向けた、なるべくわかりやすい解説としてまとめてみました。このフォーマットは、タップ操作によって軽快に閲覧可能なフルスクリーンのビジュアルコンテンツを提供可能にします。サポートなどが行われています。カスタムプロパティに対応したので早速試してみました。プロパティを変数から読み込めないようです。スタイル定義がすべて削除されました。サポートを発表しました。現時点では開発者向け実装のみ。以降で利用することができます。観戦、インターネット、音楽鑑賞、筋トレ、腕時計収集が趣味。好物はゼリー、グミ、お酒、ラーメン。いいね!で最新情報を取得この記事が気に入ったらいいね!してください。最新の記事をお届けします。クリエイターが身につけておくべき新・100の法則。クリエイターが身につけておくべき新・100の法則。(yoshiki.kato@gmail.com)。