すなりんのシステム開発道具箱

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()関数の使用方法を記載

ポインターイベントの対象になる場合の条件を指定する「pointer-eventsプロパティ」の使用方法を記載

画像などのボックスにフィットさせる方法を指定する「object-fit」プロパティ、画像などをボックスに揃える位置を指定する「object-positionプロパティ」の使用方法を記載

カウンター値を更新する「counter-incrementプロパティ」、カウンター値をリセットする「counter-resetプロパティ」の使用方法を記載

要素や疑似要素の内側に挿入するものを決定する「contentプロパティ」の使用方法を記載

マウスポインターの表示方法を指定する「cursorプロパティ」の使用方法を記載

タッチ画面におけるユーザーの操作を指定する「touch-actionプロパティ」の使用方法を記載

変形の参照ボックスを参照する「transform-boxプロパティ」の使用方法を記載

3Dで変形する要素の背面の表示方法を指定する「backface-visibilityプロパティ」の使用方法を記載

3Dで変形する要素の視点の位置を指定する「perspective-originプロパティ」の使用方法を記載

3D空間で変形する要素の子要素の配置方法を指定する「transform-styleプロパティ」の使用方法を記載

3D変形させる時の要素の奥行きの基点を指定する「perspectiveプロパティ」の使用方法を記載

変形する要素の中心点の位置を指定する「transform-originプロパティ」の使用方法を記載

2D・3D変形関数を適用して要素を変形する「transformプロパティ」の使用方法を記載

アニメーション関連のプロパティをまとめて指定する「animationプロパティ」の使用方法を記載

トランジション効果（transition-property、transition-duration、transition-timing-function、transition-delay）をまとめて指定する「transitionプロパティ」の使用方法を記載

トランジションが開始されるまでの待ち時間を指定するプロパティを指定する「transition-delayプロパティ」の使用方法を記載

トランジションの加速曲線を指定する「transition-timing-functionプロパティ」の使用方法を記載

トランジションが完了するまでの時間を指定する「transition-durationプロパティ」の使用方法を記載

トランジションを適用するプロパティを指定する「transition-propertyプロパティ」の使用方法を記載

アニメーションの再生前後のスタイルを指定する「animation-fill-modeプロパティ」、アニメーションの繰り返し回数を指定する「animation-interation-countプロパティ」、アニメーションの再生方向を指定する「animation-directionプロパティ」の使用方法を記載

アニメーションの進行度を指定する「animation-timing-functionプロパティ」、アニメーションが開始するまでの時間を指定する「animation-delayプロパティ」、アニメーションの再生、または一時停止を指定する「animation-play-stateプロパティ」の使用方法を記載

アニメーションの動きを指定する@keyframes規則、アニメーションを識別する名前を指定する「animation-nameプロパティ」、アニメーションが完了するまでの時間を指定する「animation-durationプロパティ」の使用方法を記載

行と列の間隔をまとめて指定する「gapプロパティ」、行の間隔を指定する「row-gapプロパティ」、列の間隔を指定する「column-gapプロパティ」の使用方法を記載

グリッドトラックをまとめて指定する「grid-areaプロパティ」、行と列のグリッドアイテムの位置を指定する「grid-rowプロパティ」、「grid-columnプロパティ」、行と列のグリッドアイテムの開始位置と終了位置を指定する「grid-row-startプロパティ」、「grid-row-endプロパティ」、「grid-column-startプロパティ」、「grid-column-endプロパティ」の使用方法を記載

ボックス全体の揃え位置をまとめて指定する「place-content」プロパティ、ボックス全体の横方向の揃え位置を指定する「justify-content」プロパティ、ボックス全体の縦方向の揃え位置を指定する「align-content」プロパティの使用方法を記載

フレックスアイテムの幅をまとめて指定する「flex」プロパティ、フレックスアイテムの幅の伸び率を指定する「flex-grow」プロパティ、フレックスアイテムの幅の縮み率を指定する「flex-shrink」プロパティ、フレックスアイテムの基本の幅を指定する「flex-basis」プロパティの使用方法を記載

先頭に表示されるブロックコンテナーの最小行数を指定する「windows」プロパティ、末尾に表示されるブロックコンテナーの最小行数を指定する「orphans」プロパティの使用方法を記載

段組みの罫線の幅とスタイルと色を一括で指定できる「column-rule」プロパティ、段組みの罫線の幅を指定する「column-rule-width」プロパティ、段組みの罫線のスタイルを指定する「column-rule-style」プロパティ、段組みの罫線の色を指定する「column-rule-color」プロパティの使用方法を記載

段組みの列数と幅を一括指定する「columns」プロパティ、段組みの列数を指定する「column-count」プロパティ、段組みの列幅を指定する「column-width」プロパティの使用方法を記載

書字方向に応じてスナップされる位置のパディングの幅をまとめて指定する「scroll-padding-blockプロパティ」、「scroll-padding-inlineプロパティ」、書字方向に応じてスナップされる位置のパディングの幅を指定する「scroll-padding-block-start」、「scroll-padding-block-end」、「scroll-padding-inline-start」、「scroll-padding-inline-end」使用方法を記載