分数をHTML上に表示する方法 HTML分数ジェネレーター コピペで使えるHTML+CSS

分数を表示する仕組みと解説

flex-directionを用いる

inline-flexとして指定し、flex-direction:columとすることで、子要素を縦方向にレイアウトします。このようにすることで分数を表示することができるようになります。複雑な式も可能です。

style属性で記述

<span style="display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center;">
<span style="padding: 0 10px; border-bottom: 1px solid #000000;">分子</span>
<span style="padding: 0 10px;">分母</span>
</span>

なぜinline-flexか

flexの場合

加法定理を再現する

tan(α – β) = tanα – tanβ 1 + tanα tanβ

以下のように記述されています

tan(α - β) = <span style="display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center;"><span style="padding: 0 10px; border-bottom: 1px solid #000000;">tanα - tanβ</span>
<span style="padding: 0 10px;">1 + tanα tanβ</span>
</span>

複雑な分数を記述する

以下のような式も可能です。

4(1-x)7(14x-4 47-x )

<span style="display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center;">
<span style="padding: 0 10px; border-bottom: 1px solid #000000;">4(1-x)</span>
<span style="padding: 0 10px;">7(<span style="display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center;">
<span style="padding: 0 10px; border-bottom: 1px solid #000;">14x-4</span>
<span style="padding: 0 10px;">47-x</span> </span>)</span>
</span>

HTML分数ジェネレーター

分子と分母を入力→コードを取得でHTMLが表示されます。コードを手っ取り早く取得したいときはご利用ください。