第　９　章

　

テーブル（表組み）タグで遊んでみよう

ダイナミックＨＴＭＬやＪａｖａＳｃｒｉｐｔなどホームページを賑やかにしてくれるものは多数あります。見栄えやデザインを整えることを目的としたものとしては、スタイルシートという技法もあります。しかし、もっとも手軽にレイアウトを整えてくれるものとして、テーブルタグが良く使われます。 　テーブルタグの本来の目的は「表」なのですが、これを応用するととても便利です。ホームページ講座などを読むと、テーブルタグでデザインを整えるのは邪道であるとか、邪道を通り越して、「それは本来の目的ではないから、決してやってはいけません」と主張される方もいます。視覚障害のある方が音声でホームページを閲覧する場合などは、テーブルタグをデザインに使ったページはまともに意図が伝わらないでしょう。 　しかし、多くのホームページではデザイン上の理由で多用しています。僕もそうです。ここでは、それらを承知の上で、テーブルタグの基本と、面白い使い方を紹介します。

まずは基本のマスターから 　ご注意！　テーブルタグには終了タグ（開始タグにスラッシュを加えたもの。例：＜ＴＡＢＬＥ＞で開始したら＜／ＴＡＢＬＥ＞で終了する）を省略できるものが多数あります。省略できるものは全て省略しています。また、タグの記述は全て全角文字で行いますので、そのまま張り付けることは出来ません。 　まずは、この表をご覧になって下さい。 国語 社会 算数 理科 やすし 大変良い 良い 普通 普通 きよし 悪い 普通 悪い 大変悪い やすこ 普通 普通 良い 普通 けいこ 悪い 大変悪い 大変良い 良い 　ごく普通のオーソドックスな表です。 　このソースは次のように記述されています。 ＜table border=1＞ ＜tr＞＜td＞＜td＞国語＜td＞社会＜td＞算数＜td＞理科 ＜tr＞＜td＞やすし＜td＞大変良い＜td＞良い＜td＞普通＜td＞普通 ＜tr＞＜td＞きよし＜td＞悪い＜td＞普通＜td＞悪い＜td＞>大変悪い ＜tr＞＜td＞やすこ＜td＞普通＜td＞普通＜td＞良い＜td＞普通 ＜tr＞＜td＞けいこ＜td＞悪い＜td＞大変悪い＜td＞大変良い＜td＞良い ＜/table＞ 　少し煩わしいですが、よく見て下さい。 　まず＜ｔａｂｌｅ＞ですが、「ここから表が始まります」と宣言しているわけです。＜ｔａｂｌｅ＞の中にborder=１と書いてあります。枠線の太さは「１」ですよと指定しているわけです。 　次の行以降ではまず最初に＜ｔｒ＞とありますが、これは各行の始まりを意味しています。＜ｔｒ＞の後の＜ｔｄ＞は、各マス（セル）を表しています。 　また、最初の＜ｔｒ＞の後には＜ｔｄ＞＜ｔｄ＞と連続しているのがわかりますね。これは欠損セルと言い、中には何も記述されていません。こうすると、上の見本の表の左上のセルのように、マス（セル）が存在しない形になってしまいます。 　もし、欠損セルではなくて、マスはあるのだけど中に何も書いていない、という状態にしたければ、全角スペースを入力して下さい。「＜ｔｄ＞　＜ｔｄ＞」という風に記述します。そうすると、下の表のようになります。 　 国語 社会 算数 理科 やすし 大変良い 良い 普通 普通 きよし 悪い 普通 悪い 大変悪い やすこ 普通 普通 良い 普通 けいこ 悪い 大変悪い 大変良い 良い 　どう違うか、確認できましたか？ borderってなんだ？ 　さて、上の表でなんの説明もなしに、borderという記述をtableタグの中に記述しましたが、これはいったい何なのでしょうか？ 　簡単に言えば、表のボーダー、つまり枠線のことですね。 　これを色々と工夫することが出来ます。 　まずはこれをご覧下さい。 　唯我独尊　 唯ちゃんが「我は独りで寂しいから尊んでみんな遊びに来てね」とささやく姿。 　弱肉強食　 弱い肉ばかり食べずに強い肉も食べなさい、ということ。強い肉を食べるにはそれなりに苦労するが、苦労のおかげで自分も強くなれる。楽な方に流されていると、弱い肉ばかりを食べてしまうことになり、自分自身も弱くなるよと言う戒め。 　七転八倒　 転んだのは７回なのに、８回も倒れた。つまり鈍くさいヤツという意味。 　実は上の文章には表組が使われています。 　ただし、borderの指定をしていません（あるいは、border=0でもオッケーです）。だから、枠線が描かれていないのです。 　この文章を表組を使わずに書いたらどうなるでしょうか。 　 　唯我独尊　唯ちゃんが「我は独りで寂しいから尊んでみんな遊びに来てね」とささやく姿。 　弱肉強食　弱い肉ばかり食べずに強い肉も食べなさい、ということ。強い肉を食べるにはそれなりに苦労するが、苦労のおかげで自分も強くなれる。楽な方に流されていると、弱い肉ばかりを食べてしまうことになり、自分自身も弱くなるよと言う戒め。 　七転八倒　転んだのは７回なのに、８回も倒れた。つまり鈍くさいヤツという意味。 　このように、レイアウトがぐちゃぐちゃになってしまいます。 　仮に、自分のＰＣの画面上で綺麗にレイアウトしたとしても、画面の大きさに合わせてブラウザは自動的に改行しますから、他の誰かのＰＣでは綺麗に見えないのです。 　では、この表の枠線を表示してみましょう。 　唯我独尊　 唯ちゃんが「我は独りで寂しいから尊んでみんな遊びに来てね」とささやく姿。 　弱肉強食　 弱い肉ばかり食べずに強い肉も食べなさい、ということ。強い肉を食べるにはそれなりに苦労するが、苦労のおかげで自分も強くなれる。楽な方に流されていると、弱い肉ばかりを食べてしまうことになり、自分自身も弱くなるよと言う戒め。 　七転八倒　 転んだのは７回なのに、８回も倒れた。つまり鈍くさいヤツという意味。 　ワープロならば画面を目で見てレイアウトが整っていれば、それでオッケーです。なぜなら最初から紙の大きさを指定してあるからです。しかし、ブラウザに紙の大きさはありません。各人が持っているＰＣのディスプレイの大きさが紙の大きさです。作者の意図に関わらず勝手にサイズを変えてしまいます。 　ですから、改行やスペースで形を整えることは出来ないんです。 　見た目のレイアウトを整然とさせたい、けれども枠線は煩わしくて嫌だ、そういう方にはテーブルタグを「border＝０」での使用をお薦めします。 　なお、実際には上の表は、さらにレイアウトを整えるためにもう少し技術を使っています。どうしても知りたい方はソースをごらんいただくとわかりますが、ここでは「見栄えを整形するのにテーブルタグは便利だ」ということをわかっていただければ結構です。また、さらに小さな画面環境ですと、この例の表示もグチャグチャになりますので、おかしいなと思った方はもう少し大きめのブラウザでごらんいただくか、フォントサイズを小さくしてご覧になって下さい。作者の意図が伝わると思います。 　画面の大きさに左右されない表組みをしようと思ったら、ｗｉｄｔｈ=＊＊＊（＊＊＊は数字。単位を書かなければピクセル）　という記述をします。これは＜ｔａｂｌｅ＞の中で指定して表全体の横幅を指定することも、＜ｔｄ＞の中に指定して、一つ一つのセルの横幅を指定することも出来ます。　 border=0で、一部の文字だけ背景色を付けよう 　文字を強調する方法はいくつかあります。サイズを変えたり、フォントを変更したり、色を付けてみたり。 　しかし、テーブルタグを使って、強調したい部分だけ背景色を指定することが出来ます。この講座の章見出しがそうですね。 　こんな具合です。 ワインの保存方法 　これはborderを使って、例えば「１」にすると、こんな風になります。 ワインの保存方法 　ね、れっきとした表組になっているでしょう？ 　ソースは次の通りです。 ＜table bgcolor=#00dd00 border=1＞ ＜tr＞＜td＞＜font color=red＞ワインの保存方法＜/font＞＜/table＞ 　 　bgcolorという技を使っています。なお、このbgcolorは、＜ｔａｂｌｅ＞のタグの中にも指定できますが、＜ｔｄ＞の中に指定して、セルごとに色を指定することもできます。 　こんな具合です。 　 これに枠線を付けてみます。border＝４でやってみましょう。 　ね、楽しいでしょう？ 複雑な表を作ってみましょう 　 　まずは、下の表を見て下さい。 文　系 理　系　 国語 社会 算数 理科 やすし 大変良い 良い 普通 普通 きよし 悪い 普通 悪い 大変悪い やすこ 普通 普通 良い 普通 けいこ 悪い 大変悪い 大変良い 良い 　 文系と理系のところが、セルふたつ分を使った大きなセルになっています。 　セルひとつひとつの開始を表す＜ｔｄ＞タグの中に、「これは横にふたつ分の大きさですよ」と指示してやればいいのです。 ＜ｔｄ　ｃｏｌｓｐａｎ＝２＞ 　なお、文字に色が付いているのは、この講座を見やすくするためで意味はありません。通常と同じく文字の前にフォントタグでいろ指定をするだけです。また、この部分だけ＜ｃｅｎｔｅｒ＞タグで文字の位置を中央に置いています。　 　では次に、縦にふたつぶんを指示してみましょう。 ＜ｔｄ　ｒｏｗｌｓｐａｎ＝２＞ 　このふたつの指示を使って書いた表を次に示します。 成績表 文　系 理　系　 国語 社会 算数 理科 男 子 やすし 大変良い 良い 普通 普通 きよし 悪い 普通 悪い 大変悪い 女 子 やすこ 普通 普通 良い 普通 けいこ 悪い 大変悪い 大変良い 良い 　ソースを示します。今回は、文字色など表組の技術に関係ないものも省略せずにそのまま提示しておきます。 ＜table border=1＞ ＜tr＞ 　＜td colspan=2 rowspan=2＞＜font color=#ff00ff＞＜center＞成績表　←縦と横の両方を指示。 　＜td colspan=2＞＜center＞＜font color=#ff8888＞文　系 　＜td colspan=2＞＜center＞＜font color=#ff8888＞理　系 　 ＜tr＞ 　＜td＞国語 　＜td＞社会 　＜td＞算数 　＜td＞理科 ＜tr＞ 　＜td rowspan=2＞＜font color=blue＞男＜br＞子　←改行で「男子」を２行に表示。 　＜td＞やすし 　＜td＞大変良い 　＜td＞良い 　＜td＞普通 　＜td＞普通 ＜tr＞ 　＜td＞きよし 　＜td＞悪い 　＜td＞普通 　＜td＞悪い 　＜td＞大変悪い ＜tr＞ 　＜td rowspan=2＞＜font color=blue＞女＜br＞子 　＜td＞やすこ 　＜td＞普通 　＜td＞普通 　＜td＞良い 　＜td＞普通 ＜tr＞ 　＜td＞けいこ 　＜td＞悪い 　＜td＞大変悪い 　＜td＞大変良い 　＜td＞良い ＜/table＞ 　いかがですか？ 　ここで注意しなくてはいけないのは、rowspanを使った行とそうでない行では＜td＞の数が異なるということですね。 枠線の太さを変えてみる 　枠線の太さを自由に設定することが出来ます。外周の太さについてはborderで指示します。 　では、それぞれの仕切りの枠線はどうするのでしょうか？　下の表を見て下さい。 成績表 文　系 理　系　 国語 社会 算数 理科 男 子 やすし 大変良い 良い 普通 普通 きよし 悪い 普通 悪い 大変悪い 女 子 やすこ 普通 普通 良い 普通 けいこ 悪い 大変悪い 大変良い 良い 　全部の線が太くなりましたね。 　これは＜ｔａｂｌｅ＞タグの中に、「ｃｅｌｌｓｐａｃｉｎｇ」で指定します。 ＜ｔａｂｌｅ　ｃｅｌｌｓｐａｃｉｎｇ＝５＞ 　残念ながら、僕はこの表に満足できません。一斉に全ての線が太くなってしまうからで、線ごとに太さを変えたほうがメリハリのある表が出来ます。 　そこで、次のような表を作ってみました。 成績表 文　系 理　系　 国語 社会 算数 理科 男 子 やすし 大変良い 良い 普通 普通 きよし 悪い 普通 悪い 大変悪い 女 子 やすこ 普通 普通 良い 普通 けいこ 悪い 大変悪い 大変良い 良い 　これは欠損セルを使った目の錯覚です。 　太くしたい横線をいれるときに＜ｔｒ＞を三つ、縦線を太くしたいところには＜ｔｄ＞をふたつ挿入しています。（ネスケではこの方法で思い通りに表現できなかったように思います） 色を付けて遊びましょう 　ところで、外枠線の太さはｂｏｒｄｅｒで指定するわけですが、全体が立体的に浮き上がったように表現されます。ちょうど左上から光が当たったように上と左が白、右と下が黒になります。 　しかし、表全体をｂｇｃｏｌｏｒ＝＃００ｆｆ００で明るい緑色にしてみたときはどうでしょうか？ 　立体感を表す外周部分にもそれにふさわしい色合いになってもらいたいものです。これを指定することが出来ます。 　左の表は＜ｔａｂｌｅ＞の中に、ｂｇｃｏｌｏｒ＝＃００ｆｆ００を指定したものです。 　一方、右の表は枠線の色を指定したものです。比べてみて下さい。 成績表 文　系 理　系　 国語 社会 算数 理科 男 子 やすし 大変良い 良い 普通 普通 きよし 悪い 普通 悪い 大変悪い 女 子 やすこ 普通 普通 良い 普通 けいこ 悪い 大変悪い 大変良い 良い 成績表 文　系 理　系　 国語 社会 算数 理科 男 子 やすし 大変良い 良い 普通 普通 きよし 悪い 普通 悪い 大変悪い 女 子 やすこ 普通 普通 良い 普通 けいこ 悪い 大変悪い 大変良い 良い 　 　このふたつの表の違う部分だけ、つまり最初のテーブルタグの違いを下に記述しておきます。 左の表 ＜table border=4 cellspacing=1 bgcolor=#00ff00＞　 右の表 ＜table border=4 cellspacing=1 bgcolor=#00ff00 bordercolorlight=#ddffdd bordercolordark=#00bb00＞ 　上の左の表はメリハリがはっきりしています。一方右の表は落ち着いた感じがします。好きな方を選んで下さい。 　さて、上のソースで気がついた人がいると思いますが、何も表が緑だからって、外周の枠線を緑系統にする必要はないんです。 　こんなのはいかがでしょうか？ 成績表 文　系 理　系　 国語 社会 算数 理科 男 子 やすし 大変良い 良い 普通 普通 きよし 悪い 普通 悪い 大変悪い 女 子 やすこ 普通 普通 良い 普通 けいこ 悪い 大変悪い 大変良い 良い 　これは、bordercolorlightにyellowを、bordercolordarkにredを指定したものです。 　またこれを利用して、ちょっと風変わりな表を作ることもできます。 成績表 文　系 理　系　 国語 社会 算数 理科 男 子 やすし 大変良い 良い 普通 普通 きよし 悪い 普通 悪い 大変悪い 女 子 やすこ 普通 普通 良い 普通 けいこ 悪い 大変悪い 大変良い 良い 　立体感が無くなりましたが、あまり使っている人がいないので、新鮮に感じると思います。ソースは次の通りです。（エクスプローラーの場合。ネスケの場合は表現が異なるはずです） ＜table border=2 cellspacing=1 bgcolor=#00ff00 bordercolor=#0000ff＞ 文字と表のバランス 　さあ、この講義もあとひとふんばりです。 　次の三つの表を見比べてみて下さい。 今週のトピックス 今週のトピックス 今週のトピックス 今週のトピックス 　文字のまわりのスペースに差がありますね。これはテーブルタグの中にｃｅｌｌｐａｄｄｉｎｇで指定します。上の表のソースは次の通りです。＊の部分に数字が入ります。上から順に「１」「３」「５」「１０」です。 ＜table bgcolor=orange border=3 cellspacing=1 cellpadding=＊＞ 　 　見出しのかわりに使えるほか、ちょっとしたリンクボタンとしても使用できます。画像なんかに比べるとずっと軽いですから、利用価値が大きいです。 　この見出しのように、枠線が欲しい場合は便利ですが、枠線がいらない場合はスタイルシートで背景色を特定の文字だけに対して指定することが出来ますので、そちらも利用してみてください。

