FROM CACHE - jp_header
解決済

商品ページ説明欄に<br>が入る

ヤブタ
訪問者
2 0 0

お世話になります。素人が強引にhtml基礎知識で編集を行っております。

 

商品の「説明」箇所をコード編集するために「</>(エディタを見る)」で表示切替を行ったところ、入れた覚えのない「<br>」が挿入されてしまいます。

【元の記述】
<div style="width: 5px; height: 27px; float: left; background-color: #cccccc;"></div>
<strong><span style="font-size: 16px;"> 特長</span></strong>
<div style="border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: solid;"></div>
【<br>が挿入された記述】
<div style="width: 5px; height: 27px; float: left; background-color: #cccccc;"><br></div>
<strong><span style="font-size: 16px;"> 特長</span></strong>
<div style="border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: solid;"></div>

 

このような現象が起きる原因として、どのようなことが考えられるでしょうか?
また、解決策はありそうなのでしょうか?
おそれいりますが、教えていただきたく、よろしくお願いいたします。

  • CSS
1 件の受理された解決策

Jizo_Inagaki
Shopify Partner
1009 380 697

成功

多くのエディタはそれぞれの設定に従いHTMLを整形するため、現在のHTML構造ではbrタグの挿入は防げないと思います。

 

他方、実現したい形が不明なので推測に基づきますが、「特徴」の横と下に線を引きたいのであれば以下のような方向性で構造とスタイリングを変更する方が良いと思われます。

<div style="border-bottom:1px solid #ccc; padding-bottom: 1em;">
<div style="font-size: 16px; padding:.5em 0 .5em .5em; border-left:5px solid #ccc;"><strong>特長</strong></div>
</div>

※同じ装飾を作る方法は他にいくつもありますので、上記は記載されたコードを基にした一例となります。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

2件の返信2

Jizo_Inagaki
Shopify Partner
1009 380 697

成功

多くのエディタはそれぞれの設定に従いHTMLを整形するため、現在のHTML構造ではbrタグの挿入は防げないと思います。

 

他方、実現したい形が不明なので推測に基づきますが、「特徴」の横と下に線を引きたいのであれば以下のような方向性で構造とスタイリングを変更する方が良いと思われます。

<div style="border-bottom:1px solid #ccc; padding-bottom: 1em;">
<div style="font-size: 16px; padding:.5em 0 .5em .5em; border-left:5px solid #ccc;"><strong>特長</strong></div>
</div>

※同じ装飾を作る方法は他にいくつもありますので、上記は記載されたコードを基にした一例となります。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
ヤブタ
訪問者
2 0 0

質問者です。丁寧にご回答くださり、ありがとうございます。

「エディタ」を使用している以上どうしても入ってしまう、という理解で合っているでしょうか。

サンプルに頂いたものを調整してみようと思います。