Liquid、JavaScriptなどに関する質問
お世話になります。素人が強引に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>
このような現象が起きる原因として、どのようなことが考えられるでしょうか?
また、解決策はありそうなのでしょうか?
おそれいりますが、教えていただきたく、よろしくお願いいたします。
解決済! ベストソリューションを見る。
成功
多くのエディタはそれぞれの設定に従い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>
※同じ装飾を作る方法は他にいくつもありますので、上記は記載されたコードを基にした一例となります。
成功
多くのエディタはそれぞれの設定に従い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>
※同じ装飾を作る方法は他にいくつもありますので、上記は記載されたコードを基にした一例となります。
質問者です。丁寧にご回答くださり、ありがとうございます。
「エディタ」を使用している以上どうしても入ってしまう、という理解で合っているでしょうか。
サンプルに頂いたものを調整してみようと思います。
Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024