blog

BLOGブログ

ARCHIVES

【CSS小技】すぐに使える2重取り消し線


 


 


お疲れさまです。


 


今年もあっという間に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 をネガティブマージンで上に戻すとちょうど真ん中に配置されます。


 


 


 


 


いかがですか?


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


 


 


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


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


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


 


 


 


では。


 


 


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


 


 


 


 


 

この人が書いた記事

VAXの記事をもっと見る

関連する記事