文字の装飾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です。 なお上記のように変数に格納された文字列も装飾可能です。