54文字の割烹作成くん

今回は54文字の割烹作成くんの使い方とどんなふうにカスタマイズができるか説明していきます。

URL : https://k-editor.com/editor/54moji/

## 基本

54文字の割烹作成くんは文字通り54文字の割烹を作成するための物です。54文字の割烹を作りたいときにお使いください。デフォルトでは以下のコードが出力されます。

<div style="font-family:Yu Mincho,YuMincho,Hiragino Mincho Pr6N,Hiragino Mincho ProN,'Noto Serif JP',serif;text-align:center;background:#FAFAF7;color:#333;font-size:24px;padding:10px;line-height:1;margin:-10px;"><div style="border:2px solid #836E55;padding:6px;width:260px;margin:0 auto;"><div style="border:1px solid #836E55;"><div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px 0;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="clear:both;"></div></div><div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px 0;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="clear:both;"></div></div><div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px 0;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="clear:both;"></div></div><div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px 0;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="clear:both;"></div></div><div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px 0;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="clear:both;"></div></div><div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px 0;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="clear:both;"></div></div><div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px 0;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="clear:both;"></div></div><div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px 0;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px;width:31px;">　</div><div style="clear:both;"></div></div><div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 0 0;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px;width:31px;">　</div><div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px;width:31px;">　</div><div style="clear:both;"></div></div></div></div><div style="margin: 1em;color:#1B95E0;">#54文字の割烹</div></div>

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

・color: 文字色

・background:背景色

・font-size: 文字サイズ

・padding：内余白

・margin:外余白

・line-height：行間

・letter-spacing:文字間幅

・font-family:フォント

・width:横幅

・border:枠線

注意点は半角文字を使うとずれることです。基本的に全角文字だけ使ってください。なお、文字サイズや文字間隔、行間などを完全固定しているので指定以外のサイズの要素を入れるとずれます。

できるだけ単品でお使いください。

## コード説明

まずは2重枠を生成しその中に1文字ずつ分解した□を入れ込んでいるだけです。超力技です。

<div style="float:left;margin-right:9px;padding:3px;border:1px dashed #836E55;border-width:0 1px 1px 0;width:31px;">　</div>

を一文字ずつ割り当てています。力技です。

縦書き割烹と同じように縦書きCSSが使えないのでこのようなやり方を行っています。

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

ということで54文字の割烹作成くんの使い方でした。もしよくわからない点などあれば感想などでお知らせください。