to top

[ page down ] [ Club ]


テキスト「行間」に関するメモ


この文書は、PC-VAN の SIG「ことばと翻訳」の
フォーラム「文学の森」に掲載したメッセージをもとに
改稿したものです。(一部の半角記号等を全角に変更)

98/11/14 

　特別なツールを使って、縦書き表示したり、書物の頁ふう表示する
　場合はともかく、いまの多くの Web Page ( home page ) では、
　「詩」作品を、横書きの行間無しで表示しています。

　が、紙版の出版による詩誌や詩集では、作品の行間を全角またはそれ以上とっています。
　( 全集本や文庫など、作品数の多い場合は、行間が全角より狭いこともありますが、
　　3/4 はともかく、1/2 = 半角だとたいへん詰まった感じになります )

　で、POETICA IPSENON では、現在、36 人の、588 篇＋25首 の作品を
　収めていて、これまで、「行間無し」だったのを、
　全角アキの行間を先日、つけました。
　( つまり、1 行ずつのアキを入れたのです。 )

　スタイルシートでもできますが、とりあえず簡単に、
　<BR>要素(エレメント/タグ)の挿入で全角アキにしたのですが、
　IE 4.01 では、全角よりやや広く見えてしまいます。

　で、エッセイやコラムや雑記等の Page は、行間無しのままでしたが、
　こちらは、スタイルシートの 1行の記述を付けることで、
　1/4 = 四分アキ 程度の行間をとることにしました。
　( スタイルシートに対応していないブラウザの場合は、
　　なんの変化もなく、いちおう行間無しのまま表示されます )

　で、それは、たとえば、BODY要素の開始タグで、
　<BODY BGCOLOR="#FFFFFF" TEXT="#000000">となっていた場合、

　<BODY STYLE="line-height:125%" BGCOLOR="#FFFFFF" TEXT="#000000">と
　するだけです。

　「125%」のところを、「200%」にすると、全角(1行分)アキになります。
　つまり、150% なら、半角アキ、125% で 四分アキ。
　文章によっては、110% または、115% にしています。
　IE 4.01 ですと、180% ぐらいが、全角アキらしくみえるようです。
　( フォントの大きさを「小」にしている場合。)

　style="line-height:125%" を書き加える(貼り付ける)だけですが、
　POETICA IPSENON は、全部で、160 ページ近く、
　詩のページを除いて、数十ページに、貼り付けるのには、
　くたびれます。これから、ますますページのふえることを思うと、
　何百ページをも扱えて、一括置換できるようなエディタが欲しいものです。
　( ま、それ専用のユーティリティプログラムを作ればいいのでせうけど )
98/11/16 

　style="line-height:120%" ですが、
　ちと、NN4.0 (ネットスケープ・ナビゲータ)で
　ためしに、ローカルで表示してみたところ、
　画像があった場合、その画像部分の表示がずれて
　画像同士や、文字テキスト部分にかぶったりします。
　ソースの他の記述部分に何か問題あるのかもしれませんが、
　( IE 4.01 ではきれいに表示しますが、)
　とにかく、NN4.0 では使えないようです。
　もっとも NC (ネットスケープコミュニケーター)では
　どうだかわかりませんが。
98/11/16 

　ふつうのスタイルシートでの行間指定は、
　<HEAD> 〜 </HEAD> 間に、

　 <STYLE TYPE="text/css">
　 <!--
　 .on{line-height:120%}
　 -->
　 </STYLE>

　のように設定します。
　で、指定( この例では、120% )の行間をとりたい箇所に
　なると、たとえば、

　<blockquote class="on">
　　　↓
　　この箇所に指定の行間がはいる
　　　↑
　</blockquote>

　と、します。

　 blockquote 以外の他のタグでも class="on" が
　 効きますが(font, td, big など)、
　 ブラウザやタグによっては効かない場合があります。

　 また、Mac版 IE 3.0x では表示の崩れることもあるそうです。
　 この場合、フォントサイズも設定すると崩れないことが
　 あるそうです。たとえば、

