idが大事

HTMLだけなら...
　マイクロソフトのフリーウェア Microsoft Expression Web4を使えば、文章ををワープロの感覚で入力できます。写真の添付なども簡単にできます。文字に色を付ける、テーブルを作るなどメニューで選択すればHTMLタグなど知らなくてもできてしまいます。CSSなど知らなくても自動的にCSSをつくります。 Microsoft Expression Web4だけで見栄えの良いページを作ることができます。
さらにスタイルシート...
もっと見栄えをよくしたくなったらCSSの出番です。スタイルシートの設定方法はいくつかあります。とりあえずidを使ったやり方でやってみます。<head></head>の間にCSSを挿入します。


<head>
<style type="text/css">
#styleId1{
    color: blue;
}
</style>
</head>

次に<body></body>の間に定義したCSSを使います。


<div id="styleId1">
何らかのコンテンツ。
</div>

これで
何らかのコンテンツ。
が青色で表示されます。

styleId1は１行の定義でしたが複数行設定できます。

		実際のページはこちら。

		CSSを定義の仕方はidとクラスによる方法があります。違いは、

		classはページ内で何度も使えます。例えばテーブルで見出しのように何度も使うようなとき便利です。

		idはページ内で１度だけしか使えません。これはJavaScriptでidをもとに処理をします。例えば複数のボタンの処理をするときに各ボタンに同じidを割り振ります。複数のボタンに同じidを割り振ったらどのボタンが押されたか？わかりません。よってidは１度だけした使えません。

		

		

		さらにJavaScript...

		ボタンを押すと
		
Hello world.
が

		こんにちは　世界
に

		切り替わります。idはCSSとJavaScritで参照されます。
		<div id="msg">Hello world.</div>
		

		msgのCSS
<style type="text/css">
#msg{
color : blue;
}
</style>
色を青に指定します。ページが最初に表示されたときに青色の文字になります。 ボタンの定義は、

<input type="button" value="ボタンを押してください" onclick="myfunc()">
mufunc()が自作のJavaScriptの関数です。関数の本体はの間に記述しました。onclickで処理する関数をしていします。
 
		<script>
var myfunc = function () {
var el = document.getElementById("msg");
//el.style.color = 'red';
el.style.cssText='color:red';
el.innerText = 'こんにちは　世界';
} 
</scrip>

document.getElementById("msg")でmsgのエレメント<div>を取得します。
el.style.color = 'red';またはel.style.cssText='color:red';で色を赤に変えます。
el.innerText = 'こんにちは　世界';で文字を変更します。

		実際のページはこちら。


		elのプロパティーはどんなのがあるか？本を読んでもあまり詳しく書いてありません。どうやって調べたらいいのでしょうか？


		ブラウザのデバッグ機能を使います。

		




		JavaScriptをデバッグに使うブラウザは個人的にMicrosoft 
		EDGEがいいと思います。デバッグするページ(id_javascript.html)を表示ます。
右クリック→ソースの表示→id_javascript.htmlをクリック。

		

		17行の灰色のバーにマウスポインタを持っていきクリックします。ここにブレークポイントが設定されました。
		
[ボタンを押してください]ボタンをクリックします。ブレークポイントで停止しています。

		
右側のウォチをみると

		
elの要素が表示されています。innerTextは変更前なのでHello 
		world.になっています。このウォッチの要素をみれが変更できる要素がわかります。スタイルなら、

styleの要素に変更可能な要素があります。colorもcssTextもあります。ここでの命名規約は、
background-color　　→ backgroundColor
のように-を削除して次の文字cを大文字に変更します。
このようにEDGEのデバッグ機能を利用するといろいろなことがわかります。