タグの手打ちで、ホームページを作成

タグを手打ちして、ホームページを更新してみよう

スタイルシートを適用（参照）してみよう。中～上級者のテクです！

◆ 研修会14の設問その4 ◆

1、スタイルシートを、適用してみよう

スタイルシートって？何？なに？

まず、ブラウザのファイル ⇒ 名前をつけて保存でこのページをデスクトップに保存してみましょう。
.html ファイルとフォルダが、保存されます。作成されたフォルダを、開きます。
その中に、見慣れない『hpb9tm10_7.css』があります。
これが、スタイルシートと呼ばれるファイルです。
このファイルで、ページや表のデザインを指定しています。
右クリック ⇒ プログラムから開くより、メモ帳（notepad）で開いてみましょう。
スタイルシートの暗号の解読には、とほほ先生の記述をご一読ください。
（一読しても多分意味が解らないと思います）

1）スタイルシートを適用する、宣言を記述してみよう

あなたの次期ホームページ対策のソースで、</head>の上部に↓を1行書き加えてください。

<link href="../image/hpb9tm10_7.css" rel="stylesheet" type="text/css" id="hpb9tm10_7">
コピー＆貼り付けでも OKです。
これで、hpb9tm10_7.css のスタイルを適用する宣言がされました。

2）表にスタイルを適用してみよう

このページを、右クリックして「ソースの表示」をクリックしてください。
<TABLE … class="hpb-vmenu1" id="_HPB_LINK_MENU_TABLE_01"> や
<TD class="hpb-lb-tb1-cell3"> などが、記されています。
これが、各タグに対するスタイルの指定です。

TABLEタグと、TDタグの後に適当なclassを指定して、上書き⇒アップロードしてみましょう。
文字色や背景色が、変化すればOKです。指定できています。
使い方が解れば OK です。意味は理解しなくても OK です。
詳しいことは聞かないで下さい。

※ スタイルシートのメリット ※ （とほほ先生談）

スタイルシートを使用することのメリットには次のようなものがあります。
◆ 見栄えを一度に指定できる
すべての H1要素に <font color=red>～</font> を指定してまわるよりも、スタイルシートで一度に指定した方が楽になります。外部ファイルで指定しておけば、より一層楽になります。
◆ 見栄えを一度に変更できる
見栄えを外部ファイルに定義しておけば、それちょっと変更するだけで見栄えを一度に変更することができます。春には春のスタイルを、秋には秋のスタイルを適用してやることもできます。この時、class=red のようなクラス名だと、.red { color:blue; } などと変更した時に妙な気分になるので、class=pastoral のような、見栄えに影響しない名前をつけておくとよいそうです。
◆ 自分の好きな見栄えに変更できる
IEでは、[インターネットオプション] → [ユーザ補助] → [ユーザースタイルシート] で、人のページに自分の好きなスタイルシートファイルを適用することができます。黒地に白文字が好きな人や、大きな字で読みたい人も、自分の好みのスタイルを適用することができます。
◆ 見栄えと意味を分離できる
Webページを自動収集して情報データベースを作成したり、目の見えない人が音声ブラウザでWebページを読む場合など、見栄えがあまり重要視されないケースもあります。見栄えを別のページで記述することにより、不要な見栄え情報を読み込んでくる煩わしさを解消することができます。