※当サイトにはプロモーションが含まれています。
クライアント 算数などの計算式で、約分や相殺をわかりやすく示す“打ち消し線”を作成してくれ！
にゃテック おけまるだにゃ
学習塾や教育系のブログなど、算数や数学の式を記述する際に“打ち消し線”を記述したいことがあるのではないでしょうか？
例えば、下記のような計算式を記述する場合です。
(半径 × 2 × 円周率) × 半径 ÷ 2
今回は、このような打ち消し線を記述する方法を３つ紹介したいと思います。
算数の式の簡略化（約分・相殺）CSS
算数や数学などの計算式などに使える打ち消し線の記述方法です。
①HTMLのみで記述する
一番簡単なのは、HTMLタグにある<del>タグを使って、打ち消し線を使用したい箇所を囲みます。
(半径 × <del>2</del> × 円周率) × 半径 ÷ <del>2</del>実際に記述すると下記のように表示されます。
(半径 × 2 × 円周率) × 半径 ÷ 2
ただ、この記述方法だと、打ち消し線は横方向になります。
②HTML＋CSSで記述する
続いて、HTMLとCSSで記述する方法についてです。
HTML
(半径 × <span class="nya-strike-slash">2</span> × 円周率) × 半径 ÷ <span class="nya-strike-slash">2</span>
打ち消し線を使用したい箇所をクラスnya-strike-slashを使用して囲みます。
CSS
.nya-strike-slash {
position: relative;
display: inline-block;
}
.nya-strike-slash::after {
content: "";
position: absolute;
top: 48%; /*打ち消し線の位置調整*/
left: -10px; /*打ち消し線の位置調整*/
width: 300%; /*打ち消し線のサイズ調整*/
height: 2px;
border-top: 1px solid red; /*打ち消し線の色*/
transform: rotate(-45deg);
transform-origin: center;
}.nya-strike-slash::afterの、topとleftで打ち消し線の位置を調整し、widthで打ち消し線のサイズ（長さ）を調整します。
③MathJaxを使って記述する
MathJaxを読み込んで記述することもできます。
Web上で数学記号や数式を表示できるJavaScriptライブラリで、LaTeXやMathML記法に対応しています。
MathJaxの導入自体は簡単です。
HTMLファイルの<head>または、<body>の最後に、以下のスクリプトタグを追加します。
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
ワードプレスの場合「MathJax-LaTeX」というプラグインも用意されています。
すると以下の様な数式を記述することができます。
\( (r \times \cancel{2} \times \pi) \times r \div \cancel{2} = r \times \pi \times r \)
\( x = \frac{-b \pm \sqrt{b^2 – 4ac}}{2a} \)
\( \int_0^1 x^2 \, dx = \frac{1}{3} \)
ただ、記述方法が独特なので、記述方法を勉強（確認）する必要があります。
