1. ホーム
  2. WEB制作

WEB制作ツール

16ツール
CSSボタンデザイン集👑

70種類以上のCSSボタンデザインからクリックで選択しプレビューしながら作成。シンプル/グラデ/影付き/3D/アウトライン/アニメ/アイコン付/シャイン/ニューモ/グラスモーフィズム等。色・テキストをライブ編集してHTML/CSS・Tailwind・Bootstrap・Material 3の4形式で即コピー。

見出しCSSデザイン集👑

h1〜h6見出しの装飾デザイン60種以上をクリック選択+ライブプレビュー。シンプル/おしゃれ/ビジネス/カジュアル。色・テキストカスタマイズしてHTML/CSS・Tailwind・Bootstrap対応コードを即コピー。

フォームデザイン集👑

ログイン/問合せ/ニュースレター/検索など20種類以上のフォームデザインからクリック1つで選択。シンプル/モダン/グラスモーフィズム/ニューモ等を完全ブラウザ内でプレビュー、HTML/CSSコードを即コピー。

カードデザイン集👑

プロフィール/商品/ブログ/価格表/通知など20種類以上のカードデザインから選択。シンプル/モダン/グラデ/影付き/グラスモーフィズム等。HTML/CSSコードを即コピー。

Flexboxジェネレータ

Flexboxプロパティの視覚的生成。

Gridジェネレータ

CSS Gridレイアウトの視覚的生成。

Meta/OGPタグ生成

SEO/OGP/Twitterカード一括生成。

robots.txt生成

クローラ制御ファイルの生成。

.htaccess生成

リダイレクト/Basic認証/IP制限等のテンプレ生成。

sitemap.xml生成

URL入力からsitemap.xmlを生成。

CSS/JS minify

CSS/JavaScriptの圧縮・最小化。

OGP情報取得

任意URLからOpen Graph Protocol/Twitterカード/Meta情報を取得しプレビュー表示。SNSシェア時の見え方確認に。

メールアドレス難読化

メールアドレスをHTML実体参照/JavaScript分割/CSS逆順表示等の方式で難読化。スパムボット収集対策に。

HTMLテーブル生成

行数・列数・ヘッダー有無・スタイルを指定してHTML/CSSのテーブルコードを生成。コピー&ペーストで即利用可能。

Webフォントプレビュー

Google Fonts日本語フォント12種を即時プレビュー。テキスト入力で見本を確認しCSS埋め込みコードを取得。

CSS単位変換

px/rem/em/%/vw/vh/pt等のCSS単位を相互変換。base font size指定、複数値一括変換、コピー可。