見出しジェネレーター

当サイトは見出しのCSSを直感的に作成できるサイトです。
web制作をしていると必ずと言っていいほど作成する見出し、そんな見出しのデザイン・コーディングが時短になればと思い作りました。

PCでの使用を想定しています。
なるべくシンプルなコードで作成できるようにしていますので、是非ご活用ください。

HTMLについて

見出し部分にはすべてh2を使っています。 そのためh2デフォルトのCSSにお気をつけください。

もちろん別のタグに置き換えることも可能です。

フォントについて

フォントはNoto Sans Japaneseを使っています。
font-weightを操作できるようにしていますが、Noto Sans Japanese対応の太さになっていますのでご注意ください。

Noto Sans Japaneseを使用する場合以下をコピペしてください。

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
body {
 font-family: "Noto Sans JP", sans-serif;
}

リセットCSSについて

以下のCSSを共通して使用しています。
デザインが崩れる場合は確認してみてください。

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}