Webデザイン

プリセット: ナビバー カードグリッド 聖杯レイアウト サイドバー 中央揃え コンテナ display flex inline-flex flex-direction row row-reverse column column-reverse justify-content flex-start flex-end center space-between space-around space-evenly align-items stretch flex-start flex-end center baseline align-content normal flex-start flex-end center space-between space-around stretch flex-wrap nowrap wrap wrap-reverse gap height（高さ） アイテム + 追加 - 削除 選択アイテム flex-grow flex-shrink flex-basis order（順序） align-self auto flex-start flex-end center baseline stretch width（幅） height（高さ） ラベル ライブプレビュー アイテムをクリックして選択 生成CSS CSSをコピー 関連ツール ボックスシャドウを生成 → CSSボックスシャドウジェネレーター ...

プリセット フェードイン フェードアウト 左からスライド 右からスライド 下からスライド 上からスライド バウンス パルス シェイク スピン フリップ スウィング アニメーションプロパティ 時間（秒） ...

CSS Flexbox プレイグラウンド すべてのFlexboxプロパティをビジュアルで実験できます。アイテムをクリックして個別プロパティを調整。生成CSSはそのままコピー可能。 ...

ブラウザタブ・ブックマーク・Google検索結果・スマホのホーム画面でファビコンがどう見えるかを確認できます。すべてブラウザ内で完結し、画像はサーバーにアップロードされません。 関連ツール： ファビコンを生成 → ファビコンジェネレーター | メタタグ → メタタグジェネレーター ここにファビコンをドラッグ＆ドロップ ...

マージン・ボーダー・パディング・コンテンツのサイズをリアルタイムで調整。Chrome DevToolsと同じ色分けで図が即座に更新され、コピー可能なCSSも自動生成されます。 ...

ベースカラーを選んでハーモニータイプを選択するだけで、HEX・RGB・HSL値・CSSカスタムプロパティ・WCAGコントラスト比を一括生成します。アップロード不要・登録不要、すべてブラウザ内で完結します。 ...

CSS transform とは？ transform プロパティを使うと、ドキュメントのレイアウトを崩さずに、要素を視覚的に移動・回転・拡縮・傾斜させることができます。トランスフォームはGPUアクセラレーション対応で、アニメーションとの相性も抜群です。 ...

CSSの cursor プロパティで使える全カーソル値を一覧で確認。カードにホバーしてカーソルをプレビューし、ボタンをクリックしてCSSをコピーできます。検索・カテゴリーで絞り込みも可能。カスタムカーソルのCSS生成ツールも内蔵しています。 ...

CSSの outline プロパティを即座に生成。スタイル・幅・色・オフセットをリアルタイムプレビューで調整し、コピーするだけで使えるCSSコードを取得できます。 プリセット ...

コピーしました 明度 50% 配色モード 補色 類似色 トライアド 分裂補色 テトラード 選択色・配色スウォッチ 選択色の値（クリックでコピー） WCAGコントラスト比（白・黒背景） 白背景サンプル 黒背景サンプル CSSカスタムプロパティ書き出し コピー 事業の請求書・経費管理もかんたんに ...