2022-07-10

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

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

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

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

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

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