　 <STYLE TYPE="text/css">
　 <!--
　 .on{
　　　 line-height:120%;
　　　 font-size:small
　　　 }
　 -->
　 </STYLE>

　 のようです。フォントサイズは、
　 xx-large, x-large, large, medium, small, x-small, xx-smallなど。(大→小)

　HEAD の、.on{line-height:120%} の記述を
　BLOCKQUOTE{line-height:120%}　とすると、
　すべての <BLOCKQUOTE> 〜 </BLOCKQUOTE> 内で
　指定の行間がはいります。

　 複数設定する場合は、.on を、たとえば
　 .plus1, .plus2, .plus3 などとして、

　 .plus1{line-height:150%}
　 .plus2{line-height:180%}
　 .plus3{line-height:200%}

　 のように複数設定して、
　 class="plus1" のように個別に指定するわけです。

　　詳しくは下記ページを参照くださいまし。

　　参考文書：『行間に青空を見たること』−「スタイルシート方式」
　　http://plaza14.mbn.or.jp/~rooms/basement/gyoukan.html
98/11/17 

　HEAD要素の、META要素と <TITLE>の間に、

　　<STYLE TYPE="text/css">
　　<!--
　　.on{line-height:125%;font-size:small}
　　-->
　　</STYLE>

　と font-size も設定して行間設定しておくと、
　NN 4.0 ではうまく表示されますが、

　やはり、font-size の設定をしていないと、
　NN 4.0 では行間無しのままになります。(IE 4.01では問題無し。)

　( この場合、当該ページのほとんどを占める、主になる部分の
　　font size が一定なので、その FONT開始タグで、
　　　<font size=3 class="on" color="#000000">
　　とクラス指定してみました。)

　css は、W3C 定義のスタイルシート[ Cascading Style Sheets(level 1) ]で、
　IE 3.0以降、NN 4.0 以降がその機能をサポートしていることには
　なっていますが、どちらも完全サポートでなく、問題もかなりあるようです。

　( また、JavaScript によるスタイルシート[ JavaScript Style Sheets ]の
　場合は、TYPE属性で、TYPE="text/javascript" と指定します。)

　　<style type="text/css">
　　<!--
　　blockquote{line-height:1.5}
　　-->
　　</style>

　IE 3.0 では、この「1.5」倍という指定方法が効きませんので、
　やはり、「150%」というような 「%」による行間指定がよいようです。

　HEAD要素であらかじめスタイル定義をしないで、
　既出の BODY要素での指定例のように、
　blockquote など任意のタグに直接、STYLE属性を記述指定できます。

　　<blockquote style="line-height:150%">
　　　:
　　　:
　　　:
　　</blockquote>

　この場合、NN 4.0 など他のブラウザや Mac での念入りな
　チェックがやはり必要でせう。

　P要素でもスタイルを指定できます。CLASS属性での指定例を
　挙げますと、

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
　　<html>
　　<head>
　　<META 〜 >
　　<title> 〜〜 </title>
　　<style type="text/css">
　　<!--
　　.iro1{color:green}
　　-->
　　</style>
　　</head>
　　<body>
　　<p class="iro1">
　　　:
　　　:　　　/* このP要素内の色は"green"になります。 */
　　　:　　　/* iro2, iro3,...と複数定義しておくと使い分けられます。*/
　　</p>
　　</body>
　　</html>

