分数を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の場合
分子 分母46
inline-flexの場合
分子 分母46
flexではblock-level要素として扱われ横いっぱいになり、尚且つ改行されてしまうわけですが、inline-flexとすることでinline要素扱いになり、数式を横並びに表示できるようになります。

加法定理を再現する

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>
タイトルとURLをコピーしました