HTMLとCSSでテキストとは異なる色の取り消し線を設定する方法
HTMLとCSSでテキストと異なる色の取り消し線を設定する方法
CSS3では、text-decoration-color プロパティを使用して、テキスト装飾の色を個別に設定することができます。この方法は、最も簡単で直感的な方法です。
.strikethrough {
text-decoration: line-through;
text-decoration-color: red;
}
上記の例では、strikethrough クラスを持つ要素のテキストには、赤い取り消し線が設定されます。
方法2: 疑似要素を使用する
::before 疑似要素を使用して、取り消し線を作成し、その色を設定することもできます。この方法は、より柔軟な制御が可能です。
.strikethrough {
text-decoration: none;
position: relative;
}
.strikethrough::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: red;
transform: translateY(-50%);
}
上記の例では、strikethrough クラスを持つ要素のテキストには、赤い取り消し線が設定されます。疑似要素 ::before を使用して、取り消し線を要素の絶対位置に配置し、幅と高さを設定しています。background-color プロパティを使用して、取り消し線の色を赤に設定しています。
- シンプルさを重視する場合は、text-decoration-color プロパティを使用する
text-decoration-color プロパティは、最も簡単で直感的な方法です。
- より柔軟な制御が必要な場合は、疑似要素を使用する
疑似要素を使用すると、取り消し線の位置、幅、高さ、色などをより細かく制御することができます。
補足
- 上記の例では、取り消し線のスタイルをインラインで定義しています。スタイルシートを使用する場合は、
.cssファイルに上記のスタイルを定義することができます。 - 取り消し線のスタイルをさらにカスタマイズするには、
text-decoration-styleやtext-decoration-thicknessなどのプロパティを使用することができます。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSで取り消し線の色を変更する</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>デフォルトの取り消し線: <del>取り消されたテキスト</del></p>
<p>赤い取り消し線: <span class="strikethrough">取り消されたテキスト</span></p>
<p>二重線: <span class="double-strikethrough">取り消されたテキスト</span></p>
</body>
</html>
CSS
.strikethrough {
text-decoration: line-through;
text-decoration-color: red;
}
.double-strikethrough {
text-decoration: none;
position: relative;
}
.double-strikethrough::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: red;
transform: translateY(-50%);
}
.double-strikethrough::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: red;
transform: translateY(-50%);
opacity: 0.5;
}
このコードを実行すると、以下の結果が表示されます。
- デフォルトの取り消し線は、ブラウザの設定によって色が変わります。
- 赤い取り消し線は、赤い線で表示されます。
- 二重線は、2本の赤い線で表示されます。
このサンプルコードを参考に、さまざまな色の取り消し線を作成することができます。
他の方法
方法3: text-shadow プロパティを使用する
text-shadow プロパティを使用して、テキストの影を作成し、その色を設定することができます。この方法は、取り消し線のような効果を作成することができます。
.strikethrough {
text-shadow: -1px 0px red;
}
上記の例では、strikethrough クラスを持つ要素のテキストには、1ピクセル左にずれた赤い影が設定されます。この影は、取り消し線のような効果になります。
取り消し線のような画像を作成し、それを背景画像として使用することもできます。この方法は、より柔軟なデザインが可能ですが、HTMLとCSSの知識がなくても作成できるという利点があります。
.strikethrough {
background-image: url("strikethrough.png");
background-repeat: repeat-x;
background-position: bottom;
}
上記の例では、strikethrough クラスを持つ要素の背景に、strikethrough.png という画像が繰り返し表示されます。この画像は、取り消し線のようなデザインになっている必要があります。
SVGを使用して、取り消し線のような図形を作成し、それを要素に挿入することもできます。この方法は、より高度な技術が必要ですが、非常に柔軟なデザインが可能になります。
<svg width="100%" height="2">
<line x1="0" y1="1" x2="100%" y2="1" stroke="red" stroke-width="2" />
</svg>
上記の例では、幅100ピクセル、高さ2ピクセルのSVG図形が作成されます。この図形には、赤い線が表示されます。この図形を要素に挿入することで、取り消し線のような効果を作成することができます。
- SVGを使用する場合は、より高度な技術が必要
SVGを使用する場合は、より高度な技術が必要ですが、非常に柔軟なデザインが可能になります。
html css