　色の指定方法は、色名の他に 16進(#000000等)や RGB等種々あります。
　また、フォントサイズの場合も、large, small の他に、
　インチ、センチ、ミリ、ポイント、パイカ等の絶対指定と
　フォントの高さ、文字xの高さ、ピクセル、パーセント等の
　相対的指定などさまざまあります。
　( 無論、<p>の他、<div>や<span>,<h>タグ等種々のタグでも使用可能。)

　スタイルシートでは、テキストに関して、
　行間、文字サイズ、文字色等の指定の他に、
　center等の位置指定、左右のマージン指定、斜体等文字修飾、境界線、
　背景色指定、インデント、透明・半透明・ぼかし・影・色や上下の反転・
　波掛け等のさまざまなフィルター指定、範囲指定の中の部分範囲指定、
　画像回りの指定、等々、等々、たいていのことが可能になっています。

　　参考文書：「とほほのスタイルシート入門」(リファレンス)
　　　　　　　http://wakusei.cplaza.ne.jp/twn/wwwcss2.htm
　　　　　　　( 別頁に「概要」解説もあります。)

　　　　　　　「ZSPC氏の『Cascading Style Sheets -解説編-」
　　　　　　　http://www.zspc.com/stylesheets/css/index.html
　　　　　　　( 別頁に「リファレンス」もあります)
98/11/17 

　すでに紹介しました SITE「行間に青空を見たること」から、
　注意すべき点を挙げますと、

　1) NC 4.0x では、<TABLE>, <TR> など一部のタグで、
　　 スタイルシートが適用されない。

　　 <TD> では適用されるが、直接の指定( つまり、
　　 <td style="〜"> のような STYLE属性によるもの )は
　　 無効にされる場合があります。

　2) NC 4.0x では、<BODY>も「危険」。「さまざまな場面で
　　 スタイルシートの適用が取り消される」とのこと。
　　 ( たしかに、NN 4.0 で、画像の入っている場合に
　　　 表示が乱れたのはすでに報告した通りです。)

　3) NC 4.0x では、フォントサイズは「可」ですが、フォントフェースの
　　 指定は不可。<font face="ＭＳ　Ｐ明朝">のように、別途指定する
　　 ようにします。

　4) Mac版 IE 3.0x では、行間指定と共にフォントサイズも一緒に
　　 指定しないと、表示が乱れることがある。

　　 しかし、スタイルシート適用の範囲内で、複数の <font>で、
　　 フォントサイズを変更しているような頁では、表示がおかしく
　　 ならないように、あらかじめ <style>で、複数の設定をしておいて
　　 使い分ける必要があります。
　　 ( スタイルシート適用範囲外でサイズ変更する場合は問題無し )

　　　 <html>
　　　 <head>
　　　 <meta 〜>
　　　 <title> 〜 </title>
　　　 <style type="text/css">
　　　 <!--
　　　 .test1{line-height:110%;font-size:x-small}
　　　 .test2{line-height:120%;font-size:small}
　　　 .test3{line-height:120%;font-size:medium}
　　　 .test4{line-height:150%;font-size:small}
　　　 .test5{line-height:150%;font-size:medium}
　　　 .test6{line-height:180%;font-size:small}
　　　 .test7{line-height:180%;font-size:medium}
　　　 .test8{line-height:220%;font-size:x-large}
　　　 -->
　　　 </style>
　　　 </head>
　　　 <body bgcolor="#ffffff" text="#000000">
　　　　 :
　　　　 : (以下略)

　　 のように、その頁で必要なサイズ／行間を複数設定しておいて、
　　 class="test1" とか、class="test7" のように使用すればよいことに
　　 なります。

　　　 <span class="test8"> 〜 </span>
　　　 <div class="test2"> 〜〜 </div>
　　　 <p class="test3"> 〜 </p>
　　　 <blockquote class="test4"> 〜〜 </blockquote>
　　　 <td class="test1"> 〜 </td>
　　　 等々。
98/11/18 

　拓也さんとこ(『おもしろ文学館』)の、「週刊エッセイ」の
　頁(「小さな旅」)を拝見してきましたけど、
　BODY開始タグに仕込んだ style="LINE-HEIGHT:200%" が
　こちらの IE 4.01 では効いていませんでした。
　文章が table に入っているせいかも。
　( <TD> で指定するのがよいかもしれませんが、その場合は、
　　前述のように、STYLE属性ではなく CLASS属性がよいでせう。)

　Mac+IE 3.0x ユーザーは非常に少ないので
　切り捨てるという考え方もあるでせうが、
　いちおう読者対象としますと、

