2023年11月30日木曜日

web ページで「二重の取り消し線」を書きたい!

今回はちょっと趣きが違う投稿をしよう。

 今回のお題はタイトルにあるように,web ページ上の文章の一部に「二重取り消し線」をつけるやり方,である。

 二重ではない取り消し線は,以前なら
<s>...</s>
のように書いていた。 でも,最近は css を使うので,web ページのヘッダー部にスタイルを記載するか,
<span style="XXXX">....</span>
のように「span」として記載するか,になる(と思っている)。 ちなみに
<div style="XXXX">....</div>
だと前後に改行が入るので,文章の途中なら「span」の方がいいと思う。

 さて,本題の「二重取消線」だが,まず,取り消し線はスタイルとして,
<span style="text-decoration:line-through;">XXXX</span>
としてすると「取り消し線」が引かれる。
 ◯ 取り消し線の例です

しかし,これはまだ二重になっていない。二重にするには,
<span style="text-decoration:line-through double;">XXXX</span>
とする。他のパターンも含めて例を示そう。
 ◯ 二重取り消し線の例です:double
 ◯ ダッシュ取り消し線の例です:dashed
 ◯ 点線の取り消し線の例です:dotted
 ◯ 波線の取り消し線の例です:wavy
 ◯ 普通の取り消し線の例です:solid

さらに以下のようにすると色もつけられる。
<span style="text-decoration:line-through double red;">XXXX</span>
とする。「#XXXXXX」形式の色の指定もできるみたい。
 ◯ 赤色の二重取り消し線の例です:double red
 ◯ 青色の二重取り消し線の例です:double blue
 ◯ 緑色の二重取り消し線の例です:double green
 ◯ ピンク?の二重取り消し線の例です:double #FF2288
 ◯ ピンク?の波線の取り消し線の例です:wavy #FF2288

お試しあれ