さらば<FONT>タグ

HTML 4.0 とCSS 2 によって、「ブラウザー戦争」によるタグの拡張の時代は終わった。これからは IE やナビゲーターでの見え方ではなく、規格に従ったHTML の作成が求められる。今こそホームページのスタイルシート化を始めよう。

ホームページ
スタイルシート化作戦
スタイルシート対応のブラウザーが8割に右のグラフは、今年9月3日から5日まで

古いブラウザーでも構造だけはきちんと見えの3 日間、インターネットマガジンのホーム

るページが作れる。このポイントにもとづいページ（http://internet.impress.co.jp/）て、ホームページをスタイルシート化していW3C（World Wide Web Consortium）

を訪れたブラウザーを集計したものだ。スタ

くための実践的な手順を紹介していこう。

が定めたHTMLの最新の標準規格。文書のイルシートをサポートしたインターネットエ

なお、この記事では、スタイルシートのす構造と見栄えを明確に分離することが基本

クスプローラ（IE）3、4 とネットスケープ

べての機能やブラウザー間の違いを細かく解となり、見栄えにはスタイルシートを使うこナビゲーター4 の割合が合わせて約 85%に説しているわけではない。詳しくは本誌付録とが推奨されている。

達している。古いバージョンのブラウザーをの小冊子「HTML4.0＆スタイルシート完全考慮して、スタイルシートを使うことを今ま

互換性データファイル」を参照してほしい。

【HTML 4.0】

【CSS】カスケーディングスタイルシート

でためらっていた人も多い

いくつかあるスタイルシ
その他だろう。しかし、この結ネットスケープ
ナビゲーター 3

6.2% 8.9%果を見ると、スタイルシートを活用したページ作
りがようやく実用段階に

インターネット
エクスプローラ 3入ったと言える。
スタイルシートを使うときのポイントは、新機能を使った派手なページを作ることではなく、「構造」と「見栄え」を分離することだ。HTML でページの骨格を作り、飾りはス
タイルシートで付ければ、

290 INTERNET magazine 1998/11

インターネット
エクスプローラ 4

9.2%

50.5%

ートの中で、もっともよく使われ、W3C でも規格化されているスタイルシート。
1996年12月に発表された
CSS1 と1998 年 5 月に発表されたCSS2 がある。IE
4、ナビゲーター4 ともに、不完全ながらCSS1 のほとんどをサポートし、CSS2

ネットスケープ
ナビゲーター 4

25.3%
インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&Dの一部を先取りしている。
この記事で「スタイルシート」 と呼 んでいるのは、
CSS のことである。

H

TMLが
簡単になる
「スタイルシートだと新しいことを覚えな

きゃならなくて面倒くさい」と思ってはいないだろうか。確かにスタイルシートは一見ややこしい英単語の羅列のようだ。しかし、ス
タイルシートを使って「構造」と「見栄え」
を分ければ、HTML はずっと簡単になる。
ほんの初歩的なタグを数個使ってHTML を書いておけば、後からいくらでもスタイルシートでデザインを加えることができる。タグを複雑に組み合わせてトリッキーなHTMLを作る必要はない。

5

ス れでも読めるタ だ ページが作れる
イ
つル
のシ
利ー
点ト

WWW は、「パソコン＋ WWW ブラウザー」という組み合わせのためにあるわけではない。今後、携帯端末、音声読み上げソフ
ト、点字出力など、さまざまな環境での利用が進んでいくだろう。CSS2 では、「メディアタイプ」というしくみが導入された。まだサポートしているソフトウェアはないが、メディアタイプが使われるようになれば、右のように、1つのHTMLに対していろいろな環境に合わせたスタイルシートを指定できるようになる。

@media aural {音声の場合のスタイル……

}@media braille {点字の場合のスタイル……
}がり返しの手間繰 省けるかな表現 が
豊 できる
もともと文書の構造だけを記述するもの@media handheld {小さな画面のためのスタイル……
}@media screen {パソコンの場合のスタイル……
}

だったHTMLでデザインまでしようとすると、どうしても中途半端になってしまう。スタイ
ルシートを使えば、ポイント数で文字の大きホームページ作成ソフトに頼る人が多いのさを決めることもできるし、文章の上下左は、作業をすばやく行いたいからだ。ページ

