茨の道も一歩から

インフラ構築からプログラミング(Python・JavaScript)までITに関するブログです。

i is blue, isn't it?

HTML CSS Web

こんばんわ。

Djangoでタイピングアプリを制作していてよくわからないバグに出会いました。

iの色は何色だと思いますか？

【開発環境】

問題のHTML

  • font-sizeは見やすさのために書いているだけです。なくても同じです。
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>i is blue, isn't it?</title>
        <style>
            span {
                font-size:96px;
            }
            .ans {
                color:blue;
            }
        </style>
    </head>
    <body>
        <div>
            <span class="ans">f</span><span>i</span>
        </div>
    </body>
</html>

【解決策】

● 半角スペースを入れる 
<span>f</span>半角スペース<span>i</span>
● 改行する 
<span>f</span>
<span>i</span>

その他にも解決策があれば、Twitterにてコメントください。