HEADING CSS🎨
見出しCSSジェネレーター
見出し（h2・h3）のデザインを選び、色や線の太さを調整して、そのまま貼れるHTMLとCSSを書き出せるツールです。プレビューで長い文字が2行になったときの見え方まで確認できます。処理はすべてブラウザ内で完結し、入力内容がサーバーへ送信されることはありません。
1. デザインを選ぶ
2. 色と形を調整する
4. コードをコピーする
見出しの文字
メインカラー
背景色
文字色
線の太さ
px
角丸
px
文字サイズ
px
出力セレクタ
（クラスを選ぶと、ほかの見出しに影響させずに使えます）
3. プレビュー
見出しのサンプルテキストです
ここに本文が続きます。見出しと本文の間隔や、装飾が本文より目立ちすぎていないかを確認してください。
HTML
CSS
コピーしました
このツールの特長
ブラウザ内で完結・サーバー送信なし入力した文字や設定が外部に送られることはありません。制作中のサイトの見出し文をそのまま入れて試せます。
2行になったときの崩れを事前に確認デザイン集のサンプルは短い文言で作られていますが、実際の見出しは長くなります。長文プレビューで、公開前に崩れを見つけられます。
クラス指定で安全に導入出力セレクタを「クラス」にすれば、サイト内のほかの見出しに影響を与えずに使えます。WordPressのテーマCSSに負けにくい書き方です。
色は6桁のカラーコードで管理カラーピッカーとコード入力の両方に対応。ブランドカラーをそのまま入力できます。
使い方
デザインを選び、色・線の太さ・角丸・文字サイズを調整すると、プレビューと下のコードが同時に更新されます。HTMLとCSSをそれぞれコピーして、サイトに貼り付けてください。WordPressの場合、CSSは「外観 > カスタマイズ > 追加CSS」に貼るのが手軽です。
出力セレクタを h2 や h3 にすると、サイト内のすべての該当見出しにデザインが適用されます。記事本文の見出しだけに効かせたい場合は、コピーしたCSSのセレクタの前に本文を囲むクラス（テーマにより .entry-content など）を付け足してください。
※ 本ツールは無料でご利用いただけます。生成したコードの利用により生じたいかなる損害についても、当社は責任を負いかねます。
▶ このツールの使い方（貼り付け方・反映されないときの対処）：見出しCSSジェネレーターの使い方
▶ 見出しデザインの選び方と失敗例：CSSの見出しデザイン集｜コピペで使えるh2・h3のスタイルと選び方
▶ ほかのツールを見る：提供ツール一覧