WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:外部スタイルシート

内山典男 [WriteDate : Thu Jun 7 02:32:07 2001]

はじめまして、内山典男と申します。
2ヶ月程前からホームページを作成してる者です。
過去ログなども見たのですが、同じ質問がなく断念してこちらに参りました。外部スタイルシートとして利用したいのですが、これだと文字が中央になりません。大変初歩的な質問で申し訳ないのですが、御指導よろしくお願いいたします。

BODY{background-color:BLACK;
   text-align:center;
   color:WHITE;}


カヅサツ [MAIL] [URL] [WriteDate : Thu Jun 7 10:00:47 2001]

> これだと文字が中央になりません。

> BODY{
> background-color: BLACK;
> text-align: center;
> color: WHITE;
> }

外部スタイルシートというより、他の問題かもしれません。
background-color と color は適用されるけれど、
text-align は適用されないということでよろしいですか?

text-align は継承される要素なのですが、
Windows MSIE や、 strict な DOCTYPE 宣言をしていない Netscape 6
/ Mozilla browser では TH, TD 要素に継承されないといった不具合があります。
これらの UA で、

/* CSS */
BODY{
background-color: BLACK;
text-align: center;
color: WHITE;
}
table{
width: 100%;
}

<!-- HTML -->
<body>
<h1>大見出し</h1>
<p>段落</p>
<table summary="test table" border="1" cellpadding="1" cellspacing="0">
<tr><td>セル</td><td>セル</td></tr>
</table>
</body>

を確認すると、大見出しと段落は中央よせになりますが、
セルは中央よせにならないと思います。

ちなみに text-align 以外でも、確認した範囲では
font-size, font-style, font-weight, line-height などなどがありますので、
table を利用して Win MSIE などで確認される時は注意してください。


カヅサツ [MAIL] [URL] [WriteDate : Thu Jun 7 10:02:41 2001]

誤解を招くかな。

> を確認すると、大見出しと段落は中央よせになりますが、
> セルは中央よせにならないと思います。

を確認すると、大見出しと段落の内容は中央よせになりますが、
セルの内容は中央よせにならないと思います。


内山典男 [WriteDate : Thu Jun 7 19:58:54 2001]

早速の御指導ありがとうございます。

> background-color と color は適用されるけれど、
> text-align は適用されないということでよろしいですか?

すみません。もう一度確認したら全てが適用されてません。
(外部スタイルシートにすると)

> Windows MSIE や、 〜 TH, TD 要素に継承されない
> といった不具合があります。

Win ME / IE5.5 です。

> を確認すると、大見出しと段落の内容は中央よせになりますが、
> セルの内容は中央よせにならないと思います。

提示していただいた上記のソースをコピペしたところ、
本当にセルの内容だけが中央よせになりませんでした。
試しにfont-sizeなども変えてみましたが、
やはり変化がないようです。

不思議なことは、外部スタイルシートにする前、つまり
<STYLE TYPE="text/css">
<!-- ★ -->
</STYLE>
の時は、こんな事はなかったのですが・・・

今回、提示されたモノをページに直接適用させても
セル内は中央寄りになりませんでしたが、
今、外部ファイルの中にあるものを、
このようにして直接適用すると、きちんと表示されます。
(テーブル本体&セル内が中央寄り・文字のサイズ・色など)

外部スタイルシートにしてから、
テーブル全体も、<p>〜</p>としたテーブル外の部分なども
すべて左寄りになってます。
自分がした操作の中で、唯一今までと変えたのは外部スタイルシートに
したということだけなのですが。。。

> table を利用して Win MSIE などで確認される時は注意してください。