　結局は、HEAD要素で、行間と FONT-SIZE を設定しておいて、

　＋―――――――――――――――＋
　｜　　　　　　　　　　　　　　　｜
　｜　　　　　　　　　　　　　　　｜
　｜　＋―――――――――――＋　｜
　｜　｜ 文章(A)　　　　　　　｜　｜
　｜　｜　　　　　　　　　　　｜　｜
　｜　｜　 文字サイズに変更　 ｜　｜
　｜　｜　 の無いブロック　　 ｜　｜
　｜　｜　　　　　　　　　　　｜　｜
　｜　＋―――――――――――＋　｜
　｜　　　　　　　　　　　　　　　｜
　｜　　　　　　　　　　　　　　　｜
　｜　＋―――――――――――＋　｜
　｜　｜ 文章(B)　　　　　　　｜　｜
　｜　｜　　　　　　　　　　　｜　｜
　｜　｜　 文字サイズに変更　 ｜　｜
　｜　｜　 の無いブロック　　 ｜　｜
　｜　｜　　　　　　　　　　　｜　｜
　｜　＋―――――――――――＋　｜
　｜　　　　　　　　　　　　　　　｜
　｜　　　　　　　　　　　　　　　｜
　｜　＋―――――――――――＋　｜
　｜　｜ 文章(C)　　　　　　　｜　｜
　｜　｜　　　　　　　　　　　｜　｜
　｜　｜　 文字サイズに変更　 ｜　｜
　｜　｜　 の無いブロック　　 ｜　｜
　｜　｜　　　　　　　　　　　｜　｜
　｜　＋―――――――――――＋　｜
　｜　　　　　　　　　　　　　　　｜
　｜　　　　　　　　　　　　　　　｜
　＋―――――――――――――――＋

　たとえば、上記頁のように、文字サイズに変更の無いまとまった
　範囲ごとに、その範囲をひとくくりにできるタグに、
　CLASS属性 (ID属性による指定方法もある) で
　指定していくのがもっとも無難なようです。

　文章のまとまりそれぞれに、たとえば、文章(A),(B),(C)ごとに
　文字サイズが異なる場合は、その 3通りの STYLE設定を
　HEAD要素でしておくことになるでせう。

　　参考紹介：SITE『おもしろ文学館』は、SIGOP　司馬拓也さんが
　　運営なさっている Web Page です。
　　　( http://www2j.biglobe.ne.jp/~takuya/ )
98/11/19 

　わたしの場合、IE 4.01 でフォントを「小」に設定しているのですが、
　small を x-small にすると IE で、SIZE=3 ぐらいになるかもしれません。

　拓也さんの「週刊エッセイ」の今度の「行間」指定は
　きれいに行間がとれていますが、ちと、気になるのは、
　<H>タグが STYLE適用範囲内に入っていることです。

　この<H>要素のところが、他のブラウザで乱れるもとに
　なるかもしれません。

　　で、一案ですが、

　　<TABLE BORDER="0" CELLPADDING="5" CELLSPACING="0" WIDTH="500">
　　<TR><TD BGCOLOR="#D5FAFF" CLASS="test4">
　　<CENTER><H2>小さな旅</H2></CENTER>
　　<P ALIGN="justify">

　　となさっているところを、たとえば、

　　<TABLE BORDER="0" CELLPADDING="5" CELLSPACING="0" WIDTH="500">
　　<TR><TD BGCOLOR="#D5FAFF">
　　<CENTER><H2>小さな旅</H2></CENTER>
　　</TD></TR></TABLE>
　　<TABLE BORDER="0" CELLPADDING="5" CELLSPACING="0" WIDTH="500">
　　<TR><TD BGCOLOR="#D5FAFF" CLASS="test4">
　　<P ALIGN="justify">

　　のように、<H2>〜</H2>のところを STYLE適用範囲の外に出して
　　しまうほうが無難なように思います。

　　こうすれば、表題の「小さな旅」の背景色・幅も変えられるし。
　　TABLEとTABLEの間にスペースの入るレイアウトになるけど…。(^^;)

　しかし、スタイルシートを活用しようと思えば、
　これまでのソースをかなり変更しなくてはいけないし、
　レイアウト変更を余儀なくされる場面も出てくるし、
　フレームのように、非対応ブラウザ用のページも用意する必要も
　生じるかもしれないし。便利だけど、いまのところは面倒。(^^;)
98/11/19 

　IPSENON の、総目次(Table of Contents)の頁のことですが、
　HEADで、行間とフォントサイズを STYLE定義しておいて、
　( .on{line-height:125%;font-size:small}　)

　本文(BODY)を次のようにしてみました。
　( <body> では bgcolor,text,link等の属性の他に leftmargin="10"を指定 )

　1) ページリンク・ブロック

