お疲れさまです。

今年もあっという間に2月が終わります。

いや、終わりました。

そう、3月です。花粉の季節です。(><

さっそく、目、鼻、のどのつまり、など症状が出始めてます。。。つらい、かゆい。。

それはさておき、表題の件。

3月といえば各モールで大き目のイベントが開催されますね。

楽天だと「楽天スーパーSALE」

paypayだと「超ペイペイ祭」

店舗さんも企画に力を入れるタイミングではないでしょうか？

そんなとき、SALEであれば使える簡単な2重取り消し線の入れ方をご紹介。

単なる取り消し線であれば、 <s>1,000円</s>こんな感じで　タグでOKです。

▼このように表示されます。

1,000円　過去の遺産のようなタグですが・・・

CSSが使えない状況などはこちらでよいかもしれませんが、取り消し線の色を変えたいというとき、

<s>タグに効果をつけると文字まで色が変わってしまいます。。。

そこで、CSSが使える状況なら、という前提で簡単な2重取り消し線の方法をご紹介します。

■html

<p class=”price”>当店通常価格 <span class=”del”>5,000円</span>のところ</p>

<p class=”sale-price”>期間限定 2,500円</p>

こんな感じで簡単なhtmlを準備します。

あとはCSSで

<style>
.del {
position: relative;
}
.del:after {
content: '';
display: block;
width: 100%;
height: 2px;
margin-top: -2px;
border-top: solid 1px #800000;
border-bottom: solid 1px #800000;
position: absolute;
left: 0;
top: 50%;
}
</style>

こんな感じですね。

うまくいけばこんな感じで2重取り消し線が表示できます。

inlineの要素を相対配置にし、うえに絶対配置の2重線を引くイメージです。

高さ（height + border*2）/2　をネガティブマージンで上に戻すとちょうど真ん中に配置されます。

いかがですか？

たいしたことない内容ですみません。。。。

企画の盛り上げ方はいろいろありますが、

目を引く効果をいかにちりばめられるかが重要だったりします。

【目立たせたいことの強弱】をしっかりして企画を盛り上げていきましょう！

では。

今年こそお花見がしたいなぁ。。