JavaScriptを使って文字を装飾する方法について解説

HOME
更新日:2017.03.02
HOMEJavaScript入門 > 文字の装飾

文字の装飾

ここから、文字列に関する操作を見ていきたいと思います。 最初は、簡単に文字列を装飾する方法です。 HTMLタグを組み込んでも文字を装飾できますが、 JavaScriptでも簡単な装飾ならできるので、その方法を見てみることにしましょう。

文字を装飾するスクリプト

では以下のスクリプトを、HTMLのBODY内に記入してみましょう。

<script>

document.write("文字を装飾します<br>");
document.write("大きくする".big()+"<br>");
document.write("小さくする".small()+"<br>");
document.write("太字にする".bold()+"<br>");
document.write("斜体にする".italics()+"<br>");
document.write("取り消し線を付ける".strike()+"<br>");
document.write("固定幅フォントにする".fixed()+"<br>");
document.write("下付き文字にする"+"2".sub()+"<br>");
document.write("上付き文字にする"+"2".sup()+"<br>");
document.write("文字色を指定する".fontcolor("red")+"<br>");

</script>

<サンプル>↓

文字を装飾するには、上記のように文字列の後ろにピリオドを付け、 装飾に関する命令文を繋げます。 ただしこのページではフォントを「メイリオ」にしているので、 Windowsユーザーの方の多くは「斜体」の部分は傾いていないかも知れません(現時点でメイリオに斜体は無いので)。

文字列.big()
文字を大きくする
文字列.small()
文字を小さくする
文字列.bold()
太字にする
文字列.italics()
斜体にする
文字列.strike()
取り消し線にする
文字列.fixed()
固定幅フォントにする
文字列.sub()
下付き文字にする
文字列.sup()
上付き文字にする
文字列.fontcolor(カラー名)
文字色を指定する

なお、下線を引く命令文は調べてみたのですが、無さそうです。 下線を引くにはまた別の方法を用います。 まあスタイルシートで指定すれば済むことですが(苦笑)

複数の装飾を指定する

文字列に複数の装飾を施すこともできます。 以下のスクリプトをHTMLのBODY内に記入してみてください。

<script>

var str = "複数の装飾";

document.write(str.fontcolor("green").big().bold());
document.write("を施した文字列");

</script>

<サンプル>↓

上述のスクリプトのように、装飾命令を複数繋げて指定すればOKです。 なお上記のように変数に格納された文字列も装飾可能です。