　　<font size ... color ...>
　　<a href ...> 〜 </a>
　　<a href ...> 〜 </a>
　　　:
　　</font>

　2) ページタイトル ( <h1> で大きいフォントサイズを使用 )

　　<h1 align="center"><font color...> 〜 </font></h1>

　3) リスト・ブロック (このブロックが STYLE適用範囲)

　　 <div class="on">　　　　　 /* <div>で STYLEの class指定 */
　　 <dl>
　　 <dt> 〜 </dt>
　　 <dd> 〜 </dd>
　　　　　:
　　　 <dl>
　　　 <dt> 〜 </dt>
　　　 <dd> 〜 </dd>
　　　　　　:
　　　　　<dl>
　　　　　<dt> 〜 </dt>　　　　　/* dl のネストしています */
　　　　　<dd> 〜 </dd>
　　　　　　　 :
　　　　　</dl>
　　　 </dl>
　　 </dl>
　　</div>　　　　　　　　　　　 /* STYLE適用終り */

　4) ページリンク・ブロック

　　<font size ... color ...>
　　<a href ...> 〜 </a>
　　<a href ...> 〜 </a>
　　　:
　　</font>
　</body>

　と、こんなふうに <div class="on"> 〜 </div> を使っています。
　( <div class="〜"> のサポートは、IE3.0, NN4.0 以降です )

　実は、STYLE適用範囲内の、最初の <dt> 〜 </dt>中に、
　height="12"(高さ12ピクセル) の画像(img)をひとつ含んでいます。
　が、IE 4.01 と NN 4.0 (製品バージョン 4.04) とでは、
　STYLEの、small 指定との衝突はないようです。( IE 3.0x では未確認 )

　ところで、<dt> 〜 </dt> の行頭に width=5 height=5 の画像(img)を
　入れてあるのですが、

　　<dt><img src="abc.gif" align="middle" ....> ＡＢＣ </dt>

　とした場合、IE4.01 では、フォントサイズより小さい画像の中央が
　フォント「Ａ」の中央ラインに揃いますが、NN 4.0 では、画像が
　フォントのボトムラインのほうにさがってしまうのです。
　( NN では 画像の中央とフォントの中央とが揃わないということです )

　で、"middle" を、"absmiddle" にしてもだめで、

　　<dt>　<img src="abc.gif" align="absmiddle" ... > ＡＢＣ </dt>

　と、<dt> と <img ...> の間にスペースを入れるとうまくいきました。
　どうも、これは、<td> 等でも同様らしいです。( IE 3.0x では未確認。)
　( HTML 2.0〜4.0 では、absmiddle が定義されていないようですが、
　　ブラウザでは、IE 2.0、NN 2.0 以降 サポートされているようです。)
　結局 インラインの img の左右にスペースが必要らしく、
　これがわかるのにずいぶん手間どってしまいました。

　「HTML」の参考書ももたず、半知半解にも至らずの思案しいしい
　Windows95 付属の NOTEPAD(メモ帳)に、せっせと手入力してますので、
　やたらと時間をくってしまいがちです。
　( NOTEPAD で編集できないページ容量になるとページを分割します )