横罫線タグで遊ぼう 　何か段落的なことを視覚的に表現したいとき、あなたはどうしますか？　行と行の間にスペースを空けたり、段落のはじめに文字の大きさや色を変えてタイトルを作ったり。 　そして何と言っても便利なのが横罫線です。ここでは横罫線のいろいろな面白い使い方を試してみましょう。ただし、ネットスケープではあまり役に立たないでしょう。

まず、一番基本的な横罫線をご覧下さい。 これは次のように記述します。 　＜ｈｒ＞ 　ここまでは誰でもやっています。 　ところで、この横罫線は「幅」「色」「長さ」を自由に変えることが出来ます。 　また、テキストと同じように「左寄せ」「センタリング」「右寄せ」などができます。 まず、色と幅を変えてみましょう 色付罫線はＩＥにのみ対応しています ちょっと緑色の罫線を引いてみましょう。 これは次のように記述します。 　＜ｈｒ　ｃｏｌｏｒ＝ｇｒｅｅｎ＞ 　ソースを見れば、なあんだ、とおもうでしょう。 　単にタグの中に色の指定をしているだけです。 　ここではｇｒｅｅｎとかきましたが、もちろん＃＊＊＊＊＊＊と、６桁の数字で表現しても構いません。 　次に幅を変えてみましょう。 　こんなのはいかがですか？ これは次のように記述します。 　＜ｈｒ　ｃｏｌｏｒ＝ｏｒａｎｇｅ　ｓｉｚｅ＝４＞ 長さはどうやって帰るの？ 　まず実際に三種類の罫線を見ていただきましょう。 　ソースは上から順に 　＜ｈｒ　ｃｏｌｏｒ＝ｂｌｕｅ　ｓｉｚｅ＝５　ｗｉｄｔｈ＝３０％＞ 　＜ｈｒ　ｃｏｌｏｒ＝ｂｌｕｅ　ｓｉｚｅ＝５　ｗｉｄｔｈ＝６０％＞ 　＜ｈｒ　ｃｏｌｏｒ＝ｂｌｕｅ　ｓｉｚｅ＝５　ｗｉｄｔｈ＝１００％＞ 　となっています。 　※ｗｉｄｔｈ＝１００％を指定すると、本当は画面の左右いっぱいに広がりますが、ここでは見やすさを考慮して、画面の左右にスペースを設けています。（＜blockquote＞タグ） 　ここで新しく増えた記述はｗｉｄｔｈですね。これは％でも、ピクセルでも指定することが出来ます。 　％は、ディスプレイの幅に対する割合です。つまり、長さそのものはディスプレイの大きさに左右されますが、デザイン的にはディスプレイの大きさに寄らず、イメージ通りのものが作れる、と言うこともできるでしょう。 　表示位置は何も指定しなければご覧のように「センタリング」されます。 　では、左に寄せてみましょう。 　では、右に寄せてみましょう。 　左寄せの記述は次のようになります。 　＜ｈｒ　ｃｏｌｏｒ＝ｂｌｕｅ　ｓｉｚｅ＝５　ｗｉｄｔｈ＝１００％　ａｌｉｇｎ＝ｌｅｆｔ＞ 　右寄せの記述は次のようになります。 　＜ｈｒ　ｃｏｌｏｒ＝ｂｌｕｅ　ｓｉｚｅ＝５　ｗｉｄｔｈ＝１００％　ａｌｉｇｎ＝ｒｉｇｈｔ＞ というわけで、デザイン的に遊べますよね。 　ただ単に横線を引く、というのではなくて、これだけのバリエーションが使えれば、デザイン的にそれなりに遊べます。 　ＨＰ上でインパクトを付けたり、目を楽しませたりするのに、画像を用いますが、画像はどうしても重たくなってしまいます。 　そう言うときに、横罫線を色々工夫してみてはいかがでしょうか？ 　もちろん画像の代わりにはなりませんが、横罫線はテキストですから、軽い割に目を引くデザインが作れると思います。 　僕のプータロー日記　 僕のプータロー日記

