JavaScript文字表示htmlタグやCSSを使ってみよう　

JavaScriptの文字表示編です、文字列をhtmlタグやCSSをスクリプトの中に埋め込んで改行したり文字を太くしたりします。話を簡単にするためdocument.write()を使いますが基本的な命令文だと思って学習してください。

文字を表示する

文字を表示する簡単な命令文です。

htmlタグを埋め込んで表示

htmlファイルのbodyに以下の記述をしてブラウザで表示してみてください。

<script>
alert("この行はここで\n改行します");//改行します
alert("この行はここで<br>改行します");//改行しない
document.write("この行はここで<br>改行します");
document.write("<h1>これは見出しです。</h1>");
</script>

サンプル（別窓）

alertの場合は\nを使わないと改行しません。<br>や<h1>などのタグを埋め込むことにより改行したり見出しにしたりすることができます。

文字を入力する場合はクォーテーションで括ってください。

CSSを反映させる

CSSを使うこともできます。htmlファイルのbodyに下記のコードを記入してブラウザで表示してみてください。

<script>
document.write("<SPan style='font-size: 50px;'>太文字です</SPan><br>");
document.write("<SPan style='color: #ff0000;'>文字の色は赤です</SPan>");
</script>

サンプル（別窓）

クォーテーションが入れ子になる場合は外側はダブルクォーテーション、内側はシングルクォーテーションで括ってください。

今回はスクリプトの中にhtmlのタグやCSSを反映させる方法を解説しました。document.write()しか使いませんでしたが、他のコマンドも同じ使い方をします。文字列をクォーテーションで括る方法と入れ子のクォーテーションの方法は必ず覚えてください。

このページはこれで終了です。

お疲れ様でした！