　同人誌の場合でもそうですが、編集作業に時間をとられすぎると
　なかなか執筆・創作に時間がさけず、「レイアウトはきれいだが、
　内容が薄い」などという貧相なことになりかねません。(^^;)

　こんなわけで(?)スタイルシートやダイナミックHTML ともなると、
　あちこちの SITE の解説や情報が頼りですが、STYLEのフィルター機能も
　IE だけですから、本格的なページデザインはもう少し先のことでせう。
　( 先日、NC の新バージョンが出たらしいけど... )
98/11/19 

　HTML 作成でも、</font> を忘れているところが
　あちこちにあって(今もあります)、
　なんか文字サイズがおかしいなと気づいたら、たいてい
　</font> です。(^^;)

　　Windows自体でのサイズ設定と、ブラウザでの設定と、
　　閲覧の都度の設定と、見ている Page テキスト自体での指定と...
　　こちゃらこちゃら、ややこしい。
98/11/20 

　さて、STYLE で また一つ、問題というか疑問が出てきました。

　HEAD で、「.on{line-height:125%;font-size:small}」と
　STYLE定義して BODY要素(本文)で、

　　<div class="on">
　　<font size=3 color="black">
　　　 :
　　　 :
　　</font>
　　</div>

　などとしている場合ですが、

　ブラウザでのフォント選択で、
　( IE 4.0 なら
　　[表示(V)] → [フォント(N)] → [最大(G)][大(L)][中(M)][小(S)][最小(A)] )
　サイズを [小(S)]に指定している分には、特に問題ないのですが、
　[中(M)]以上、[大(L)]などを選択すると、
　行間が詰まり、上下の行の文字が重なってきたりします。
　( わたしは、ふだん[小(S)]にしてあります )

　そこで、STYLE定義で、font-size を、medium にしておくと、
　[大(L)]でも多少の行間をとりますが、
　[小(S)]にしたときに、行間が全角に近づき、広くなり過ぎます。

　つまり、
　xx-large, x-large, large, medium, small, x-small, xx-small
　は、絶対値なわけで、どうも、行間設定の
　125% や 150%, 200% というのも、その値を基準に fixしているようです。

　しかし、STYLE適用範囲内で、1箇所といえど、
　<font size=3> と指定していることに原因があるのかもしれません。
　( この場合、これを適用範囲外にもっていけば改善されるかも。)

　　｜ 行間(line-height) と font-sizeとを一緒に STYLE定義しているのは、
　　｜ 「Mac版 IE 3.0x」対策のためですから、
　　｜ ( line-height定義だけだと Mac+IE3.0 で表示がめちゃくちゃになる
　　｜ 場合があるというため )
　　｜ この対策をやめてしまえば、line-height定義だけですみ、
　　｜ ややこしい font-size の問題に悩まずにすむといいます。

　あるいは、large, medium, small 等で指定しないで、

　　font-size:1.2ex　　 /*　文字x の高さ　　*/
　　font-size:1.2em　　 /*　フォントの高さ　*/

　などの相対値でサイズを指定すればよいのかもしれません、
　「.on{line-height:150%;font-size:1.2em} 」という具合に。

　いちばん、すっきりするのは、曖昧でトラブル発生の多々ある
　style定義で「行間」を作ることをやめることですが。(^^;)

　( SITE「行間に青空を見たること」では、
　　スタイルシート以外の行間作成方法も幾つか紹介されています。
　　わたしも、小さな透明GIF画像で「行間」を作ったり

　　　</font>
　　　<font size="1">　</font><br>　　← この行が「行間」に相当する
 　　　　　　　　　　↑ここに全角スペース(無くてもよいが有った方がよい)
　　　<font size="3">　　　 ← 確実に元のフォントサイズに戻す
　　　　　　　　　　　　　　　　　 ("-2","+2"等でも調整できる)
　　という方法を使うことがあります。)
98/11/20 

　現在、STYLE定義による「行間」設定は

　　.on{line-height:150%;
　　　　font-size:16px
　　　 }

