囲み枠で改行したら出来てしまう線の直し方

（今回の記事は、スマホからは正確に表示されないことがあります。ぜひパソコンからご覧ください。）

こころ・え・ごころのキタガワです。

ここ数日、いくつかのブログで、変なところで「線」が入ってしまっている囲み枠をお見かけしました。

たとえば

本来はこうして一つの囲み枠として

書きたいのに

文章の途中で

↑線が入っちゃっている。

これは、囲み枠の中に文章を入力していて

「改行」した時にできたものですね。

以前もデザイン囲み枠の紹介ついでに書いたこともあるんですが、あらためてこの「線」が出た時の直し方と、出ないようにする方法をお伝えしようかな、と思います。

線が出てしまった時の直し方

【1】HTML表示から原因を取り除く

HTML側から表示させると問題の箇所は次のような状態です。

<div style="border-width: 1px; border-style: solid; border-color: rgb(153, 153, 51); background: rgb(249, 249, 186) none repeat scroll 0% 0%; padding: 5px; max-width:550px;">文章の途中で</div>
<div style="border-width: 1px; border-style: solid; border-color: rgb(153, 153, 51); background: rgb(249, 249, 186) none repeat scroll 0% 0%; padding: 5px; max-width:550px;">↑線が入っちゃっている。</div>

黄色いマーカ部分</div><div style="~">が余計に増えてしまった部分なので、ここを削除。

そうすると枠線は消えますが、改行も元に戻ります。

文章の途中で↑線が入っちゃっている。

なので、今回は「シフトキー」を押しながら改行してください。

文章の途中で
↑線が入っちゃっている。

解決（笑）

囲み枠内での改行は、必ずシフトキーを押しながら

と覚えてくださいね。

【2】元に戻すボタンを使って一度リセット

どうしてもHTMLが苦手、またはアメケアを使って囲み枠を入れている方には、「もどすボタン」を使って一度リセットすると早いかもしれません。

問題の囲み枠内を（↓）のように選択します。