Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS/小ネタ】文中で使える赤いバッテン

今週のお題「赤いもの」

 

 どうも!LSSです!!

 

ちょっと使い勝手良さそうな?CSSネタを思いつきました。

 

 

赤いバッテン

ちょっと前に思いついたCSSネタを、今週のお題にも合うかも?と思い、お題に便乗公開してみます。

 

 

コード

<span style="background-image: linear-gradient(to top left,#ff000000 45%,#ff0000aa 50%,#ff000000 55%),linear-gradient(to top right,#ff000000 45%,#ff0000aa 50%,#ff000000 55%);">赤いバッテンがのる言葉</span>

↑をコピーして、赤文字部分を書き換えて使えます。

 

例えば、

あいうえお<span style="background-image: linear-gradient(to top left,#ff000000 45%,#ff0000aa 50%,#ff000000 55%),linear-gradient(to top right,#ff000000 45%,#ff0000aa 50%,#ff000000 55%);">柿喰う恵子</span>さしすせそ

のようにすると、

あいうえお柿喰う恵子さしすせそ

となります。

 

 

コード別例

もしくは、

<style>
.batten{
background-image:
linear-gradient(to top left,#ff000000 45%,#ff0000aa 50%,#ff000000 55%),
linear-gradient(to top right,#ff000000 45%,#ff0000aa 50%,#ff000000 55%);
}
</style>
<span class="batten">赤いバッテンがのる言葉</span>

のようにクラス化しても良さそうですね。

 

こちらの場合は<style>から</style>を書いておけば、

さしすせそ<span class="batten">太刀つって</span>となに<span class="batten">ゆーてんの</span>

 

さしすせそ太刀つってとなにゆーてんの

のように繰り返し使い易くなります^^

 

 

あとがき

linear-gradientで対角線を描き、その50%前後まで透明、50%前後の部分は赤、そのあとはまた透明、を右上がり右下がり両方重ねる事で、赤いバッテンにしてみました。

 

これだと文が長くても短くてもそれに応じて伸縮してくれるので、分かりやすくなります。

 

元々、HTML/CSSにはこういう打消し線がありますが、好みに応じてこちらを使うのもいいかもですね^^

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^