ホームページを作ろうヨ!!

初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL2. スタイルシートのさまざまなメリット・その1★HTMLを軽量化できる

では、まずちょっとスタイルシートを使わないHTMLソースを見てみましょう。特に赤で表示されているタグの多さに注目して下さい。これだけのタグがあっても、実際に画面に表示されるテキストはグレーの部分のみです。

<html>

<head>
<title>ホームページを作ろうヨ!!</title>
</head>

<body bgproperties="fixed" text="#003366" link="#003366" vlink="#808080" alink="#003366" bgcolor="#9B9BFF">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" nowrap width="50"></td>
<td valign="top">
VOL2.
スタイルシートのさまざまなメリット
　
★HTMLを軽量化できる★
では、まずちょっとスタイルシートを使わないHTMLソースを見てみましょう。
<img border="0" src="../priamry_vol2_1.jpg" width="710" height="360">
ご覧のように、うるさいほどタグが並んでいるのがお分かり頂けると思います。
そこで、HTML上のこうした不都合を一気に解決してくれるのがスタイルシートです。
インラインで書かれた細かな指定
　↓
それがなければページごとの指定、
　↓
それもなければ外部ファイルの指定
というように予め優先順位が定まっています。
<img border="0" src="../priamry_vol2_2.jpg" width="710" height="415">
　
★視覚性を重視しない音声ブラウザやテキストブラウザにも対応できる★
スタイルシートの基本として「box」という概念があります。

<a href="../../../homepage_primary1_8.htm">初級篇1.VOL8.イメージマップの設定と設置
</a>
<<　

　
</td>
<td valign="top" nowrap width="50"></td>
</tr>
</table>

</body>

</html>

ご覧のように、うるさいほどタグが並んでいるのがお分かり頂けると思います。特に、文字のフォント指定に関するタグは内容によっては実際にブラウザ上に現れる文章の量よりも多いことさえあり、これを一括して指定できたらさぞかし分かりやすいソースになるのではと誰でも思われるのではないでしょうか。フォントばかりではなく、従来のソースではレイアウト表現をテーブルに頼っていますので、どうしても<td><tr></tr></td>が段階的に入れ子になった複雑なソースにならざるをえません。ましてやこれらのタグはページごとに書き込む必要がありますので、サイト全体からすると膨大な量の重複が起こっていることにもなります。これらがブラウザでの表示速度に影響を与えるのは当然で、HTMLソースを編集する場合にも、こうした複雑なタグがなるべくない方が作業しやすいのも言うまでもないことでしょう。

そこで、HTML上のこうした不都合を一気に解決してくれるのがスタイルシートです。スタイルシートを使うと、まずレイアウトにテーブルを使う必要がないので<td><tr></tr></td>の入れ子状態を解消できる他、背景やフォント、段落などに関する指定も外部ファイルにまとめて各ページで読み込めばいいように指定しておけば、ひとつのCSS外部ファイルでサイト全体のデザインを指定してしまうことも出来るのです。つまり、サイト内全ページのデザイン詳細をひとつのファイルで指定することによって、そのファイルを書き換えるだけで全ページのデザインを一気にリニューアルすることも可能だということです。

ということで、↑のHTMLソースをCSS外部ファイルを読み込む形で編集しなおすと、以下のようにタグは最小限になり、すっきりした状態になるわけですね。表示がヘンなのを修正するために細かいHTMLソースを目を皿にしてチェックしたことのある方なら、これが如何にラクに編集しうるソースであるかは、一目瞭然だと思います。

<html>

<head>
<title>ホームページを作ろうヨ!!</title>
<LINK REL="stylesheet" HREF="homepage_primary2_2.css" TYPE"text/css"> ... ここで読込む外部スタイルシートを指定
</head>

<body>
<h1>VOL2.スタイルシートのさまざまなメリット</h1>
　
★HTMLを軽量化できる★
では、まずちょっとスタイルシートを使わないHTMLソースを見てみましょう。
<img src="../priamry_vol2_1.jpg" width="710" height="360">
ご覧のように、うるさいほどタグが並んでいるのがお分かり頂けると思います。
そこで、HTML上のこうした不都合を一気に解決してくれるのがスタイルシートです。
インラインで書かれた細かな指定
　↓
それがなければページごとの指定、
　↓
それもなければ外部ファイルの指定
というように予め優先順位が定まっています。
<img src="../priamry_vol2_2.jpg" width="710" height="415">
　
★視覚性を重視しない音声ブラウザやテキストブラウザにも対応できる★
スタイルシートの基本として「box」という概念があります。

<a href="../../../homepage_primary1_8.htm">初級篇1.VOL8.イメージマップの設定と設置 </a>
<<

　

</body>

</html>

このHTMLに、一番上の例と同じ表示を得るために読み込まれている外部ファイルは以下のようになりますが、これはひとつ用意しておけば、このページだけではなくサイト内全てのページに適用することが出来ますので、従って適用された全てのページにおいて余計なタグを省略することが出来ると考えれば、容量の面でも手間の面でも如何に助かるかということがお分かり頂けるでしょう。

★上の例で読込まれている「homepage_primary2_2.css」という外部ファイル★

body { margin: 50px 50px;
background-color:#9B9BFF;
color:#003366; }

a:link { color:#003366; }
a:active { color:#003366; }
a:visited { color:#808080; }

h1 { text-align:left; font:normal normal bold 14pt "ＭＳＰ明朝"; }

p { text-align:left; font:normal normal bold 12pt "ＭＳＰ明朝"; }

なお、スタイルシートは、こうして外部ファイルを読み込む他に、HTML上でページごとに指定したり、部分的に指定するということも可能で、この場合、表示に際して最も優先されるのは...

<body></body>内に、インラインで部分的に書き込んだ細かな指定

　↓

それがなければ<head></head>内に書き込んだページごとの指定、

　↓

それもなければ外部ファイルの指定

というように予め優先順位が定まっています。ですから、おおまかなデザインを外部ファイルで指定し、必要に応じて各ページ、各部分でデザインを変えるということも、もちろんできます。

初級篇2.VOL1.スタイルシートってなに?! <<

>> 初級篇2.VOL2.スタイルシートのさまざまなメリット・その2

2006.11.20.+11.27-11.28.