中央寄せくん

今回は中央寄せの使い方とどんなふうにカスタマイズができるか説明していきます。

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

## 基本

中央寄せは文字通り中央寄せブロックを作るためのものです。何かの紹介や引用などで使われることを想定しています。デフォルトでは以下のコードが出力されます。

<div style="max-width: 600px;margin:auto;color:#555555;background-color:#ffffff;font-size:14px;padding:7px;line-height:1.7;text-align:center;border:1px none #000000;">ここに本文を入力</div>

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

・max-width：最大幅

・margin:外余白

・color: 文字色

・background:背景色

・border：枠線

・font-size: 文字サイズ

・padding：内余白

・line-height：行間

・text-align: 位置ぞろえ

ごちゃごちゃとパラメータを設定していますが、やっていることはシンプルです。ブロックを中央寄せにする。中の文字を中央寄せする。

ブロックの中央寄せはこのままではよくわからないと思いますが、色を付けると分かります。

こんな風にブロックも中央寄せすることができます。

詳細設定を開くと、文字色など色、枠線の変更が可能になります。

## テンプレート

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

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

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

## コード説明

max-width: 600px;margin:auto;　この組み合わせでブロックを中央寄せすることができます。

幅を制限したブロック要素に外余白をautoにすると余白が自動調整され真ん中に配置されます。

中央寄せ以外にも利用可能です。例えば、左配置にしたい場合は特に何もしなくてよく、右配置にしたい場合はmargin-left:autoにすると実現できます。よく使われるテクニックです。

ブロックの枠線は種類を変更することが可能です。デフォルトは枠線なしです。

solid:1本線

double:2本線

dashed:破線

dotted:点線

なお2本線の場合は線幅を3px以上にしないと反映されません。最低線幅が1px+間1pxが必要なためです。

ちなみにですが、本文の中に画像タグを入れると画像も中央寄せすることが可能です。

中央寄せしたい何かがあればご利用してみてください。

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

ということで中央寄せくんの使い方でした。もしよくわからない点などあれば感想などでお知らせください。