掲示板/スタイルシート質問板/過去ログ/一覧/ letter-spacingの表示バグ？

0 名前： 匿名希望 ： 2006/03/09 06:00: いつもお世話になります。

文字間隔の調整のためletter-spacingを使用したのですが、すると タグが上手く認識されなくなりました。
例えば、
行A 
行B 
 
行C 
 
 
行D 
 
 
 
行E 
このソースの場合、IEやSleipnirだと
行A
行B
行C

行D

行E

行F
と表示されてしまいます。FirefoxやOperaでは正常に表示されるのですが。
これはもう、そういうものだと諦めるしかないのでしょうか？

また<center>といった基本的（と思っていた）なタグがFirefoxやOperaでは全く認識されず、こちらもどうしようかと悩んでいます。

1 名前： カヅサツ ： 2006/03/09 06:00: IEの有名なバグです。
http://cssbug.at.infoseek.co.jp/detail/winie/b022.html

ですが、lynxでは、何をしようとも連続する br要素を無視します。

そもそも、複数の br要素で行間を調整しようとするのは、あまり良くありません。

まずテキストを書き、次に構造に従って HTML でマークアップし、最後に CSS などで見栄えを整えるのが「良いウェブページ」を作る基本的な流れです。

------------
古本と蔵書印

私はその後Ｄ博士を訪問するたぴに、その書斎の硝子戸越しに、幾度かこの二冊の書物を見た。
その都度書物の背の金文字は藪睨みのやうな眼つきをして、
「おや、宣教師さん。いらつしやい」
と、当つけがましく挨拶するやうに思はれた。
------------

まず、「古本と蔵書印」は「見出し」ですから、h1要素にします。

<h1>古本と蔵書印</h1>

次に、「段落」を p要素にします。

私はその後Ｄ博士を訪問するたぴに、その書斎の硝子戸越しに、幾度かこの二冊の書物を見た。

あるブラウザでは、h1要素を大きい太字に、p要素の前後に 1行分の余白を入れますが、実は HTML は見栄えを規定しません。極端な言い方をすると、各ブラウザが、勝手にそのように表示しているだけです。

そこで CSS の出番です。
「見出しの前後には 2文字分の余白で、赤い文字」
「段落の前後には余白を空けず、1文字分字下げする」
という指定をします。

行間隔はこのように行うのが、良いでしょう。

また、最後の段落は、読みやすさのために、日本語の慣習として会話文の前後に改行があります。
このような改行を表現する時に br要素を使います。

その都度書物の背の金文字は藪睨みのやうな眼つきをして、 
「おや、宣教師さん。いらつしやい」 
と、当つけがましく挨拶するやうに思はれた。

つまり、きちんと文章を積み上げて HTML にしていくと、必然的に連続する br要素は「ぶっちゃけありえない」のです。

> また<center>といった基本的（と思っていた）なタグがFirefoxやOperaでは全く認識されず

center要素は HTML 4.01 から「非推奨」となり、XHTML 1.1 では破棄されましたが、
それはそれとしても Firefox や Opera は解釈するはずです。

ともあれ、CSS を使って「表そのものはセンタリング」は「見出し内のテキストは右寄せ」などの指定をするのが良いでしょう。

2 名前： 匿名希望 ： 2006/03/09 06:00: カヅサツさん、丁寧な回答ありがとうございます。
非常に分かり易く参考になりました。

>きちんと文章を積み上げて HTML にしていくと、必然的に連続する br要素は「ぶっちゃけありえない」のです。
良く分かります。タグは本来の用途通りに使うべきだと。
最近ようやくCSSでのレイアウトというものを意識し始めまして。
それまではTABLEでもなんでも使ってとにかく意図通りのレイアウトに見えればよいと考えていました。

>center要素は HTML 4.01 から「非推奨」となり、XHTML 1.1 では破棄されましたが、
>それはそれとしても Firefox や Opera は解釈するはずです。
<center>単体でならセンター寄せされるのですが、centerタグにclass等でスタイルをつけると、途端に機能しなくなってしまうのです。
やはりこれも間違った使い方なのでしょうか。勉強します。

3 名前： F ： 2006/03/09 06:00: 　まずは基礎から。

http://www.kanzaki.com/docs/htminfo.html

4 名前： カヅサツ ： 2006/03/09 06:00: > <center>単体でならセンター寄せされるのですが、centerタグにclass等でスタイルをつけると、途端に機能しなくなってしまうのです。

あ、意味がわかった気がする。

3大ブラウザは、center要素を

・中のテキストをセンタリング
・中のブロック要素をセンタリング

するのは共通していますが

・自分自身(center)をセンタリング

するのは IE だけです。

もちろん、center要素はあまり使わない方が良いですが、すべての見栄えを CSS で規定した後、CSS未対応ブラウザのために center要素「も」使うのは「アリ」だと思います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title>test</title>
<style type="text/css">
.test{
color: white;
background-color: red;
font-weight: bold;
width: 80%;
margin: 0em auto 0em auto; /* 要素そのものをセンタリング。これを外して firefox で見てみよう */
}
p{
color: white;
background-color: blue;
width: 50%;
}
</style>
</head>
<body>
<center class="test">
直下にテキスト
段落
段落
</center>
</body>
</html>

5 名前： カヅサツ ： 2006/03/09 06:00: センタリングの参考スレ
http://www.tagindex.com/cgi-lib/q2bbs/patio.cgi?mode=view&no=488

6 名前： 匿名希望 ： 2006/03/09 06:00: >>4
　center要素を使うならDOCTYPE宣言はHTML4.01 Transitionalでは？

http://members.jcom.home.ne.jp/pctips/www/knowledge/Web.html

7 名前： カヅサツ ： 2006/03/09 06:00 ［URL］: >>6

その通りです。
うっかりうっかり。

8 名前： 匿名希望 ： 2006/03/09 06:00: margin: 0em auto 0em auto;でも<center>と同じ効果になるとは知りませんでした。
HTML 4.01 から「非推奨」ということで、こちらを使おうと思います。
Fさん、カヅサツさん、ページの紹介と丁寧な解説ありがとうございます。参考になりました。

9 名前：神崎： 2006/03/09 06:00: センタリングの方法
http://www.mozilla.gr.jp/standards/webtips0004.html

BODYが上位のDIV要素、CENTERが下位のDIV要素として考えると、
margin-left/rightをautoにすればよいというのは同じになりますね。

http://www.mozilla.gr.jp/standards/webtips/
ここをブックマークしておけば、役立つことが多いと思います。