右の余白を変えることもできる。CSS2 の中 の文 字 の色 を変 えるためにいちいち「ポジショニング」を使えば、好きなところ「<FONT COLOR="#FF0000">」と何度に文字や画像を配置することもできる。しも入力するのは確かに面倒だ。スタイルシー

かもスタイルシートはテキストだけで書け

トの利点はこうした繰り返しの手間を省くる。レイアウトのために<TABLE> を使点にもある。下の例のように「見出しはこの色」と1 回指定するだけで、1 つのページ

来 の WWW にったり、画像だらけのページにしなくて 将
対応できる
もすむ。

の見出しの色をすべて変更できる。複数のこれからのWWW で広く使われるだろう

ページの見出しを一気に変更することも可と期待されているのがXML というマークア

能だ。

ップ言語だ。XMLを使えば、自由に文書や<H1><FONT COLOR="#FF0000">赤い見出し</FONT></H1>

データのためのタグを新しく作ることができ<H1><FONT COLOR="#FF0000">また赤い見出し</FONT></H1>

る。しかし、XML は文書やデータの構造だ<H1><FONT COLOR="#FF0000">ここも赤い見出し</FONT></H1>↓

けを記述するもので、「どう表示されるか」H1 { color: #FF0000; }＋を決めるのはスタイルシートだ。HTMLでは<H1>赤い見出し</H1>

ザインを作るという習慣を今からつけておけ<H1>また赤い見出し</H1>

ば、XML が普及する時代にもついていける<H1>ここも赤い見出し</H1>

だろう。

については何も指定できない。XML の表示
文書の構造だけを書き、スタイルシートでデ

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1998/11

291

スタイルシート化の準備をしよう1

テキストエディターを用意する

右クリックでHTMLを編集

HTMLを書くには、それなりのソ

フトウェアが必要だと思っている人

秀丸エディタウィンドウズでHTMLを編集するときは、もいるかもしれない。しかし、現在のホームペフォルダー上での右クリックメニューを最ージ作成ソフトでは、「構造」と「見栄え」を大限に活用したい。テキストエディターの明確に区別できず、自分の意図しないタグがインストーラーに「送るに入れる」という挿入されてしまう。ワープロソフトで作ると、項目があれば、チェックしておこう。ファ

<FONT>タグだらけのHTMLができあがる。ス

イルの右クリックで出るメニューの「送る」

タイルシート作成を完璧にサポートしたソフトからエディターを選べば、即座にHTML がウェアはまだ存在しないのが現状だ。

編集できる。

スタイルシート化したページを作るなら、
テキストエディターで直接HTMLを書くのがベストだ。
「メモ帳」などOS 付属のものでもいいが、どうせなら高機能なシェアウェアを用意

j http://hidemaru.xaxon.co.jp/index.html

したい。ウィンドウズなら、老舗のテキストエ

CD-ROM収録先 ÅWin→ Hidemaru

ディター「秀丸エディタ」がおすすめだ。強力

シェアウェア 4,000円

なマクロ機能を持ち、HTMLをサポートしたマ
クロが有志の手で公開されている。マッキント

Jedit

ッシュなら「Jedit」で決まりだろう。マクロが最初から付属しており、メニューからHTMLj http://www.iijnet.or.jp/matsumoto/のタグを挿入することもできる。

CD-ROM収録先 ÅMac→ Jedit
シェアウェア 2,500円

2

シンプルなHTMLを作る
テキストエディターでHTMLを書くからといって、参考書と首っ引きですべてのタグを覚える必要はない。
<HTML>、<HEAD>、<TITLE>、<BODY>
といった必須のタグのほかに、<H1> 〜 <H6>（見出し）、<P>（段落）、<BR>（改行）、<A>（リンク）だけ覚えれば立派なページが作れる。画像を貼ったりプラグインを使ったりすることは最後に考えればいい。まずはテキスト
中心のシンプルなページを作ろう。

<HTML><HEAD><TITLE>古いHTML</TITLE></HEAD><BODY BGCOLOR="#FFFFFF"TEXT ="#000000"><CENTER><FONT SIZE=5 color="#FF0000"><B>見出し</B></FONT></CENTER><BLOCKQUOTE>本文……

右クリックでHTMLを作成

ウィンドウズのレジストリーの操作に自信のある人なら、フォルダーを右クリック
してHTMLを作成できるようにしてみよう。
「レジストリエディタ」を使って「HKEY̲CLASSES̲ROOT」→「.html」の下に「ShellNew」というキーを作り、そのキーの下に名前が「FileName」、データが「new.html」という文字列を作る。次にテンプレートとなるHTML ファイルを作り、「new.html」という名前を付ける。これをエクスプローラでWindowsフォルダーの下の「ShellNew」フォルダーにコピーする。

ホームページ作成ソフトで作ったページがす

これで、右クリックメニューの「新規作成」

でにあるなら、テキストエディターで開いて、からHTML ファイルを作れるようになる。

余計なタグをどんどん消してしまおう。文字の大きさや色のための<FONT> タグや、インデントのための<BLOCKQUOTE>、<TABLE>
タグはもう必要ない。
シンプルなHTMLができたら、いよいよスタ
イルシートの出番だ。

292 INTERNET magazine 1998/11<HTML><HEAD><TITLE>新しいHTML </TITLE></HEAD><BODY><H1>見出し</H1><P>本文……

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

スタイルシート化への3つのステップ

1

タグにSTYLE属性を付けてみる
まず、スタイルシートの効果を簡単に見る

ために、右のサンプルのように<H1>や<H2>、< P > などのタグの中にS T Y L E 属性を付けてみよう。

「STYLE=" "」の「" "」の中に、「プロパティー: 値; プロ
パティー: 値;」のように「:」でプロパティーと値をペアにし、「;」で区切って並べていく。右のサンプルでは、「color」や「font-size」がプロパティーで、「red」や「16pt」が値だ。ただし、STYLE属性を使う方法は、効果をテストする場合などにとどめ、以下の2 や3 のようにスタイルをまとめて書くのが常道だ。

2<HTML><HEAD><TITLE>桃太郎 </TITLE></HEAD><H1 STYLE="color: red; font-size:
20pt;">桃太郎 </H1><H2 STYLE="color: red; font-size:
16pt; text-align: center;">桃、流れ着く</H2><P STYLE="margin: 16px 10%; lineheight: 150%;">昔々あるところに…
</P><STYLE>タグでまとめる
STYLE 属性でスタイルシートの効果がつかめたら、 今 度 は H T M L の先 頭 の<HEAD> 〜</HEAD> の中に<STYLE> タグを作成しよう。<STYLE> 〜</STYLE> の間には、右のサンプルのようにタグ名（「H1」など）の後ろに「{}」を書く。かっこの中に1で作ったSTYLE属性の内容を移し、STYLE
属性は消してしまおう。これで、HTML 内のすべての<H1>、<H2>、<P> タグに指定したスタイルが反映される。なお、<STYLE>タグの中は、スタイルシートに対応
していないブラウザーで表示されないように<!-- 〜--> のコメントで囲うこと。

3

CSSファイルを作る
STYLE 属性や<STYLE> タグを使っただけでは、スタイルシートの力を100%引き出

すことはできない。スタイルシートをHTML ファイルの外<HTML><HEAD><TITLE>桃太郎 </TITLE><STYLE><!-H1 { color: red; font-size: 20pt; }H2 { color: red; font-size: 16pt; textalign: center; }P { margin: 16px 10%; line-height:
150%; }--></STYLE></HEAD>

mukasi.css
H1 { color: red; font-size: 20pt; }H2 { color: red; font-size: 16pt; textalign: center; }P { margin: 16px 10%; line-height:
150%; }に置き、複数のHTML ファイルでスタイルを共有してこ
そ、スタイルシートの本当の価値が出る。まず、2で作った<STYLE> タグの内容を別のテキストファイルにコピーし、ファイルの拡張子を「css」に変える。次に、そのスタイルを反映させたいHTML ファイルの<HEAD> 〜</HEAD> の中に、<STYLE> タグの代わりに右のソースのように<LINK> タグを書いてHTML ファイルとCSS フ

momo.html<HTML><HEAD><TITLE>桃太郎 </TITLE><LINK REL="stylesheet" TYPE="text/css" HREF="mukasi.css"></HEAD>ァイルを結び付ける。また別のHTML ファイルにもこの<LINK> タグを1 行書けば、同じCSS ファイルのスタイ
ルを読み込むようになる。

urasima.html<HTML><HEAD><TITLE>浦島太郎 </TITLE><LINK REL="stylesheet" TYPE="text/css" HREF="mukasi.css"></HEAD>

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1998/11

293

実践スタイルシート 1

色と背景を指定しよう<FONT COLOR="red">EM { color: red; }<BODY BGCOLOR="#FFC0CB">

BODY { background: #FFC0CB; }スタイルシート化の手始めに、色と背景を「この文字に色を付けたいが、強調の意味で指定する方法を覚えよう。文字の色を指定すはない」という場合は、<SPAN> を使おう。

るプロパティーは「color」だ。ほとんどどん「SPAN.クラス名」の形でスタイルを指定しなタグにでも指定できる。

（下のサンプルでは「person」がクラス名）、「color」には、HTML で色を指定する場合

HTML の中では色を付けたい文字を<SPANと同じく、「#FF0000」と16 進数で指定した

CLASS="クラス名"> 〜</SPAN> で囲む。ク

り「red」と色名で指定したりできるが、次のラス名を使ったスタイル指定をすれば、特定のようにRGB 3 原色で指定する方法を使うとわ個所のスタイルを変えられるだけではなく、かりやすいだろう。

「person」のようにタグに自分で意味を付けることができる。
背景を指定するプロパティーにはいくつかあcolor: rgb(255, 0, 0);

るが、色と画像の指定だけ覚えればいいだろcolor: rgb(100%, 0%, 0%);う。背景色は、「background」に「color」
前のページまで読めば、見出しや段落全体と同じ方法で色を指定する。背景画像は、の色を指定する方法はわかるが、文章の中の「background: url(back.gif);」のように「url（）
」内にファイルを指定する。
「url（../

注意点

特定の文字だけ色を付けたいときはどうすれば

）
」の
「
（

いいだろうか？

ここで活躍するのが、今まで

img/back.gif）」のように相対パスや絶対パスであまり使 われてこなかった < E M > やも指定できる。色と画像の両方を指定するに● CSS では色名は「red」や「blue」な<STRONG> といった「強調」を意味するタは、「 background: url(back.gif) #FFFFC0;」

どの基本 16 色だけで、IE やナビゲータ

グだ。スタイルシートで「EM { color: red; }」とする。

ーの「lightblue」や「pink」などは規則● IE3 では「rgb（）」形式での色の指定は効かない。

とすれば、<EM> 〜</EM> で囲った部分はす

背景色や背景画像といえば思い付くのがべて赤になる。<FONT> で何度も色を指定し<BODY> と<TABLE> だが、スタイルシート●ナビゲーター 4 では、<H1> や<P> に背なくてもいいし、色を変えたいときにもスタイを使えば、そのほかのタグにも背景を指定でき景色を指定すると文字の背景にだけ色がルシートを1 か所書き換えるだけですむ。スタる。<P> に背景色を指定すれば、背景色のた付く。背景全体に色を塗るには枠線をイルシートに対応していないブラウザーでも、めだけに<TABLE> を使う必要はなくなる。

指定する。P.297 参照。

にない。

太字や斜体で表示されるのが利点だ。

<BODY BGCOLOR="#FFC0CB" TEXT="#000000"
BACKGROUND="back.gif">

BODY { color: black;background: #FFC0CB url(back.gif) }<P>昔々あるところに

EM { color: red; font-style: normal; }<FONT COLOR="#0000FF">おじいさん</FONT>とSPAN.person { color: blue; }<FONT COLOR="#0000FF">おばあさん</FONT>がいました。……川でせんたくをしていると、<BODY><FONT COLOR="#FF0000">どんぶらこ、<P>昔々あるところに

どんぶらこ</FONT>と、大きな桃が流れてきました。

<SPAN class="person">おじいさん</SPAN>と<SPAN class="person">おばあさん</SPAN>がいました。……川でせんたくをしていると、<EM>どんぶらこ、どんぶらこ</EM>と、大きな桃が流れてきました。

294 INTERNET magazine 1998/11

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

実践スタイルシート 2

フォントを使いこなせ<FONT SIZE="+2">BIG { font-size : 20pt; }<FONT FACE="MS P明朝">

P { font-family:'ＭＳ Ｐ明朝','平成明朝',serif; }<FONT> は文字の大きさを変えたり色を付を指定するには、「font-family」を使う。
「MSけたりするために頻繁に使われているタグだ。

P 明朝」など自分のパソコンにあるフォントをしかし、HTML 4.0では<FONT>をはじめとす

つい使ってしまいがちだが、読む人の環境に同る文字装飾のためのタグは「不適切」なもの

名のフォントがなければ意図どおりに表示されとして廃止される方向に進んでいる。スタイル

ない。おすすめはOSや言語に依存しない汎用シートを使えば<FONT> タグが不要になるば

フォント名も指定しておくことだ。指定したフかりでなく、ポイントやピクセル単位でサイズ

ォントがなくても日本語のページでは「serif;」を指定できるので、さらに便利になる。たとえを追加すれば明朝体に、「sans-serif;」を追加

ば「font-size: 48pt;」などとして、目を引く

すればゴシック体になる。
太字や斜体にするときは、<B> や<I> を使

タイトルを作ることも可能だ
文章の途中で文字のサイズを変えたいとき用してかまわない（HTML 4.0では廃止予定でには、左ページで説明したように<EM> やはない）。ただし、特定のタグをまとめて太字<SPAN> を使うほかに、<BIG> や<SMALL>にしたり斜体にしたりするには、スタイルシーにスタイルシートでサイズを指定して使う方法

トを使う必要がある。スタイルシートでの太字

注意点がある。<BIG>と<SMALL>はHTML 4.0でもの 指 定 は 「 font-weight: bold;」、 斜 体 は廃止予定になっていないので積極的に活用し「font-style: italic;」だ。逆に太字や斜体にし●ネットスケープナビゲーター4では、日本よう。

たくないときは、値に「normal」を指定する。

語のページで「font-family」を指定しても反映されないことが多い。

フォントの種類、つまりゴシック体や明朝体<FONT FACE="ＭＳ Ｐ明朝">

P { font-family:'ＭＳ Ｐ明朝','平成明朝',serif; }……おばあさんが川でせんたくをしていると、BIG { font-size: 24pt; }<B><I>どんぶらこ、どんぶらこ</I></B>と、

EM { font-weight: bold; font-style: italic; }<FONT SIZE="+2">大きな</FONT>桃が流れてきました。</FONT><P>……おばあさんが川でせんたくをしていると、<EM>どんぶらこ、どんぶらこ</EM>と、<BIG>大きな</BIG>桃が流れてきました。

P O I N T H1はフォント用のタグではない
HTML の入門書には、「<H1> 〜<H6> を使うとフォントのサイズが変わります」と書いてタグ

また、<UL>（リスト）や<DL>（定義リス間違いト）をインデントのために使うのも避けよう。

段落

1 行空けるゲーターで文字の大きさが変わるとしても、そ<BLOCKQUOTE> 引用

インデント

HTML だけで書きたい場合には、文字の大きれはブラウザーが大きさを決めているだけで、<ADDRESS>

連絡先

斜体

さや色を変えるために<FONT> タグを使って「たまたま」そうなっていると考えるべきだ。

<EM>

強調

斜体

<STRONG>

強い強調

太字あるものが多いが、それは間違いだ。IEやナビ<H1> 〜 <H6> 以外に間違えやすいタグには、
次のようなものがある。

<P>

正しい意味

スタイルシートを使 わずに今 までどおり

もかまわないが、<BLOCKQUOTE>など「構造」を表すタグを「見栄え」のために使ってはならない。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1998/11295

実践スタイルシート 3

文字揃えと行間を指定しよう<CENTER>

DIV.center { text-align: center; }<H2 ALIGN="right">

H2 { text-align: right; }スタイルシートを使うのは、飾りを付けるた

日本語のページを読むと、文章がびっしりめだけではなく、テキストを読みやすくするた

詰まった感じがする。日本語のフォントには、めでもある。ここでは文字揃えと行間の指定

英文フォントと違って上下に余白がないためについて説明しよう。

だ。これを読みやすくするために、何文字かご

HTMLのタグと言えば、<H1>や<P>よりもとに<P>を入れたり、<BR>を続けて書いたり<CENTER>が先に思い浮かぶ人もいるかもしなど、ずいぶん無茶なHTML が書かれてきた。

れない。しかし、<CENTER> はもちろん、スタイルシートを使えば、行間を自由に空ける<H1> や<P> タグのALIGN 属性もHTML 4.0

ことができる。これだけでもスタイルシートをでは廃止予定となっている。

使いたくなるだろう。

スタイルシートで文字揃えを指定するには、行間を指定するには、「line-height」プロパ「text-align」プロパティーを使う。値には、ティーを使う。パーセントで値を指定すれば、「left」、「right」、「center」が指定できる。

行間が文字の高さに比例して広がる。長い文<CENTER> タグを使う代わりにページの特定

文章なら、「line-height: 150%;」あたりが適の部分をまとめて中央揃えにしたければ、クラ当だろうか。

ス指 定 を使 って「 DIV.center { text-align:

行間を指定した際に注意するのは、文の途

center; }」とし、中央揃えにしたい部分を中で文字を大きくしたり、画像を入れたりし<DIV class="center">〜</DIV>で囲めばよいないことだ。行間が固定されているので、表示だろう。

がはみ出してしまう。

<CENTER><H1>中央揃えの見出し

H1 { text-align: center; }</H1></CENTER>

H2 { text-align: right; }<H2 ALIGN="right">右揃えの見出し</H2>

P { line-height: 150%; }日本語のページを読むと……
<H1>中央揃えの見出し</H1><H2>右揃えの見出し</H2><P>

日本語のページを読むと……

P O I N T 段組みはあきらめよう「このページは800 ×600 以上の画面でごらは、<TABLE> を使って「段組み」を表現すは限らない。IEやナビゲーターの場合でも、大んください」と書いてあるページを見かけるが、るページを作 った場 合 だろう。 しかし、

きな表は表示するまで時間がかかり、読む人

ページを作るときには、画面の大きさにこだわ< T A B L E > は「 表 」 のためのタグであり、に負担を与えてしまうことになる。

る必要はない。訪れる人はPDA の狭い画面でHTMLでもスタイルシートでも「段組み」を表

正しいHTML を書きたいなら、段組みはあ見ているかもしれないし、音声読み上げソフト

すことはできない（ナビゲーターの独自タグに

きらめよう。どうしても左右の方向にレイアウなど「画面のない」環境なのかもしれない。

<MULTICOL>があるが、IE ではサポートされトしたいなら、P.298 のようにスタイルシート「相手が何を使っているかなんてわかりようが

ていない）
。

の「ポジショニング」を使おう。

ない」と考えたほうがいい。

無理をしてHTML の規則にはずれた段組み

画面の大きさを指定したくなってしまうの

296 INTERNET magazine 1998/11

を作っても、すべての環境できれいに見えるとインターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

実践スタイルシート 4

これが正しいインデントだ<BLOCKQUOTE><CENTER><TABLE width="80%">

P{margin-left: 10%; margin-right:
10%; }

ホームページ作成ソフトの中には、メニューって並べると、順に上、右、下、左の値になに「インデント」という項目のあるものがある。

る。2つの数値なら上下と左右の値になる。段しかし、実際に挿入されるタグは、「引用」を落の上に8 ピクセル、右にページの10%、下表す<BLOCKQUOTE>だ。また、<TABLE>に16 ピクセル、左にページの20%の余白を空を使ってインデントを付けているページも多い。

けるには、次のように設定する。

文章の左右に余白を空けて読みやすくしたいP { margin: 8px 10% 16px 20%; }と思うのはもっともだが、意味の間違ったHTML を書くのは避けたいものだ。余白を空

上下左右どれかの大きさだけを指定したい

けるにはスタイルシートを使おう。
<H1> や<P> など、前後に改行を入れて表場合は、「margin-left」のように、各プロパテ示されるタグには、「margin」（周囲との余ィーに「-left」、「-right」、「-top」、「-bottom」

白 ）、「 b o r d e r - w i d t h 」（ 枠 線 の太 さ）、を付けて指定する。枠線の場合は、「border-「padding」（枠線から内容までの余白）とい

left-width」のようにする。

注意点

う「ボックス・プロパティー」が用意されていさらに、「background」で背景色を付けたる（下の図を参照）。こうしたプロパティーにり、「border-color」で枠線に色を付けたりす

時に「border-style: solid;」も指定する。

ピクセルやポイント、またはパーセントで数値れば、背景や枠線のためにわざわざ<TABLE>●IE 3でも効果があるのは、「margin-left」、

を指定すれば、周囲に余白が空いたり、枠線を使う必要がなくなり、正しいHTML のまま「margin-right」、「margin-bottom」のが付いたりする。4 つの数値をスペースで区切

で自由なデザインが可能だ。

み。

●枠線を表示させるには、太さの指定と同<CENTER>P{ margin-left: 10%; margin-right: 10%; padding:<TABLE BORDER=2 BORDERCOLOR="red"8px; border-style: solid; border-width: 2; border-

BGCOLOR=" #FFFACD" WIDTH="80%"><TR><TD><P></TD></TR></TABLE>

margincolor: red; background: #FFFACD; }ホームページ作 成 ソフトの… …
ホームページ作成ソフトの…… </P>

margin-top

border-width

そのほかの枠線の使い方

border-top-width

枠線のスタイルは、「border」でまとめて指定できる。

padding

padding-top
border-style: solid; border-width: 2px;

marginleft

paddingleft

paddingrightborderleftwidthborderrightwidth

marginrightborder-color: red;↓border: solid 2px red;
また、IE 4 では、「border-color」で枠線の色を上下左右別々に

padding-bottom指定できる。

border-bottom-widthborder-color: red blue green yellow;

margin-bottom

太さを指定するときと同じく、順に上、右、下、左の色になる。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1998/11297

実践スタイルシート 5

表組みを使わずにレイアウト<TABLE>DIV { position: absolute; }<TABLE> タグはナビゲーター1.1 で登場しでページの左からの位置と上からの位置を指定

ビゲーション用のリンクを、右に本文を置いた

たが、当初は純粋に「表」を作るために使わする。
「width」プロパティーと「height」プ

ありがちなデザインのページだ。現在こうしたれていた。やがて「段組み」のために使われる

ロパティーを指定すれば、横と縦の長さも指定

ページは<TABLE> で作られているが、これかようになり、現在ではページ全体のレイアウト

できる。HTML の中で配置したい部分を<DIV

らはスタイルシートで置き換えることを検討すに使わるようになってしまった。現在のHTML

CLASS="left"> 〜 </DIV> で囲えば、指定しるべきだろう。

の「構造」と「見栄え」の混乱を代表するタ

た位置に表示されるようになる。
サンプルは、ポジショニングを使って左にナグと言える。

もちろんスタイルシートをサポートしていな
いブラウザーでは位置の指定は反映されないが、上から順番に表示されるだけなので、意

CSS2 では、文字や画像の位置を自由に指味も表示も問題のないHTML になる。

定するための「ポジショニング」が用意され、<TABLE> タグを使わなくても、柔軟なページ
デザインができるようになった。すでにIE 4 とナビゲーター4 にも実装されている。ナビゲー

注意点

ター4の独自タグ<LAYER>でも位置を指定できるが、IE 4 でも使えるスタイルシートを利用するほうがよいだろう。
ポジショニングを使うには、<DIV>などにク●IE 3 では、ポジショニングは使えない。

ラス名を付け（サンプルでは「DIV.left」な●ナビゲーター4 で「position」を指定し

ど）、「position: absolute;」を指定する。次た場合、ウィンドウをリサイズするとスに「left」プロパティーと「top」プロパティー

タイルが崩れることが多い。

<TABLE CELLPADDING=8><TR>

DIV.left { position: absolute; left: 0; top: 0; width: 130px;<TD WIDTH=130 BGCOLOR=" #FFD000">

padding: 8px; border: solid 4px #FF8000;<A HREF="……">Home</A>…… </TD>

background: #FFD000; font-weight: bold; }<TD BGCOLOR="#FFF8CD"><H1>position</H1>……
</TD></TR></TABLE>

DIV.right { position: absolute; left: 130px; top: 0px;
background: #FFF8CD; padding: 8px; }<DIV class="left"><A HREF="……">Home</A>……
</DIV><DIV class="right"><H1>position</H1>…… </DIV>

ブラウザーごとにスタイルシートを切り替える
スタイルシートを使う際に悩まされるのが、文字で場合分けをして、<LINK> タグの文字

以下のソースを<HEAD>〜</HEAD>タグ

ブラウザーの違いによって、画面の表示が大列（以下のソースでは「tag」）を組み立てる。

に入れて、「ie4.css」、「nn4.css」、「ie3.css」、

きく乱れる場合があることだ。特にスタイル

でき上がったタグを「document.write」で「other.css」の4 つのCSS ファイルを用意しシートの一部しかサポートしていないIE 3 や、HTML に書き込むだけだ。

てみよう。

スタイルシートの実装がやや弱いナビゲーター<SCRIPT>var ua = navigator.userAgent;
var tag = '<LINK REL="stylesheet" TYPE="text/css" HREF="';if(ua.indexOf("MSIE 4") >= 0) tag += 'ie4.css';
else if(ua.indexOf("Mozilla/4") >= 0) tag += 'nn4.css';
else if(ua.indexOf("MSIE 3") >= 0) tag += 'ie3.css';
else tag += 'other.css';
tag += '">';
document.write(tag);</SCRIPT>

4 が問題になる。
そこで、スタイルシートを複数用意して、ブラウザーによって切り替えるテクニックを紹介しよう。スクリプトを使ってブラウザーの種類を判別し、<LINK> タグ内のCSSファイルの名前を自動的に変えればよい。ブラウザー
を表す「navigator.userAgent」に含まれる

298 INTERNET magazine 1998/11

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

実践スタイルシート 6

さらに高度なレイアウトに挑戦
width
top

left
top

前のページで紹介したポジショニングは、ペける。「 p o s i t i o n :ージ全体の中での位置を指定する方法だ。ポrelative;」を指定し、ジショニングをさらに応用して、右の図のよう「width」プロパティー

heightleftに特定の親ブロックの中で子の位置を指定し、と「height」プロパテ

親ブロックの前後では文字が普通に流れるよィーで横と縦の長さをうにすれば、イメージマップのような表現にな指定しておく。これで、る。これはIE 4でしかうまくいかないが、将来<DIV>タグはほかの文を見すえたページ作成をするなら、一度トライと並んで上から順に表示されるが、その内部

次に、子になる<DIV> タグには「link1」なしておくのもいいだろう。

では文字や画像を自由に配置できるようにな

どのクラス名を付けてスタイルを作る。子の場

まず、親ブロックとなる<DIV>タグのスタイルを作り、クラス名（ここでは「map」）を付る。<DIV> タグの背景に画像や色を指定して合は、「position: absolute;」とし、「left」プも面白い。

ロパティーと「top」プロパティーで位置を指定する。こうして①のスタイルシートができる。

1

DIV.map { position: relative; width:320; height: 240;
background: #FFA500; font-weight: bold;
font-size: 20pt; font-family: Verdana; }DIV.link1 { position: absolute; left: 150; top: 20; }HTML では、②のように親の<DIV> タグの
中に子の<DIV> タグを書けば、親ブロックの内部に子が配置されたデザインができ上がる。
子の<DIV> タグ内に画像を置いてもいいが、ここでは簡単にテキストのみとした。

DIV.link2 { position: absolute; left: 20; top: 65; }スタイルシートをサポートしていないブラウ

DIV.link3 { position: absolute; left: 120; top: 120; }ザーでは、<DIV> タグの内容は順に並べられDIV.link4 { position: absolute; left: 65; top: 180; }て普通のHTMLになる。イメージマップを作らなくても自由な配置ができ、しかもマップをサ
ポートしないブラウザーのためにリンクを別に

2<DIV CLASS=”map”>

作ったりしなくてもすむわけだ。残念ながら、<DIV CLASS=”link1”><A HREF=”1.html”>HTML 4.0</A></DIV>

ナビゲーター4 ではこのサンプルは表示が崩れ<DIV CLASS=”link2”><A HREF=”2.html”>Style Sheet</A></DIV>て正しく表示されなかった。

<DIV CLASS=”link3”><A HREF="3.html”>JavaScript</A></DIV><DIV CLASS=”link4”><A HREF=”4.html”>Tips &amp; Tricks</A></DIV></DIV>

IE4 オレンジ色のの親の<DIV> タグの中に子の<DIV>タグが正しく配置される。

「position」プロパティーを組み合わせた自由な配置がナビゲーターでもサポートされるよ
うになれば、ホームページは完全にスタイルシート化できるようになるだろう。

ナビゲーター4 「position」プロパティーを複雑に組み合わせると表示が乱れる。残念。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

ナビゲーター3 スタイルシートをサポートしていないが、正しいHTMLの表示になる。

INTERNET magazine 1998/11

299

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバー
アーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ
番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.