　という、px (ピクセル)でのサイズ長指定の場合を
　試しています。
　( この他、1.2emや 2.2ex 等も試しています )

　　125%, 135%, 150%
　　10px, 12px, 16px

　等のいろいろの組み合わせでテストしていますが、

　同じ 135% - 15px の設定でも、

　 (a) どのタグに class属性で指定するか、

　 (b) 適用対象のテキストが、
　　　 どのタグでくくられているか、

　で、表示のされ方がたいへん異なるということです。

　ブラウザでの、フォントサイズ選択で、
　(a)(b)の違いで、同じ[中]でも文字の大きさが異なったりします!

　ブラウザでフォントサイズを、
　たとえば、[小]から[大]に変えた場合、
　STYLE適用範囲外のテキストは文字が大きくなっても、
　適用範囲内の部分が [小]の時のままということもあります。

　しかし、これら(↑)も IE や NN (NC) のバージョンに
　よって、表われ方が異なることもあると考えられます。
　( em と ex をとり違えているバージョンもあるという )
98/11/21 

  SITE の多くの頁で、たとえば、
  <H1> 〜 </H1> では、文字色、ボールドかイタリックか..、背景色は...、
　その他、いろいろと指定するスタイルが共通していれば、
  それを別定義ファイル( テキスト形式、拡張子は、.css )にまとめておいて、
  当該頁の、head に その定義ファイルとのリンクを張っておけば、
  どこか変更する際に、定義ファイルの該当部分だけを書き変えれば、
  リンクしてあるすべての頁で変更が効くわけです。

  同じようなデザイン、レイアウト、文字修飾を
  しているような頁の多い SITE では便利でせう。

  　利用しているさまざまなタグごとに細かくスタイルを決めて
    それを定義ファイルにするわけですが、
    たとえば、<LI> でも、１種類のスタイルシート定義だけではなく
    何種類かある場合に、複数の定義ファイルにして、
    リンク指定を使い分けることもできます。

      <html>
      <head>
      <title> 〜 </title>
      <LINK REL=stylesheet TYPE="text/css"
       HREF="http://www2s.small.ne.jp/~poem/xxx.css"
　　　 TITLE="XXX">
      </head>
      <body 〜 >
        :

　　というように定義ファイル (例では、xxx.css ) にリンクします。

    各ページ別々に、１段１節、また１行１単語ごとに、
    こまかな、多彩多様なスタイル／修飾をつけ分けている場合は
    それらになるべく共通する定義を別ファイルにして、
    非共通的なものは、そのつど、そのページの、
    head で設定するか、当該タグで設定することになるでせう。

  既掲の「とほほのスタイルシート入門」によれば、
  NN と IE とでは次のような相違点があるといいます。

    1) NN では BODY属性がテーブルに継承されない
      BODY{color:red}
      とスタイルシート設定をした場合、
      IE では、BODY開始タグで、
      <body text="red" 〜 >
      としたのと同様の動作をしますが、NN では
      テーブル( <table> 〜 </table> ) の中身が変化しません。
      従って、
      BODY,TH,TD{color:red}
      というように指定するほうがよいとのこと。

    2) IE 4.0 のみがサポートしているフィルタを使用すると、
      NN では表示がめちゅくちゃになることがある

    3) よく使う、P要素の定義で、
      P{margin-left:30; margin-right:30}
      などの設定 (左右のマージンを指定している) を、
      IE 3.0 で表示すると、上下の間隔がおかしくなる

    4) フォントサイズの単位に相違がある
      NN では、px 以外、すべて
      「ブラウザで指定したフォントサイズに依存」し、
      IE では、すべてのフォントが
      「ブラウザのフォントサイズに依存しない」という。

　これでは、「細かなレイアウト」をしようとして、かえって
　乱雑にしているみたいなもので、
　いまは、スタイルシートのごくごく一部を限定使用するにとどめる
  という段階でしかないでせう。
[ Club ] [ page up ]

[ 戻る ( IE3.02以降 ) ]



count