囲み枠の横棒をなくすには | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…


テーマ:

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

 

 

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

 

 

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

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

 

 

 

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

 

■タイトル■
文章その1
文章その2
文章その3

文章その4

 

 

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

 

 

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

 

 

1つ目は、

 

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

 

<div style="background:rgb(184, 134, 11); border:1px solid rgb(184, 134, 11); padding-left:10px; font-size:1.16em;"><font style="color:rgb(255, 255, 255); font-weight:bold;">■タイトル■</font></div>
<div style="background-color: rgb(255, 248, 220); border: 1px solid rgb(184, 134, 11); padding: 10px; font-size: 1em;">文章その1</div>
<div style="background-color: rgb(255, 248, 220); border: 1px solid rgb(184, 134, 11); padding: 10px; font-size: 1em;">文章その2</div>
<div style="background-color: rgb(255, 248, 220);border:1px solid rgb(184, 134, 11);padding:10px; font-size:1em;">文章その3</div>
<div style="background-color: rgb(255, 248, 220);border:1px solid rgb(184, 134, 11);padding:10px; font-size:1em;">
<p>文章その4</p></div>

 

 

となっています。

 

 

横棒が入るのは、

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

 

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

 

を削除します。

 

 

<div style="background:rgb(184, 134, 11); border:1px solid rgb(184, 134, 11); padding-left:10px; font-size:1.16em;"><font style="color:rgb(255, 255, 255); font-weight:bold;">■タイトル■</font></div>
<div style="background-color: rgb(255, 248, 220); border: 1px solid rgb(184, 134, 11); padding: 10px; font-size: 1em;">文章その1</div>
<div style="background-color: rgb(255, 248, 220); border: 1px solid rgb(184, 134, 11); padding: 10px; font-size: 1em;">
文章その2</div>
<div style="background-color: rgb(255, 248, 220);border:1px solid rgb(184, 134, 11);padding:10px; font-size:1em;">
文章その3</div>
<div style="background-color: rgb(255, 248, 220);border:1px solid rgb(184, 134, 11);padding:10px; font-size:1em;">

<p>文章その4</p></div>

 

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

 

 

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

 

 

■タイトル■
文章その1文章その2文章その3

文章その4

 

 

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

 

Shift+Enter

(Shiftキーを押しながらEnterキーを押す)
 

で行います。

 

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

 

■タイトル■
文章その1
文章その2
文章その3

文章その4

 

 

また、2つ目は、

 

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

 

 

■タイトル■
文章その1
文章その2
文章その3

文章その4

 

 

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

 

 

■タイトル■
文章その1文章その2
文章その3

文章その4

 

 

 

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

 

 

■タイトル■
文章その1
文章その2
文章その3

文章その4

 

 

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

 

 

■タイトル■
文章その1
文章その2
文章その3
文章その4

 

 

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

 

 

 

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

 

Shift+Enter

(Shiftキーを押しながらEnterキーを押す)

 

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

 

 


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

 

Instagram

 


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

 

 

 

 

川上雄大

 

川上 雄大☆パソコンインストラクターさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント