見出しデザイン作成くん

今回は見出しデザインの使い方とどんなふうにカスタマイズができるか説明していきます。

URL : https://k-editor.com/editor/header/

## 基本

見出しデザインは文字通り見出しを作るためのものです。下線見出し、付箋見出し、枠線見出しなど作ることができます。デフォルトでは以下のコードが出力されます。

<div style="color:#333333;background-color:#ffffff;font-size:18px;padding:5px;line-height:1.5;text-align:left;font-weight:bold;border-bottom:1px solid #000000;">見出し</div>

それぞれの意味は以下の通り。

・color: 文字色

・background:背景色

・border：枠線

・font-size: 文字サイズ

・padding：内余白

・line-height：行間

・text-align: 位置ぞろえ

・font-weight:太字設定

基本的にはboxなどと同じような設定ですが見出しとして見えるように設定されています。

見出し種類として、枠なし、左線、下線、上下線、枠線を選べるようにしています。まずは見出し種類を選んでから色を決めていくのが良いと思います。

詳細設定を開くと、余白、枠線、枠線の種類の変更が可能になります。

## テンプレート

デフォルトの設定としていくつか用意しています。上部にあるテンプレから選択すると開発者が適当に設定したものが選べます。

また、カスタムテンプレートの設定の項目で”この設定を保存する”ボタンを押すと現在設定しているものがブラウザに保存されます。

保存した場合、次に同じページを訪問した時にテンプレの選択肢に表示されます。

よく使う色や見出しの種類を作って保存しておくとよいでしょう。

## コード説明

デフォルトで内余白を5px入れてますので線と文字の余白があります。ゆったりとした見出しを作る場合は少し大きめにすると良いかと思います。またシュッとした見出しの場合は余白を小さ目にするといいかと思います。

また、よく使われるであろう見出しの設定について説明します。

・下線

・上下線

・塗りつぶし

・枠線

・付箋

・下線

シンプルな見出しです。デフォルトで設定されています。カスタマイズする場合は枠線色をいじるか位置ぞろえをいじるといいかと思います。余白を0にすると下線の始点と文字の始点が合わさります。

・上下線

見出し種類を上下線にすると作れます。コツとしては、線幅を若干太めに設定すると見栄えします。背景色を設定してもいいかもしれません。位置ぞろえを中央寄せにするのもよいでしょう。

・塗りつぶし

背景色を白から変更すると作れます。見出し種類は、なしまたは枠線にするといいでしょう。

・枠線

見出し種類を枠線にすると作れます。コツとしては線幅を若干太めに設定、また中央寄せににすると見栄えします。

背景色はどちらでもいいですが、白の場合はスッキリとした印象になるかと思います。

・付箋

見出し種類を左線にして線幅を10px程度にします。そして背景色を設定します。そうすると付箋風の見出しが作成できます。余白と枠幅を大きくすることでそれっぽく見えると思います。

見出しを作りたいときにご利用してみてください。

-　-　- ✂切り取り✂ -　-　-

ということで見出しデザイン作成くんの使い方でした。もしよくわからない点などあれば感想などでお知らせください。