CSS– tag –
-
ふきだしジェネレーター | 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ジェネレーター
Polka Dot Background Generator Preview 配置スタイル レンガ型 一列型 水玉のサイズ (px) 10px 水玉の間隔 (px) 30px 水玉の色 #3cb7ec 背景色 #fdffdb CSS Code Copy CSS 使い方 1. 水玉の配置を選ぶ 「水玉の配置」をラジオボタンで選択すると、プレビューが即座に更新されます。 縦一列(水玉が縦方向に整列) レンガ型(水玉が交互に配置される) 2. 水玉のサイズと間隔を調整 スライダーで 水玉のサイズ と 水玉同士の間隔 を調整できます。 水玉のサイズ (px) … 水玉(ドット)の大き... -
背景にストライプ柄(縦・横・斜め)が作れるCSSジェネレーター
Stripe Background Generator Preview CSS Code Copy CSS ストライプの方向 縦線 (90°) 横線 (0°) 斜線 (右下 -45°) 斜線 (左下 45°) ストライプの幅 (px) 10px カスタム角度 (°) -45° ストライプの色 #ffae00 背景色 #fce6ba このジェネレーターを使えば、CSSだけで背景にストライプ柄を簡単に作成できます!横線・縦線・斜め線を選択し、線の太さ・間隔・色・角度 などをカスタマイズできるので、好みのデザインを簡単に設定できます。 ストライプ柄ジェネレーターとは? CSSの linear-gra... -
三角形を自動で作るCSSジェネレーター アイコン作成に便利!
Preview CSS Code Copy CSS 方向 右向き 左向き 上向き 下向き モード 正三角形 カスタムサイズ サイズ (px): 50px 幅 (px): 50px 高さ (px): 50px カラーの変更 #000000 「三角形を自動で作るCSSジェネレーター アイコン作成に便利!」は、CSSだけでさまざまな三角形を簡単に生成できる便利なツールです。WebデザインやUI/UXデザインでよく使われる三角形のアイコンや装飾を、直感的にカスタマイズしてコードを取得できます。 このツールを使えば、次のような場面で役立ちます ナビゲーションメニューの矢印アイ... -
グラデーションを選んで、文字入力・色変更・サイズ変更からのダウンロード。お手軽な自動アイキャッチジェネレーター
メインテキスト サブテキスト 画像をダウンロード 使い方 メインテキストとサブテキストを入力します。 文字サイズや色を調整します。 背景グラデーションや図形を選んでデザインをカスタマイズします。 「画像をダウンロード」ボタンをクリックして完成した画像を保存します。 メインテキスト (改行可能): メインテキストの色: メインテキストサイズ (px): サブテキスト (改行可能): サブテキストの色: サブテキストサイズ (px): 図形タイプ 四角形 円形 図形の色 図形の透明度 図形の幅 (px)&... -
「クリックしてください」CSSボタンを作成する自動ジェネレーター
プレビュー クリックしてください HTMLコード HTMLをコピー CSSコード CSSをコピー ボタンテキスト: 背景グラデーションを選択: 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