CSS generator– category –
-
No Image画像をサクッと生成！ダミー画像ジェネレーター【無料ツール】
Web制作の途中で「画像がまだない」「仮の画像が欲しい」とき、よくありますよね？そんなときに便利なのが「ダミー画像（プレースホルダー画像）」 今回は 簡単にダミー画像を作れるジェネレーター をご紹介します！ 画像サイズを自由に指定（幅・高さ） 背景色と文字色が選べる 表示テキストも自由に 画像はリアルタイムでプレビュー URLとHTMLコードをコピーしてすぐ使える 画像URLをHTMLで使う例 <img src="https://dummy.kobeya.com/?width=400&height=300&bg=cccccc&color=000000&text=No... -
CSSでふわふわアニメーションを作成！円がゆらゆら動くジェネレーター
CSSでふわふわ動くアニメーションを作ろう Webサイトのデザインに「ふわふわ動く円」を追加したいと思ったことはありませんか？このジェネレーターを使えば、コードを書かずにCSSアニメーションを作成できます。リアルタイムでプレビューを確認しながら調整し、そのままCSSコードをコピーして使用できます。 CSSの知識がなくても、簡単にアニメーションを作成できるのが特徴です。 ふわふわアニメーションCSSジェネレーター 背景色: 円のサイズ (px): 50px ぼかし効果を追加 動く方向 上下 左右 振り幅 (px): 20px... -
clip-pathを使ったCSS三角形ジェネレーター
Web制作で三角形を作るとき、従来は border を活用して作る方法が一般的でした。しかし、clip-path を使えば、よりシンプルなコードで柔軟に三角形をデザインできます。三角形のサイズ・向き・色を自由に変更できる 「clip-path 三角形ジェネレーター」 CSSコードをリアルタイムで確認しながら、自分好みの三角形を作成してみましょう！ Triangle CSS Generator (clip-path) Settings モード: 正三角形 カスタムサイズ サイズ (px): 100px 幅 (px): 100px 高さ (px): 100px 方向: 上 右 下 左 カラー: リセット Pr... -
CSSフィルターを直感的に調整！Backdrop Filterジェネレーター
Webデザインで背景をぼかしたり、明るさやコントラストを調整したい時に便利なのが、CSSの backdrop-filter プロパティです。このジェネレーターを使えば、ぼかし・彩度・明るさ・グレースケール・セピアなどのエフェクトを直感的に調整し、リアルタイムでプレビューを確認できます。さらに、生成されたCSSコードをワンクリックでコピーできるので、すぐにコーディングに活用できます！ ぼかし (px): 明るさ (%): コントラスト (%): グレースケール (%): 色相回転 (°): 反転 (%): 不透明度 (%): セピア (%): 彩度 ... -
ふきだしジェネレーター | HTML & CSSを簡単作成！
ウェブサイトやブログでよく使われる「ふきだし」を、簡単にカスタマイズしてHTML & CSSコードを生成できるジェネレーターです！テキストや余白、フォントサイズ、角の丸み、吹き出しの位置などを調整し、リアルタイムでプレビューを確認しながら、自分好みのデザインを作成できます。 ここに文字を入力してプレビュー確認 テキスト: ここに文字を入力してプレビュー確認 フォントサイズ 16px 上下の余白 10px 左右の余白 10px 角の丸み:10px 吹き出しの位置: 下 上 右 左 HTML Code <div class="bubble tr... -
ランダムパスワードを簡単生成！クリックでコピーできる便利ツール
オンラインサービスの登録やセキュリティ向上のために、強力なランダムパスワードを作成するのは大切です。しかし、毎回考えるのは面倒。下記のツールは、普通・強力・超強力を選択し、ワンクリックでランダムなパスワードを12個自動生成します。気に入ったものをクリックするだけでコピーが完了します。強度を選んで、用途に応じた安全なパスワードを作成してください。 ランダムパスワード生成ジェネレーター パスワードの強度: 普通（8文字） 強力（12文字・記号2つ） 超強力（20文字・記号ランダム） シャッフ... -
CSSグリッドを自由にカスタマイズ！Grid-template-columns ジェネレーター
CSS の grid-template-columns と grid-template-rows を簡単に設定できる Grid-template Generator。カラム数・行数・ギャップをスライダーで調整するだけで、グリッドレイアウトを直感的に作成できます。リアルタイムプレビューで、 CSS コードを確認・コピー してお使いください。 カラム数: (4) 最大12 行数: (4) 最大12 ギャップ(px): (20px) リセット 生成されたCSSコード: コピー 使い方 カラム数を設定する スライダーを動かして、カラム数（横の数） を変更できます。 数値がリアルタイムで更新され、プ... -
画像加工が簡単！CSSフィルタージェネレーターでエフェクトを自在に調整
CSSフィルタージェネレーターとは？ 「CSSフィルタージェネレーター」は、CSSのfilterプロパティを使った画像加工をリアルタイムで試せるツールです。ぼかし、明るさ、コントラスト、色相回転、影付けなど、さまざまなエフェクトを直感的に調整できます。作成したフィルターのCSSコードをそのままコピーして、Webサイトやブログに適用できます。 CSS Filter Generator ぼかし (px): 0px 明るさ (%): 100% コントラスト (%): 100% グレースケール (%): 0% セピア (%): 0% 彩度 (%): 100% 色相回転 (°): 0° 反転 (%)... -
CSS Clamp Function Generator
プレビューの画面サイズ スマホ (375px) タブレット (768px) PC (1200px) プレビューの横幅 (px) 375px ここはプレビューされる文字列です CSS Code Copy CSS 最小フォントサイズ (px)（自動計算） 10px 推奨サイズ (vw)（自動計算） 5vw 最大フォントサイズ (px) 24px 最小フォントサイズの計算基準 (デフォルト: 3) 3 使い方（ジェネレーター） この CSS Clamp Function Generator を使うと、フォントサイズを視覚的に調整しながら clamp() のCSSコードを生成 できます。 1.最大フォントサイズを調整 「最大フォ... -
背景に水玉柄（縦一列・レンガ型）が作れるCSSジェネレーター
配置スタイル レンガ型 一列型 水玉のサイズ (px) 10px 水玉の間隔 (px) 30px 水玉の色 #3cb7ec 背景色 #fdffdb CSS Code Copy CSS 使い方 1. 水玉の配置を選ぶ 「水玉の配置」をラジオボタンで選択すると、プレビューが即座に更新されます。 縦一列（水玉が縦方向に整列） レンガ型（水玉が交互に配置される） 2. 水玉のサイズと間隔を調整 スライダーで 水玉のサイズ と 水玉同士の間隔 を調整できます。 水玉のサイズ (px) … 水玉（ドット）の大きさを調整 水玉の間隔 (px) … 水玉同士の間... -
背景にストライプ柄（縦・横・斜め）が作れるCSSジェネレーター
Stripe Background Generator Preview CSS Code Copy CSS ストライプの方向 縦線 (90°) 横線 (0°) 斜線 (右下 -45°) 斜線 (左下 45°) ストライプの幅 (px) 10px カスタム角度 (°) -45° ストライプの色 #ffae00 背景色 #fce6ba このジェネレーターを使えば、CSSだけで背景にストライプ柄を簡単に作成できます！横線・縦線・斜め線を選択し、線の太さ・間隔・色・角度 などをカスタマイズできるので、好みのデザインを簡単に設定できます。 ストライプ柄ジェネレーターとは？ CSSの linear-gra... -
ボタンを引き立てる！斜め線とマイクロコピーを作成できるジェネレーター
Preview ここに文字を入力 HTML Code Copy HTML CSS Code Copy CSS マイクロコピーを下記に入力するとプレビューに反映します (例:送料無料キャンペーン中！ 初めてでも安心のサポート！など) フォントサイズ (px) 20px 文字の色 #000000 線の長さ (px) 50px 線の太さ (px) 3px 線の角度 (°) 45° 線の色 #000000 「ボタンの上、あしらいと文字のマイクロコピージェネレーター」は、ボタンのデザインを引き立てるための便利なツールです。斜め線の装飾とマイクロコピーを組み合わせて、視覚的に魅力的なデザインを... -
三角形を自動で作るCSSジェネレーター アイコン作成に便利！
Preview CSS Code Copy CSS 方向 右向き 左向き 上向き 下向き モード 正三角形 カスタムサイズ サイズ (px): 50px 幅 (px): 50px 高さ (px): 50px カラーの変更 #000000 「三角形を自動で作るCSSジェネレーター アイコン作成に便利！」は、CSSだけでさまざまな三角形を簡単に生成できる便利なツールです。WebデザインやUI/UXデザインでよく使われる三角形のアイコンや装飾を、直感的にカスタマイズしてコードを取得できます。 このツールを使えば、次のような場面で役立ちます ナビゲーションメニューの矢印アイ... -
「クリックしてください」CSSボタンを作成する自動ジェネレーター
クリックしてください HTMLコード HTMLをコピー CSSコード CSSをコピー 1.ボタンテキスト: 2.背景グラデーションを選択: CTA ブルー グリーン オレンジ ボーダーカラー #000000 ボーダー幅 (px): 2 px フォントサイズ (px): 24 px 文字色: #ffffff 角丸 (px): 2 px ウェブサイトに訪れたユーザーに行動してもらうために設置する「コールトゥアクション（CTA）ボタン」は、コンバージョンを高める重要な要素です。デザイン性の高いボタンは、視覚的にユーザーの目を引き、クリック率を向上させます。ここではジェネ... -
作成されたグラデーションを選んで編集 CSSグラデーションジェネレーター
レッド系 ブルー系 グリーン系 オレンジ系 パープル系 ブラウン系 日本の伝統色 ゴールド系 ボタン色（CTA) 角度 (°)は、-180～180度を指定 0° 色1: #ff7eb3 色2: #ff758c CSSコード background: linear-gradient(45deg, #ff7eb3, #ff758c); CSSをコピーする -
Webでよく使われるプリセットから選んでカスタマイズできるボーダーデザインジェネレーター
プレビューエリア Solid Dashed Dotted Double Groove Ridge Inset Outset Radius Rounded Dotted Rounded Dashed ボーダー幅 (px): ボーダーカラー: ボーダースタイル: Solid Dashed Dotted Double Groove Ridge Inset Outset ボーダー半径 (px): CSSコード border: 2px solid #000; border-radius: 0px; CSSコードをコピー ウェブデザインにおいて「ボーダー（境界線）」は、要素の強調や視覚的な整理に欠かせない要素です。「ボーダーデザインジェネレーター」では、Webでよく使われるプリセットデザインを選択...
1