ＣＧＩについて 　ＨＰ作りをはじめると「ＣＧＩ」という言葉をよくきくようになると思います。スペルに自信がないからカタカナで書くけれど、コモンゲートウエイインターフェイスのことですね。え？　カタカナ表記の仕方が納得行かないって？　そりゃあ仕方ありません。どんな外国語でもカタカナ表記にすればちょっとずつ変なわけですからね。 　「ＣＧＩ」は、ｈｔｍｌとは違い「プログラム」です。ｈｔｍｌにくらべると使いこなすのは結構やっかいです。ＣＧＩのお世話にならずにホームページを作ることはもちろん可能ですが、しかしそれでは味気ないものになるでしょう。 　ＢＢＳやチャット、アクセスカウンターといったものはＣＧＩを使って作動しています。アクセスカウンターは、誰かが訪問してきたことを察知し、訪問者数を記録した数字に１をプラスして、そして画面に表示します。こんな手順が書き込まれています。 　ホームページの画面上に表示されるのは、本来作者が作成してサーバーにアップロードしたファイルだけです。ところが、ＢＢＳやチャットは、「訪問者が書き込んだ内容」も画面に表示してくれます。これもＣＧＩのおかげです。 　ＣＧＩを一から習得するのは大変です。使いこなせない人が相当数いるという前提で、アクセスカウンター、チャット、ＢＢＳなどはレンタルをしているところが多数あります。プロバイダやサーバーの基本的なサービスとして用意されていることもあります。 　また、サーバーによってはオリジナルのＣＧＩの使用を禁止しているところもあります。例えば、ジオがそうです。サーバーは通常、複数のユーザーが共有しています。もしここで、ＣＧＩが暴走したら、全く無関係なユーザーにまで多大な迷惑が及びます。また、ＣＧＩがサーバーの負担になることも多いのです。このようなわけで、サーバーによってはオリジナルのＣＧＩをアップすることを禁止し、そのかわりにサーバー側でそれらのサービスを用意する。そんなことが多いようです。 　なお、ＣＧＩは全てを自作する必要は、おそらくないでしょう。必要に応じて一部を書き直すだけで利用できるサンプルが、オンライン上には多数出回っていますし、また、ＣＧＩを解説した書物にもそれらサンプルを収めたＣＤがついていることがあります。まずはこのあたりから勉強をはじめるといいかもしれません。 　ＣＧＩの勉強を一切しないまま、それなりのホームページは作れるでしょうか？　もちろん、作れます。プロバイダやサーバーの用意したサービスや、レンタルのものをオンラインで探せば、十分間に合うでしょう。僕もそうしています。

