関数

CSS変数を使用する「var()関数」の使用方法とサンプルコードを記載。概要・使用方法{ プロパティ:var(変数); }「var()関数」はCSS変数を使うことができます。※internetExplorerでは未サポートです。プログラム言語の変数どうよう値を一時的に保存しておくための箱になります。数字をいれておけばカウンタアップなどもすることができます。CSS変数を定義するには２つのハイフン（-...

グリッドレイアウトでトラックの幅の指定を繰り返す「repeat()関数」の使用方法と使用例、サンプルコードを記載概要・使用方法{ プロパティ:repeat(繰り返す回数,トラックの幅); }「repeat()関数」、グリッドレイアウトのトラック幅の指定を繰り返すことができます。internetexplorerでは未対応です。この関数はgrid-template-columnsプロパティとgrid-...

グリッドレイアウトでトラックの幅の最小値と最大値を指定するminmax()関数の使用方法と使用例、サンプルコードを記載概要・使用方法{ プロパティ:minmax(最小値,最大値)}「minmax()関数」、グリッドレイアウトでトラックの幅の最小値と最大値をまとめて指定できます。上記図のように、ウィンドウ幅に余裕があり収まる場合は、minmax()関数で指定した最大値が採用され、ウィンドウ幅に余裕が...

色をHSL・HSLaで指定するhsl()関数、hsla()関数の使用方法と使用例、サンプルコードを記載概要・使用方法{ プロパティ:hsl(色相,彩度,明度)}{ プロパティ:hsla(色相,彩度,明度,透明度)}「hsl()関数」、またはhsla()関数は、色をHSL、HSLaカラーモデルで指定することができます。透明度を指定した場合は、重なりあった領域は色が混じり合います。色相、彩度、明度、透...

色をRGB・RGBaで指定するrgb()関数、rgba()関数の使用方法と使用例、サンプルコードを記載概要・使用方法{ プロパティ:rgb(赤,緑,青)}{ プロパティ:rgba(赤,緑,青,透明度)}「rgb()関数」、またはrgba()関数は、色をRGB、RGBaカラーモデルで指定することができます。透明度を指定した場合は、重なりあった領域は色が混じり合います。赤、緑、青、透明度赤,緑,青RG...

属性値を取得するattr()関数の使用方法と使用例、メールアドレスの@前後を関数で挿入するサンプルコードを記載概要・使用方法{ プロパティ:attr(属性)}「attr()関数」は選択要素の属性値取得しCSSで使うことができます。主に::beforeと::after疑似要素で、contetプロパティと一緒に使用します。属性属性名属性値を取得した属性名サンプルコード1hrefプロパティの値をattr...

プロパティ値の計算（四則計算）を行うcalc()関数の使用方法を記載

円形のグラデーションを表示する「radial-gradient関数」、円形のグラデーションを繰り返して表示する「repeating-radial-gradient関数」の使用方法を記載