JavaScriptによってHTMLやCSSを動的に書き変えるとはどういうことかを解説


通常、インターネット上のページというものはHTMLとCSSで作ることができます。

  • HTMLには文書の構造を記述。
  • CSSには装飾(ブラウザ表示上での見た目)に関する記述。

が書かれています。これが基本形です。
しかしそこにJS(JavaScript・じゃばすくりぷと)が加わることで、HTMLやCSSが「動的に」書き換えられることがあります。

JavaScriptというのはプログラム言語になりますのでHTMLやCSSに比べると習得難易度が少し高く、JavaScriptがわからない人にとっては、

「動的にHTMLやCSSを書き換える」ってなんだ?

と不思議に思うかもしれません。
事実、私もJavaScriptを勉強して身に付ける前までは知りませんでした。

というわけで、このページでは「HTMLやCSSまではわかるけど、JavaScriptはわからない」という人向けに「JavaScriptによって動的に書き換える」の意味を解説をしていきます。

このページの解説を読むことで、JavaScriptの可能性や面白さを知っていただければ幸いです。

HTMLとCSSだけで構成されているページの例

HTMLとCSSだけで構成されている以下のようなページがあるとします。
HTMLにh1とpがあり、CSSによってh1を赤色にしているだけのシンプルな内容です。
(h1にid属性が付いている理由は、後でJavaScriptを追加する際にid属性があると楽だからです)

<html>
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex,nofollow" />

<style>
h1 {
  color: red;
}
</style>

</head>
<body>

<h1 id="midashi">これはサンプルの見出しです。</h1>
<p>これはサンプルの本文です。</p>

</body>
</html>

上記コードのページをブラウザで開くと以下のような表示になります。
h1を赤色にしたページ
上記ページをサンプルとして以下に設置しておきますので、実際にブラウザで開いて表示をご確認ください。
HTMLとCSSだけで構成されているサンプルページはこちら。

JavaScriptによってHTMLを動的に変更してみる

では、上記のサンプルページに以下のようなJavaScriptのコードを追加してみます。
これはh1の文章を「このウンコ野郎!」に変更するためのコードです。

<script>
var h1 = document.getElementById( 'midashi' );
h1.textContent = 'このウンコ野郎!';
</script>

上記のJSコードを追加すると以下のようになります。

<html>
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex,nofollow" />

<style>
h1 {
  color: red;
}
</style>

</head>
<body>

<h1 id="midashi">これはサンプルの見出しです。</h1>
<p>これはサンプルの本文です。</p>

<script>
var h1 = document.getElementById( 'midashi' );
h1.textContent = 'このウンコ野郎!';
</script>

</body>
</html>

すると、ページの表示は以下のようになります。
h1の文章が変わっていることがわかりますね?
JavaScriptによってh1のテキストを変更
JavaScriptによってHTMLが動的に書き換えられたのです。
しかし、ブラウザでHTMLのソースを確認してみると以下のように「これはサンプルの見出しです。」のままになっているのがわかります。
HTMLソースの状態
つまり、JavaScriptによって動的に書き変えた場合、HTMLのソースは元のままなのです。

上記コードのページをサンプルとして以下に設置しておきますので、お使いのブラウザで実際に開いて表示を確認してみてください。
さらにブラウザでHTMLソースを開き、h1の文章が最初のままになっていることも確認してみましょう。
JavaScriptによってHTMLを動的に変更したサンプルページはこちら。

JavaScriptによってCSSを動的に変更してみる

さらに上記のサンプルページに以下のようなJavaScriptのコードを追加してみます。
これはh1の文字色を青色にするためのコードです。

<script>
var h1 = document.getElementById( 'midashi' );
h1.style.color = 'blue';
</script>

上記のJSコードを追加すると以下のようになります。

<html>
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex,nofollow" />

<style>
h1 {
  color: red;
}
</style>

</head>
<body>

<h1 id="midashi">これはサンプルの見出しです。</h1>
<p>これはサンプルの本文です。</p>

<script>
var h1 = document.getElementById( 'midashi' );
h1.textContent = 'このウンコ野郎!';
</script>

<script>
var h1 = document.getElementById( 'midashi' );
h1.style.color = 'blue';
</script>

</body>
</html>

すると、ページの表示は以下のようになります。
h1の文字色が青色に変わっているのがわかりますね?
JavaScriptによってh1の色を変更
JavaScriptによってCSSが動的に書き換えられたのです。
しかし、CSSでは最初のままcolor: red;となっています。(下画像参照)
CSSソースの状態

上記コードのページをサンプルとして設置しておきますので、実際にブラウザで開いて表示をご確認ください。
ブラウザでHTMLのソースを開き、color: red;となっているのも確認すると良いでしょう。
JavaScriptによってCSSを動的に変更したサンプルページはこちら。

JavaScriptによって動的に書き換えた状態はソースに表示されない


これまでに解説しましたように、JavaScriptによって動的に書き換えたものはHTMLやCSSのソースに表示されません。HTMLやCSSのソース上では元のままなのです。

ですので、HTMLやCSSのソース上で指定されている内容と、実際にブラウザで表示したときの内容が異なっていることになります。
そのような理由から、動的に書き換えたページというのは構造がわかりにくい面があります。

動的に書き換えられた後のHTMLやCSSを確認したい場合は、ブラウザを開いた状態でF12キーを押してChromeのデベロッパツール、Firefoxなら開発ツールを開いて確認 すると良いでしょう。(名称が違うだけで役割は同じです)
これらのツール上では動的に書き変えられた後の状態が表示されるのです。
デベロッパーツールでの表示確認

サポートBBS

サポートBBS

サイト内を検索
アップデート情報

この「アップデート情報」欄はコンテンツ・メーカーを使用して更新・表示しています。

サイト運用事例
提供サポートなど
メールフォーム

ダウンロード一覧へ

カレンダー

これはビジネスカレンダーのサイト組み込みサンプルです。
サンプル管理画面から定休日の変更操作ができます。
ご自由にお試しください。(ユーザ名はtani、パスワードは0000です)

ダウンロード一覧へ

新着情報欄の更新

ダウンロード一覧へ

レスポンシブBBS

ダウンロード一覧へ

スレッド式BBS

ダウンロード一覧へ

その他おすすめ

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

カテゴリ別
制作者の詳細
  • 谷元博のブログ
  • Google+