スタイルシートについて 　スタイルシートという言葉を聞いたことはあるでしょうか？　これは従来のｈｔｍｌとは違い、Ｗｅｂページをデザインするための技法です。見栄えを良くするためのものなのです。 　僕のコンテンツは全体としてテキストが多く、従来のｈｔｍｌだけを使ったのでは、上下左右にずらりと文字ばかりが並んで、非常に読みにくくなってしまうのが、ずっと気になっていました。 　できれば適切な行間を空けたかったのですが、＜ｂｒ＞（改行）タグをふたつ重ねるとか＜ｐ＞（段落）タグを使うなどの方法しか思いつきません。しかし、これでは、ブラウザの大きさが人によって違うので、自分のパソコンで満足いく表現が出来ても、他の人の環境ではぐちゃぐちゃになってしまいます。 　妙な位置で文字が途切れたり改行されたりしているページを時々見かけますが、これはそのためです。 　ところがある日、上手い具合に行間をあけているページを見つけました。ソースには、＜ｐ　ｓｔｙｌｅ＝”ｌｉｎｅ－ｈｅｉｇｈｔ：　２５ｐｘ”＞と記されていました。一行の上下幅が２５ピクセルですよと指定しているのですが、これがまさしくスタイルシートだったのです。当時はそんなことは知りません。ただ、カンニングをしただけです。 　この文章は行間を１３０％にしています。ピクセルのほかにも、パーセントやミリメートルなどの単位が使えるのです。 　スタイルシートは、行間だけではありません。文字の色やリンクの色の指定、サイズ、背景色、その他様々なものに使えます。リンクが設定されている部分にカーソルを合わせると、文字の色やサイズが変化するのも、スタイルシートを使って作ることが出来ます。ｈｔｍｌに慣れてきたら、それほど難解ではありませんので、一冊本を買って勉強してみるといいでしょう。 　スタイルシートのいいところは、使いたい機能だけを勉強することが出来る、ということです。初めてホームページを作る際には、ある程度のｈｔｍｌを習得しなくてはなりませんが、スタイルシートは「ソコだけを勉強して利用する」と言うことが可能です。 　スタイルシートの指定の仕方は、３種類あります。 　１．そのページ全体を指定する方法。 　２．マークを決めておき、そのマークのついた部分だけに指定が有効となる方法。 　３．その場所だけを指定する方法。 　このページでは、行間をスタイルシートで指定しています。指定の方法は「３」で、段落ごとに指定しています。段落ごとですから＜ｐ＞タグの中に指定をするのが本来の形ですが、＜ｐ＞の度に指定しなおすのは面倒なので、＜ｄｉｖ＞（章）タグを使っています。 　「１」の応用編としては、スタイルシートの様々な指定を別のファイルに設定しておき、その設定ファイルを指定することによって、ページごとにいちいち指定をせずに、Ｗｅｂ全体を統一したスタイルにすることも可能です。 　また、スタイルシートは従来のタグの設定を「変更」することが出来ます。例えば、＜ｈ１＞などの見出しタグは、その字の大きさは固定されています。しかし、これをスタイルシートで変更することが出来るのです。しかも、＜ｈ１＞は全て赤色で表現しなさい、と事前に設定することまで出来てしまいます。こうすることで、より思い通りのデザインを、たった一度の設定（あまり手間をかけずに）で出来るわけです。 　文字の大きさも、従来なら　ｆｏｎｔ　ＳＩＺＥ＝１～７　に限られていましたが、このそれぞれの字の大きさの定義を変更してしまうことも出来ますし、これにとらわれない文字サイズも扱えるようになります。 　大きい字 　とまあ、こんな具合です。１５０ピクセルの文字です。なお、この文字がどうやらきちんと表示されていないなと感じる場合は、あなたのブラウザがスタイルシートに対応していないか、対応の仕方が、作者のブラウザとは違っているかのどちらかです。つまり、まだまだ発展途上中の技術ですので、使う場合は注意が必要です。

[「第１０章」に進む] 　

[僕たち初心者ホームページ作成講座目次へ]　　[ホームに戻る]