囲み枠の横棒をなくすには

こんにちは、パソコンインストラクターの川上雄大です。

このようなご質問をいただきましたので、修正方法を記事にします。

囲み枠を作ったのですが、途中で横棒が入ってしまいます。

横棒をなくしたいのですが、どのようにすればなくなるのでしょうか？

たとえば、このような囲み枠のことですね↓

■タイトル■

文章その１

文章その２

文章その３

文章その４

画像でみるとこんな囲み枠です↓（【続編】見出し付きの囲い枠 -その２）

ここでは、2つの修正方法をお伝えいたします。（もちろん、他にもたくさん修正方法がありますが）

1つ目は、

「HTML表示」で見てみますと、

となっています。

横棒が入るのは、

「文章その１」以降の余計な

</div>
<div style="background-color: rgb(255, 248, 220); border: 1px solid rgb(184, 134, 11); padding: 10px; font-size: 1em;">

を削除します。

そして、「通常表示」に戻ってみます。

しかし、このままだと、このように↓文章が続いてしまいます。

■タイトル■

文章その１文章その２文章その３

文章その４

「通常表示」で、改行はEnterではなく、

Shift＋Enter

（Shiftキーを押しながらEnterキーを押す）

で行います。

すると、このように改行され、横棒も入りません。

■タイトル■

文章その１
文章その２
文章その３

文章その４

また、2つ目は、

「HTML表示」にしないで修正するには、

■タイトル■

文章その１

文章その２

文章その３

文章その４

「文章その２」の先頭にカーソルをもっていき、BackSpaceキーを押して、いったん改行をなくします。

■タイトル■

文章その１文章その２

文章その３

文章その４

その後、Shiftキーを押しながらEnterキーを押して改行しなおします。

■タイトル■

文章その１
文章その２

文章その３

文章その４

このような操作を、「文章その３」「文章その４」の前でも行います。

■タイトル■

文章その１
文章その２
文章その３
文章その４

このようにして修正することもできます。

そう、最初から、枠の中では

Shift＋Enter

（Shiftキーを押しながらEnterキーを押す）

で改行するとよいですね！

以上、囲み枠の修正でした。

LIDS札幌・ライフデザインスクール
川上雄大