では上記のように、"直接適用すると表示される"ということであれば、
外部スタイルシートにしない方が良いということでしょうか?(^^;


カヅサツ [MAIL] [URL] [WriteDate : Thu Jun 7 22:18:40 2001]

> すみません。もう一度確認したら全てが適用されてません。
> (外部スタイルシートにすると)

ということは外部スタイルシートの読み込ませ方か、
あるいはパスの指定の仕方が間違っているとか思いますが、
URI は提示できますか?


内山典男 [WriteDate : Fri Jun 8 01:03:11 2001]

大変なミスを犯してしまいました。
CSSファイル名を間違ってました。本当にすみません(汗)

今は問題無く表示されてるようですが、
一応、URLの提示を求められた時の為に、テストページをupしてありますので見て下さい。
恥ずかしながら、レイアウトなどの部分はまだよく解らないので、
<BR>などを沢山使用しております。
ただ表示はこんな感じが希望なのです。

http://www15.u-page.so-net.ne.jp/fb4/nanachin/index.htm


カヅサツ [MAIL] [URL] [WriteDate : Fri Jun 8 10:44:25 2001]

ボクならこんなカンジにしますという例を挙げておきます。
要素のマークアップは適当です。例えば画像を中見出しとして使うのであれば、
H2 要素が妥当かもしれません。

<!-- html -->
<h1>テスト中</h1>
<p class="decoration"><img src="test.gif" width="300" height="200"
border="0" alt="テスト画像"></p>
<table summary="table1" class="table1" cellpadding="15"
cellspacing="4" border="0" align="center">
<col>
<col class="question">
<col class="answer">
<tbody>
 <tr class="1">
  <th>1</td>
  <td>質問1</td>
  <td>答え1</td>
 </tr>
 <tr class="2">
  <th>2</td>
  <td>質問2</td>
  <td>答え2</td>
 </tr>
</tbody>
</table>
<p><a href="">テキスト</a></p>
<ul class="link">
<li><a href="☆">リンク1</a></li>
<li><a href="☆">リンク2</a></li>
<li><a href="☆">リンク3</a></li>
</ul>

/* css */
body{
    text-align: center;
    font-size: small;
}
h1{
    font-size: 100%;
    font-weight: normal;
}
p.decoration{
    padding: 130px 0px;
    margin: 0px 0px 6em 0px;
}
table{
    font-size: small;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
col.question{
    width: 291px;
}
col.answer{
    width: 232px;
}
tr{
    color: inherit;
}
tr.1{
    background-color: #d2ffff;
}
tr.2{
    background-color: #b9b9ff;
}
table.table1 th{
    width: 58px;
    font-weight: normal;
}
table.table1 td{
    text-align: center;
}
ul.link{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
ul.link li{
    display: inline;
    padding: 0px 13%;
    width: 30%;
    margin: 0px;
}

ブラウザのバグや非対応フューチャーに配慮しないなら、
もう少し記述量を減らし、スマートにできます。
例えば table 要素の class 属性をなくし、

table[summary="table1"]{
}

というセレクタにするなどです。


内山典男 [WriteDate : Fri Jun 8 23:59:17 2001]

御丁寧にありがとうございます。参考になりました。
<col>、<ul>、<li>、classなどのタグは使用した事が無いので、
勉強不足だと痛感しております。

しかし、誠に恐縮ながら上記の記述をそのままコピペしたところ
エラーが出まして、勝手に構文エラーチェックに
修正されてしまうという事態が起きました。
修正された後のモノですと思った表示にはなりませんでした。

そういうこともあり、修正されない前のモノを確認したくて、
構文エラーチェックを外したところ、以下のような
メッセージが出てきました。
もちろん、この場合だと表示はほとんど思った通りになります。
*CSSファイルもHTMLも、提示された状態のままで自分では変更してません。

【構文エラー】
"タグ</td>の位置が無効です。開始タグ</td>が見つかりません。"
(↑番号の所らしいのです。2ヶ所)
http://www15.u-page.so-net.ne.jp/fb4/nanachin/test1.htm

結論として、こういう場合、表示さえされてればエラーは無視した方が
良いという事ですか?(^^;


内山典男 [WriteDate : Sat Jun 9 01:42:09 2001]

<th>となってた所を<td>に勝手ながら修正したところ、
エラーになりませんでした。表示もちゃんとされてます。
ただNN4.7で確認したところ、どちらでやっても思い通りの表示にはなりませんでした。
一般的には仕方のない事なのでしょうか。(^^;
何はともあれ、今回は勉強になりました。
カズサツ様、アドバイスどうもありがとうございました。m(__)m


カヅサツ [MAIL] [URL] [WriteDate : Sat Jun 9 18:28:39 2001]

> <th>となってた所を<td>に勝手ながら修正したところ、
> エラーになりませんでした。表示もちゃんとされてます。

申し訳ありません。間違えていました。
で、修正なんですが、 「1」や「2」といったテキストは
文脈上、「見出し(セル)」にあたると思うので、
<th> を <td> にするのではなく、</td> を </th> にすると宜しいと思う次第です。

> ただNN4.7で確認したところ、どちらでやっても思い通りの表示にはなりませんでした。
> 一般的には仕方のない事なのでしょうか。(^^;

NN 4.x はスタイルシートに(正確には CSS に)対応していないも同然です。
中途半端に解釈されるくらいならば回避させたいとお考えでしたら、
外部スタイルシートを読み込むときの LINK 要素の MEDIA 属性値に、
screen 以外の値も(を)指定して下さい。

<link rel="stylesheet" type="text/css" href="./css/xxx.css"
media="screen, tv">

NN 4.x はこれを解釈せず、よって全ての「見栄え」はブラウザ(およびユーザ設定)
に依存します。ちゃんと HTML を論理的に記述していれば、たぶん困ることは少ないでしょう。
スタイルシートに正しく対応した環境のうち、
コンピュータ上のブラウザや TV 環境ならば、スタイルシートを読み込みます。


内山典男 [WriteDate : Sat Jun 9 22:04:08 2001]

要するにNN4.7では、スタイルシートを使うと
期待通りの表示にならないので、諦めなさいという事ですね。
こちらに出入りしてる回答者様達のサイトをNN4.7で拝見すると、
きちんと表示されてますが、これは主にどういった事に配慮して
作成されているのですか?
今後の為にも参考にさせていただきたいのです。

実はNN4のゲストの方も多いので、
絶対にNN4でも同じように表示させたいのです。
無理でしょうか?(^^;


カヅサツ [MAIL] [URL] [WriteDate : Sun Jun 10 04:20:29 2001]

> こちらに出入りしてる回答者様達のサイトをNN4.7で拝見すると、
> きちんと表示されてますが、これは主にどういった事に配慮して
> 作成されているのですか?

ボクの方法は既に述べました。ボクのサイトの見栄えは MSIE 5.x と
NN 4.x とで変わると想像しますが、それなりに
(普通の電子テキストに比べれば、まぁ)、
読みやすいのではないかと思います。

> 実はNN4のゲストの方も多いので、
> 絶対にNN4でも同じように表示させたいのです。
> 無理でしょうか?(^^;

無理ではないとも言えるし、無理とも言えます。
が、少なくとも無理を通した段階で、今度は視覚障害者に良く使われる音声デバイスや
テキストブラウザ、そして将来のブラウザに対して不親切なページになる可能性が高いので、
まず、そこらへんの覚悟をお聞かせいただければ、
判る方は回答するかもしれません。


内山典男 [WriteDate : Sun Jun 10 12:10:20 2001]

わかりました。
今後の事もあるのでNN4での事はじっくりと考えてみます。
少なくとも今回はレイアウトの仕方等、
大変勉強になり感謝しております。
カヅサツ様、ありがとうございました。
又よろしくお願い致します。m(__)m

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]
ChaichanPAPA's World