HTML+CSSで分数

CSSを使って分数を表示しよう

φ=1+11+11+11+11+…
e=1+1+12!+13!+…

<style type="text/css">
.fraction {
display: inline-block;
text-align: center;
vertical-align: middle;
font-size: smaller;
}
.fraction > .sep {
background-color: black;
display: block;
width: 100%;
height: 1px;
}
</style>
&phi;=1+<span class="fraction">1<span class="sep"></span><span>1+<span class="fraction">1<span class="sep"></span><span>1+<span class="fraction">1<span class="sep"></span><span>1+<span class="fraction">1<span class="sep"></span>1+…</span></span></span></span></span></span></span>
e=1+1+<span class="fraction">1<span class="sep"></span>2!</span>+<span class="fraction">1<span class="sep"></span>3!</span>+…

横線の色が決めうちなのは問題か。

7/3 追記
CSS3にcurrentColorっていうキーワードが入るらしいので、それを指定すれば横線の色を文字色と同じにできる。FirefoxとかSafariだともう対応してる。

e=1+1+12!+13!+…