CSSで取り消し線（打ち消し線）テキストを実装する方法

CSSで取り消し線を表示する基本

テキストに取り消し線（打ち消し線）を引くには、CSSの text-decoration プロパティを使用します。値に line-through を指定することで、文字列の中央に線を表示できます。

取り消し線は、削除された情報や訂正前のテキスト、セール価格の旧価格表示など、さまざまな場面で活用されます。

以下のコードを実行すると、取り消し線が引かれたテキストを確認できます。

<html>
   <head>
   </head>
   <body>
      <p style = "text-decoration:line-through;">
         このテキストには取り消し線が表示されます。
      </p>
   </body>
</html>

CSSではなくHTMLタグで同様の装飾を行いたい場合は、<s> タグまたは <del> タグを使用する方法もあります。ただし、見た目と意味を分離するという観点から、スタイルはCSSで指定することが推奨されています。

CSSでテキストボタンのスタイルを設定する方法をわかりやすく解説
テキストボタンとは、背景色を持たずに文字色だけで視覚的な印象を与えるボタンのスタイルです。Google マテリアルデザインなどでも採用されている洗練されたデザインで、CSSを使えば簡単に実装できます。テキストボタンのスタイリングのポイントテキストボタンを作る基本は、border: none; でボタンの枠線とデフォルトの背景を消し、color プロパティで文字色を指定することです。さらに :hover 疑似クラスを組み合わせると、マウスオーバー時に薄いグレーの背景を表示でき、クリックできる要素であることが直感的に伝わります。以下のコードでは、Success・Info・Warning・Dange
CSSで光るテキスト（グロー効果）を作成する方法
CSSで光るテキスト（グロー効果）を作成するには、text-shadowプロパティと@keyframesによるアニメーションを組み合わせます。複数の影を重ねて光の輪を表現し、それをアニメーションで明滅させることで、文字が脈動するように輝く演出が可能です。コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {