記事
SmartPlusLabのオンラインツールを活用するための実用ガイドです。
-
CSS Gridコード生成ツールの使い方
列数・行数・間隔を入力すると、`display: grid`と列・行テンプレートを含むCSS Gridコードを生成できます。数字の列や行は、対応する`repeat`形式に変換されます。
-
CSSグラデーションコードの生成方法
種類、方向、色を入力すると、線形または円形の放射状グラデーション用CSSコードを生成できます。入力を省略した項目には初期値が使われます。
-
CSSをフォーマットして読みやすく整える方法
CSSを入力し、beautifyまたはminifyとインデント幅を選んで実行すると、CSSを読みやすく、または空白を減らした形に整えられます。空または空白だけの入力では、結果も空になります。
-
CSS Flexboxのレイアウトコードを生成する方法
方向、配置、折り返し、間隔を指定して生成操作を行うと、Flexbox用のCSSスニペットを作成できます。値を省略した場合は既定値が使われ、間隔は`px`付きで出力されます。
-
カラー名や16進数で名前付きカラーを検索する方法
カラー名の一部または生成された6桁の16進数を入力すると、名前付きカラーを検索できます。直接一致がなくても、6文字の有効な16進数なら近い名前付きカラーを確認できます。
-
CSS clip-path のシェイプを生成する方法
形状、サイズ、位置を指定すると、要素の切り抜きに使える CSS `clip-path` スニペットを生成できます。入力を省略した場合は、円形・サイズ 50・中央が使われます。
-
CSSのbox-shadowコードを生成する方法
CSSのbox-shadow生成ツールで、オフセット、ぼかし、広がり、色、内側シャドウを指定してCSS宣言を作成できます。数値を省略した場合は用意された初期値が使われます。
-
CSSキーフレームアニメーションを生成する方法
名前や再生時間などを指定して生成すると、キーフレーム定義と要素への適用宣言を含むCSSテキストを取得できます。入力を省略すると標準値が使われ、空のアニメーション名は `myAnimation` に置き換えられます。
-
テスト用の偽クレジットカード番号を生成する方法
テスト用の偽のクレジットカード番号を、件数とカード種別を指定して生成できます。必要に応じて有効期限、3桁のセキュリティコード、番号のグループ表示も追加できます。
-
指定日時までのカウントダウンを確認する方法
指定日時を `YYYY-MM-DD HH:MM` 形式で入力して計算すると、実行時点からの残り時間を日・時間・分・秒で確認できます。対象が過去または計算時点と同じ場合は、カウントダウンではなくエラー表示になります。
-
複利の伸びを計算する方法
元本、利率、運用年数、複利の頻度を入力すると、複利による増加額を計算できます。追加拠出を設定すれば、積み立てを含む条件も確認できます。
-
カラーコードから明るい色・暗い色のバリエーションを作る方法
色コードを1つ指定すると、明るい色と暗い色のバリエーションを段階数付きで作成できます。必要に応じて、明るい側または暗い側だけを結果に含められます。