14【技術】ＨaＲuかなる水平線
白猿
「今回はレイアウト系のタグである<hr>タグを紹介しよう」
黒猫
「吾輩、これは知っているぞ。横の一本線を引くタグだね」
白猿
「hrタグは『horizontal rule（水平方向の罫線）』の略だな。横に線が引けるから、話題の転換なんかでも便利だ」
・゜゜・*:.。..。.:*・゜゜・*:.。
[記事の入力内容]
普通の横線
<hr>
横線に横幅と高さと色を指定
<hr style="width:400px; height:15px; background-color:red;">
・゜゜・*:.。..。.:*・゜゜・*:.。
[記事の表示例]
・゜゜・*:.。..。.:*・゜゜・*:.。
白猿
「単に<hr>だけだと細い黒線が横に引かれる。これにstyle属性をつけると太さや色も指定できるぜ」
黒猫
「たんに区切り線を引くだけなら、タグを使わずにマイナス記号を並べてもいいよね」
白猿
「そうだね。ここの解説でも文字を使った区切り線をよく使っている。例えばこんなのがあるぜ」
区切り線の例
---------------------------------
・゜゜・*:.。..。.:*・゜゜・*:.。
+ + + + + + + + + + + + + + + + +
■□■□■□■□■□■□■□■□
_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-
白猿
「文字を使った区切り線の場合、見ている人の画面の横幅によっては途中で改行されるかもな。スマートフォンとか」
黒猫
「凝ったデザインの区切り線だと、改行されると不自然にみえるかな。ここの解説でも区切り線は短くしているね」
白猿
「では『割烹エディター』で区切り線をつくるものを紹介しよう」
・゜゜・*:.。..。.:*・゜゜・*:.。
『割烹エディターのURL』
https://k-editor.com/
・゜゜・*:.。..。.:*・゜゜・*:.。
[割烹エディターのサイト：トップ画面]
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「吾輩も開いたよ」
白猿
「黒猫さん。画面の『おしながき』『単品』の下の『カスタム区切り』をクリックしてみよう」
黒猫
「『カスタム区切り作成くん』がでたよ」
・゜゜・*:.。..。.:*・゜゜・*:.。
・゜゜・*:.。..。.:*・゜゜・*:.。
白猿
「見ての通り、区切り線をつくる機能だ。線の中央に文字を入れることができる。『---ここから---』『--ここまで--』など２種類作って挟んでもいいぜ」
黒猫
「色や線の太さ、それに線の種類も簡単に変えられるみたいだね」
白猿
「ある程度いじったら、例によって『押すとなろう用に変換される』のボタンでタグに変換しよう」
・゜゜・*:.。..。.:*・゜゜・*:.。
タグの例
<div style="margin:1em 0;font-size:16px;line-height:1;text-align:center;"><span style="color:#32c36a;background:#ffffff;padding:10px;">＋ ＋ ＋</span><div style="margin-top:-8.5px;border-top:1px double #f20202;"></div></div>
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「<div>タグと<span>タグでできているんだね」
白猿
「区切り線があると、話題が変わったことが見た目でわかりやすくなるぜ。記事を本文と後書きに分ける使い方もあるかもな」
