フォント

• トップ
• 逆引きリファレンス
• フォント

• フォントを変更するには
• 文字のサイズを変えるには
• 太字にするには
• 斜体にするには
• 下線を引くには
• 点線の下線を引くには
• 取り消し線(打ち消し線)を引くには
• 文字を点滅させるには
• 文字の右上に小さな数字を書くには

フォントを変更するには

フォントを変更するにはスタイルシートの font-family を指定します。指定可能なフォント名は「フォントの一覧」を参照してください。空白文字を含むフォント名の場合は、'...' で囲んで指定します。

文字を <span style="font-family:'ＭＳ 明朝'">明朝体</span> で表示します。

文字のサイズを変えるには

文字のサイズを変更するにはスタイルシートの font-size を指定します。

通常の文字 <span style="font-size:16pt">16ptの文字</span>

太字にするには

太字にするには、<b> を用います。

<b>太い文字</b>

スタイルシートの場合は font-weight を用います。

<span style="font-weight:bold">太い文字</span>

太字にする目的が「強調」であれば、<b> ではなく <strong> を用いることが推奨されています。ブラウザによっては色を変えるなど、太字以外の手段で表現されることもあります。

<strong>強調された文字</strong>

斜体にするには

斜体にするには、<i> を用います。

<i>Italic</i>

スタイルシートの場合は font-style を用います。

<span style="font-style:italic">Italic</span>

斜体にする目的が「強調」であれば、<i> ではなく <em> を用いることが推奨されています。ブラウザによっては色を変えるなど、斜体以外の手段で表現されることもあります。

<em>強調された文字</em>

下線を引くには

下線を引くには <u> を用います。

<u>下線文字</u>

スタイルシートの場合は text-decoration を用います。

<span style="text-decoration:underline">下線文字</span>

点線の下線を引くには

下線を点線にするには、border-bottom を使用します。

<span style="border-bottom:1px dotted gray">点下線</span>

取り消し線(打ち消し線)を引くには

取り消し線(打ち消し線)を引くには　<s> や <del> を用います。

<s>取り消し線</s>
<del>取り消し線</del>

スタイルシートの場合は text-decoration を用います。

<span style="text-decoration:line-through">取り消し線</span>

文字を点滅させるには

文字を点滅させるには <blink> を使用していましたが、現在では非推奨となっています。

<blink>この部分の文字が点滅します</blink>

JavaScript を用いて点滅を実現するには、下記のようにします。

<script>
window.addEventListener("load", function() {
    setInterval(function() {
        var objs = document.getElementsByClassName("blink");
        for (var i = 0; i < objs.length; i++) {
            obj = objs[i];
            if (obj.style.visibility == "visible") {
                obj.style.visibility = "hidden";
            } else {
                obj.style.visibility = "visible";
            }
        }
    }, 800);
});
</script>
<div class="blink">AAA</div>

文字の右上に小さな数字を書くには

H₂O(水)や、E=mc² など、元素記号や 2乗を表すには、<sup> や <sub> を用います。

H<sub><small>2</small></sub>O
E=mc<sup><small>2</small></sup>

---