Generators

• コントラスト比で迷わない！色の組み合わせチェック＆保存ツールを公開しました
  本文(小)12pxで表示されます 本文(中)16pxは、一般的なWEBサイトに使われている文字のサイズです。 見出し(中)24pxは、h2要素 見出し(大)32pxは、h1要素 ● ■ ◆ ▲ 文字色を変更（現在の色は: […]
• No Image画像をサクッと生成！ダミー画像ジェネレーター【無料ツール】
  Web制作の途中で「画像がまだない」「仮の画像が欲しい」とき、よくありますよね？そんなときに便利なのが「ダミー画像（プレースホルダー画像）」 今回は 簡単にダミー画像を作れるジェネレーター をご紹介します！ 画像URLを […]
• CSS/JavaScriptで作る！時間で背景が変わるグラデーション
  Webページの雰囲気を、もっと変わった感じにしたい・・・そんなときにおすすめなのが、時間によって背景がじわっと変化するグラデーション背景の演出です。 この記事では、JavaScriptとCSSを使って、数秒ごとに背景グラ […]
• CSSでふわふわアニメーションを作成！円がゆらゆら動くジェネレーター
  CSSでふわふわ動くアニメーションを作ろう Webサイトのデザインに「ふわふわ動く円」を追加したいと思ったことはありませんか？このジェネレーターを使えば、コードを書かずにCSSアニメーションを作成できます。リアルタイムで […]
• clip-pathを使ったCSS三角形ジェネレーター
  Web制作で三角形を作るとき、従来は border を活用して作る方法が一般的でした。しかし、clip-path を使えば、よりシンプルなコードで柔軟に三角形をデザインできます。三角形のサイズ・向き・色を自由に変更できる […]
• CSSフィルターを直感的に調整！Backdrop Filterジェネレーター
  Webデザインで背景をぼかしたり、明るさやコントラストを調整したい時に便利なのが、CSSの backdrop-filter プロパティです。このジェネレーターを使えば、ぼかし・彩度・明るさ・グレースケール・セピアなどのエ […]
• ふきだしジェネレーター | HTML & CSSを簡単作成！
  ウェブサイトやブログでよく使われる「ふきだし」を、簡単にカスタマイズしてHTML & CSSコードを生成できるジェネレーターです！テキストや余白、フォントサイズ、角の丸み、吹き出しの位置などを調整し、リアルタイム […]
• ランダムパスワードを簡単生成！クリックでコピーできる便利ツール
  オンラインサービスの登録やセキュリティ向上のために、強力なランダムパスワードを作成するのは大切です。しかし、毎回考えるのは面倒。下記のツールは、普通・強力・超強力を選択し、ワンクリックでランダムなパスワードを12個自動生 […]
• CSSグリッドを自由にカスタマイズ！Grid-template-columns ジェネレーター
  CSS の grid-template-columns と grid-template-rows を簡単に設定できる Grid-template Generator。カラム数・行数・ギャップをスライダーで調整するだけで、 […]
• 画像加工が簡単！CSSフィルタージェネレーターでエフェクトを自在に調整
  CSSフィルタージェネレーターとは？ 「CSSフィルタージェネレーター」は、CSSのfilterプロパティを使った画像加工をリアルタイムで試せるツールです。ぼかし、明るさ、コントラスト、色相回転、影付けなど、さまざまなエ […]
• CSS Clamp Function Generator
  プレビューの画面サイズ スマホ (375px) タブレット (768px) PC (1200px) プレビューの横幅 (px) 375px ここはプレビューされる文字列です CSS Code Copy CSS 最小フォン […]
• 背景に水玉柄（縦一列・レンガ型）が作れるCSSジェネレーター
  配置スタイル レンガ型 一列型 水玉のサイズ (px) 10px 水玉の間隔 (px) 30px 水玉の色 #3cb7ec 背景色 #fdffdb CSS Code Copy CS […]
• 背景にストライプ柄（縦・横・斜め）が作れるCSSジェネレーター
  Stripe Background Generator Preview CSS Code Copy CSS ストライプの方向 縦線 (90°) 横線 (0°) 斜線 (右下 -45°) 斜線 (左下 45°) ストライプ […]
• ボタンを引き立てる！斜め線とマイクロコピーを作成できるジェネレーター
  Preview ここに文字を入力 HTML Code Copy HTML CSS Code Copy CSS マイクロコピーを下記に入力するとプレビューに反映します (例:送料無料キャンペーン中！ 初めてでも安心のサポー […]
• 三角形を自動で作るCSSジェネレーター　アイコン作成に便利！
  Preview CSS Code Copy CSS 方向 右向き 左向き 上向き 下向き モード 正三角形 カスタムサイズ サイズ (px): 50px 幅 (px): 50px 高さ (px): 50px カラーの変更 […]
• Instagramバナー作成ジェネレーター　画像アップロード用
  ここに直接文字を入力してください フォントの種類・色・サイズは右側で変更します 最初の状態にリセットします 画像サイズ 1080 x 1080 (投稿用)1080 x 1920 (ストーリーズ用) 背景色 背景画像アップ […]
• 目を引くアイキャッチ画像を手軽に作成！選ぶだけで完成！簡単アイキャッチ画像作成ツール
  パターンや背景画像を選ぶだけで、簡単に目を引くアイキャッチ画像が作れるツールです。色や文字、図形を自由にカスタマイズして、SNSやブログにぴったりのオリジナル画像を手軽に作成できます。初心者でも直感的に操作できるので、ぜ […]
• グラデーションを選んで、文字入力・色変更・サイズ変更からのダウンロード。お手軽な自動アイキャッチジェネレーター
  メインテキスト サブテキスト 画像をダウンロード 使い方 メインテキストとサブテキストを入力します。 文字サイズや色を調整します。 背景グラデーションや図形を選んでデザインをカスタマイズします。 「画像をダウンロード」ボ […]
• 「クリックしてください」CSSボタンを作成する自動ジェネレーター
  クリックしてください HTMLコード HTMLをコピー CSSコード CSSをコピー 1.ボタンテキスト: 2.背景グラデーションを選択: CTA ブルー グリーン オレンジ ボーダーカラー #000000 ボーダー幅 […]
• 作成されたグラデーションを選んで編集　CSSグラデーションジェネレーター
  レッド系 ブルー系 グリーン系 オレンジ系 パープル系 ブラウン系 日本の伝統色 ゴールド系 ボタン色（CTA) 角度 (°)は、-180～180度を指定 0° 色1: #ff7eb3 色2: #ff758c CSSコー […]
• Webでよく使われるプリセットから選んでカスタマイズできるボーダーデザインジェネレーター
  プレビューエリア Solid Dashed Dotted Double Groove Ridge Inset Outset Radius Rounded Dotted Rounded Dashed ボーダー幅 (px): […]