【W3C準拠】正しいHTML・CSS教えます【ウェブ標準】
1 ：Name_Not_Found：
このスレッドは、W3C準拠の正しいHTMLとCSSによる
ウェブサイト構築のためのポイントなどを自由に投稿するところです。
ウェブサイト構築のためのポイントなどを自由に投稿するところです。
|
|
|
2 ：Name_Not_Found：2008/01/11(金) 01:24:25 ID:AMPtNO57
□標準モードにする
・Transitionalなら
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
・strictなら
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
□ブラウザ初期値をリセットする
・最低これをcssに入れる
* {margin:0; padding:0;}
(http://pc11.2ch.net/test/read.cgi/hp/1193327030/91 より)
___________________________________
□段組＝カラム
・解説サイトはググればいくらでもある。タダなんだからどんどん読め。
□ブロックレベルとインラインレベル
・要素は大きく分けてこの2種類。それぞれ使えるプロバティが違うから、以下同上。
□センタリング
・よくある間違いとして、ブロックレベルをtext-align:center;でセンタリングさせている。
これは特定ブラウザの誤った仕様なので、忘れる事。
text-align:center;でセンタリング出来るのはインラインレベル。
・ブロックレベルのセンタリングの例として、
div {margin:0 auto; width:xx%;}
div {margin-left:xx%; margin-right:xx%;}
など。
(http://pc11.2ch.net/test/read.cgi/hp/1193327030/95 より)
・Transitionalなら
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
・strictなら
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
□ブラウザ初期値をリセットする
・最低これをcssに入れる
* {margin:0; padding:0;}
(http://pc11.2ch.net/test/read.cgi/hp/1193327030/91 より)
___________________________________
□段組＝カラム
・解説サイトはググればいくらでもある。タダなんだからどんどん読め。
□ブロックレベルとインラインレベル
・要素は大きく分けてこの2種類。それぞれ使えるプロバティが違うから、以下同上。
□センタリング
・よくある間違いとして、ブロックレベルをtext-align:center;でセンタリングさせている。
これは特定ブラウザの誤った仕様なので、忘れる事。
text-align:center;でセンタリング出来るのはインラインレベル。
・ブロックレベルのセンタリングの例として、
div {margin:0 auto; width:xx%;}
div {margin-left:xx%; margin-right:xx%;}
など。
(http://pc11.2ch.net/test/read.cgi/hp/1193327030/95 より)
3 ：Name_Not_Found：2008/01/11(金) 17:28:05 ID:???
ふ〜ん
4 ：Name_Not_Found：2008/01/11(金) 22:38:16 ID:???
バカ専用スレがたったと聞いてとんできました
5 ：平岡一族 ◆lQvwmSuS2w ：2008/01/12(土) 15:49:44 ID:XA+sHJ0z
期待
6 ：Name_Not_Found：2008/01/12(土) 16:16:11 ID:???
スクロールバーの色指定はIE限定ですか？
7 ：Name_Not_Found：2008/01/12(土) 18:31:25 ID:???
formタグのところでパスワードや検索ワードをいれる枠のスタイルを決定したいのだけどどうやればいいのでしょうか？ちなみにこの部分でエラーがでます。
styleは使ったらダメなんですか？
<input type="password" name="pass" maxlength="32" style="font-size:10px; padding:0px; width:60px" />
styleは使ったらダメなんですか？
<input type="password" name="pass" maxlength="32" style="font-size:10px; padding:0px; width:60px" />
8 ：Name_Not_Found：2008/01/12(土) 19:26:29 ID:???
9 ：Name_Not_Found：2008/01/13(日) 21:41:09 ID:???
え、質問は受け付けないの！？
10 ：Name_Not_Found：2008/01/13(日) 23:18:24 ID:???
>>8
いきなりスレタイと矛盾してますよー＾＾
いきなりスレタイと矛盾してますよー＾＾
11 ：Name_Not_Found：2008/01/14(月) 12:23:01 ID:???
質問に答えるのではなく、>>2のご意見を拝聴させていいただくスレということだな
12 ：Name_Not_Found：2008/01/14(月) 13:05:20 ID:???
スレタイ紛らわしいな。
教えますというより意見交換スレみたいだ。
正しい日本語教わりますにした方が良かった。
教えますというより意見交換スレみたいだ。
正しい日本語教わりますにした方が良かった。
13 ：Name_Not_Found：2008/01/15(火) 22:44:09 ID:???
□vertical-allignはなぜ失敗するのか
CSSに触ったことのある人なら、vertical-alignプロパティが思い通りに使え
ない経験をしたことがあるかもしれない。vertical-align:middleを指定した
のに真ん中にならない、とか。今回は失敗例を踏まえながら、vertical-align
プロパティの性質を正確に理解してみよう。
○失敗例1
ブロックボックスの真ん中にテキストを表示したく、以下のようなコードを書いてしまう。
<div style="vertical-align:middle; height:100px; width:100px; border:1px solid gray;">
テキスト
</div>
残念ながらこれはうまくゆかない。なぜならvertical-alignプロパティの適用
対象はインラインレベル要素かセル要素だからだ。継承も行われないので、こ
の指定は全く意味がない。ちなみに、text-alignプロパティはブロックレベル
要素かセル要素かインラインブロック要素に適用され、インラインレベル要素
には適用されない。vertical-alignプロパティとは逆なので、しばしば誤解さ
れるようである。
CSSに触ったことのある人なら、vertical-alignプロパティが思い通りに使え
ない経験をしたことがあるかもしれない。vertical-align:middleを指定した
のに真ん中にならない、とか。今回は失敗例を踏まえながら、vertical-align
プロパティの性質を正確に理解してみよう。
○失敗例1
ブロックボックスの真ん中にテキストを表示したく、以下のようなコードを書いてしまう。
<div style="vertical-align:middle; height:100px; width:100px; border:1px solid gray;">
テキスト
</div>
残念ながらこれはうまくゆかない。なぜならvertical-alignプロパティの適用
対象はインラインレベル要素かセル要素だからだ。継承も行われないので、こ
の指定は全く意味がない。ちなみに、text-alignプロパティはブロックレベル
要素かセル要素かインラインブロック要素に適用され、インラインレベル要素
には適用されない。vertical-alignプロパティとは逆なので、しばしば誤解さ
れるようである。
14 ：Name_Not_Found：2008/01/15(火) 22:47:33 ID:???
○失敗例2
では、「テキスト」にvertical-alignプロパティを与えたらうまくゆくだろうか。
<div style="height:100px; width:100px; border:1px solid gray;">
<span style="vertical-align:middle">テキスト</span>
</div>
これも意図とは違う結果になる。なぜか。それには、「vertical-alignプロパ
ティが何を何に対して位置揃えするのか」を理解する必要がある。
vertical-alignプロパティがインラインレベル要素に適用されたときは、
「インラインボックス(正確にはline-heightプロパティで高さが与えられるボッ
クス)が、親のインラインボックス、親がブロックレベルなら各行の先頭にあ
ると仮定される当該ブロックのfontとheightプロパティを備えた幅ゼロのイン
ラインボックス -- 支柱 --」に対して位置揃えされる。つまり、インライン
ボックスをブロックボックスに対して位置揃えするのではないのだから、
「vertical-alignプロパティでテキストをブロックボックスの中央に」という
のは、最初から無理な話だったのだ。
では、「テキスト」にvertical-alignプロパティを与えたらうまくゆくだろうか。
<div style="height:100px; width:100px; border:1px solid gray;">
<span style="vertical-align:middle">テキスト</span>
</div>
これも意図とは違う結果になる。なぜか。それには、「vertical-alignプロパ
ティが何を何に対して位置揃えするのか」を理解する必要がある。
vertical-alignプロパティがインラインレベル要素に適用されたときは、
「インラインボックス(正確にはline-heightプロパティで高さが与えられるボッ
クス)が、親のインラインボックス、親がブロックレベルなら各行の先頭にあ
ると仮定される当該ブロックのfontとheightプロパティを備えた幅ゼロのイン
ラインボックス -- 支柱 --」に対して位置揃えされる。つまり、インライン
ボックスをブロックボックスに対して位置揃えするのではないのだから、
「vertical-alignプロパティでテキストをブロックボックスの中央に」という
のは、最初から無理な話だったのだ。
15 ：Name_Not_Found：2008/01/15(火) 23:20:42 ID:???
○vertical-align:middleの意味(インラインレベル要素)
インラインレベル要素に対して適用されるvertical-alignプロパティの値
'middle'は、どのような意味なのか。'middle'は「ボックスの中央を親ボック
スのベースラインから0.5exだけ上の位置」に揃える。次のようなコードを書
いてみよう。
<div>
<span style="font: 50px/1 serif; background:lime;">50px
<span style="font-size:20px; vertical-align:middle; background:yellow;">middle
</span></span></div>
黄色いボックスの中央が"x"のクロスしている部分に揃うのが正しい表示だ。
Firefox 2は正しく表示できる。IE 7、Opera 9は若干上寄りになっているよう
に見える。
○vertical-align:middleの意味(セル要素)
vertical-align:middleがセル要素に適用されたときは、セルの中央がそのセル
の属する行の中央に揃えられる。失敗例1にdisplay:table-cellを加えてみよう。
<div style="display:table-cell; vertical-align:middle; height:100px; width:100px; border:1px solid gray;">
テキスト
</div>
これで、意図した通りの結果になったはずだ。IE 7はdisplay:table-cellに対
応していないので、IEでも同じように表示させるには、div要素の代わりにtd
要素かth要素を使わねばならない。
インラインレベル要素に対して適用されるvertical-alignプロパティの値
'middle'は、どのような意味なのか。'middle'は「ボックスの中央を親ボック
スのベースラインから0.5exだけ上の位置」に揃える。次のようなコードを書
いてみよう。
<div>
<span style="font: 50px/1 serif; background:lime;">50px
<span style="font-size:20px; vertical-align:middle; background:yellow;">middle
</span></span></div>
黄色いボックスの中央が"x"のクロスしている部分に揃うのが正しい表示だ。
Firefox 2は正しく表示できる。IE 7、Opera 9は若干上寄りになっているよう
に見える。
○vertical-align:middleの意味(セル要素)
vertical-align:middleがセル要素に適用されたときは、セルの中央がそのセル
の属する行の中央に揃えられる。失敗例1にdisplay:table-cellを加えてみよう。
<div style="display:table-cell; vertical-align:middle; height:100px; width:100px; border:1px solid gray;">
テキスト
</div>
これで、意図した通りの結果になったはずだ。IE 7はdisplay:table-cellに対
応していないので、IEでも同じように表示させるには、div要素の代わりにtd
要素かth要素を使わねばならない。
16 ：Name_Not_Found：2008/01/15(火) 23:51:41 ID:???
○改善策
td要素などを使わず同じように表示する方法としては、以下のようなものがよ
く紹介されている。
<div style="line-height:100px; height:100px; width:100px; border:1px solid gray;">
テキスト
</div>
なぜこれで垂直方向に中央揃えされるのか私にはよく分からないので、説明で
きる人がいたら是非お願いしたい。
この方法では、テキストが2行以上に渡ると、2行目のテキストが1行目か
ら100px下に表示されてしまうので、注意しなければならない。
○おわりに
暇なので書いてみた。間違いがあれば指摘していただきたい。
○誤植
「失敗例2」
正：当該ブロックのfontとline-heightプロパティを備えた
誤：当該ブロックのfontとheightプロパティを備えた
td要素などを使わず同じように表示する方法としては、以下のようなものがよ
く紹介されている。
<div style="line-height:100px; height:100px; width:100px; border:1px solid gray;">
テキスト
</div>
なぜこれで垂直方向に中央揃えされるのか私にはよく分からないので、説明で
きる人がいたら是非お願いしたい。
この方法では、テキストが2行以上に渡ると、2行目のテキストが1行目か
ら100px下に表示されてしまうので、注意しなければならない。
○おわりに
暇なので書いてみた。間違いがあれば指摘していただきたい。
○誤植
「失敗例2」
正：当該ブロックのfontとline-heightプロパティを備えた
誤：当該ブロックのfontとheightプロパティを備えた
17 ：Name_Not_Found：2008/01/18(金) 00:17:50 ID:???
○補足
セル要素に対してvertical-align:middleが適用されるとなぜセルの内容まで
もが中央揃えされるのかについては少々補足が必要であろう。CSS 2.1の
「17.5.3 Table height algorithms」において、セルの高さの算出方法が規定
されている。
1.最初にvertical-align:baselineであるセルを並べる。これにより行のベー
スラインが定まる。次にvertical-align:topであるセルを配置する。
2.セルの上辺から最も下にある下辺までの距離を仮の高さとする。
3.残りのセル(vertical-alignが'bottom'もしくは'middle')の高さが現在の行
の高さよりも大きいなら、行の下辺を押し下げて行の高さをセルの最大の高さまで拡大する。
4.最後に残ったセルを配置する。
5.行の高さより小さいセルボックスは、上下の余った部分にパディングを加える。
この過程で、4.の「セル」が実際には「セルの内容」であると解釈されている。
そうでなければ、>>15の後者のようなケースで「セル」を配置することができ
ず、vertical-alignプロパティの指定が意味をなさなくなってしまう。このよ
うな解釈により、セルの内容を揃えるためにvertical-alignプロパティを使う
ことができるのである。
セル要素に対してvertical-align:middleが適用されるとなぜセルの内容まで
もが中央揃えされるのかについては少々補足が必要であろう。CSS 2.1の
「17.5.3 Table height algorithms」において、セルの高さの算出方法が規定
されている。
1.最初にvertical-align:baselineであるセルを並べる。これにより行のベー
スラインが定まる。次にvertical-align:topであるセルを配置する。
2.セルの上辺から最も下にある下辺までの距離を仮の高さとする。
3.残りのセル(vertical-alignが'bottom'もしくは'middle')の高さが現在の行
の高さよりも大きいなら、行の下辺を押し下げて行の高さをセルの最大の高さまで拡大する。
4.最後に残ったセルを配置する。
5.行の高さより小さいセルボックスは、上下の余った部分にパディングを加える。
この過程で、4.の「セル」が実際には「セルの内容」であると解釈されている。
そうでなければ、>>15の後者のようなケースで「セル」を配置することができ
ず、vertical-alignプロパティの指定が意味をなさなくなってしまう。このよ
うな解釈により、セルの内容を揃えるためにvertical-alignプロパティを使う
ことができるのである。
○補足の補足
折しも昨年の終わりにW3Cのメーリングリストで>>17と全く同様のケースに関
する問題が議論されていたようなので、紹介しておこう。
・http://lists.w3.org/Archives/Public/www-style/2007Dec/0252.html
td { height: 5em; vertical-align: middle; border: 1px solid; }
このような場合、現在の仕様ではセルボックスが行全体を満たし、
vertical-alignプロパティによって中央揃えされるものが何もないというので
ある。そこで、http://www.w3.org/TR/2007/CR-CSS21-20070719/tables.html#height-layout の
# In CSS 2.1, the height of a cell box is the maximum of the table
# cell's 'height' property and the minimum height required by the
# content (MIN).
という記述を
# In CSS 2.1, the height of a cell box is the minimum height
# required by the content (MIN). The table cell's 'height' property
# can influence the height of the row, but it does not increase the
# size of the cell box.
に改めてはどうかという提案である。こうすることで、行の高さはheightプロ
パティによって決まり、セルボックスは行内で垂直方向に中央揃えされ、HTML
の表モデルにもブラウザの実装にも適合するようになる。詳細は下記のURLを
参照されたい。
・http://csswg.inkedblade.net/spec/css2.1#issue-26
折しも昨年の終わりにW3Cのメーリングリストで>>17と全く同様のケースに関
する問題が議論されていたようなので、紹介しておこう。
・http://lists.w3.org/Archives/Public/www-style/2007Dec/0252.html
td { height: 5em; vertical-align: middle; border: 1px solid; }
このような場合、現在の仕様ではセルボックスが行全体を満たし、
vertical-alignプロパティによって中央揃えされるものが何もないというので
ある。そこで、http://www.w3.org/TR/2007/CR-CSS21-20070719/tables.html#height-layout の
# In CSS 2.1, the height of a cell box is the maximum of the table
# cell's 'height' property and the minimum height required by the
# content (MIN).
という記述を
# In CSS 2.1, the height of a cell box is the minimum height
# required by the content (MIN). The table cell's 'height' property
# can influence the height of the row, but it does not increase the
# size of the cell box.
に改めてはどうかという提案である。こうすることで、行の高さはheightプロ
パティによって決まり、セルボックスは行内で垂直方向に中央揃えされ、HTML
の表モデルにもブラウザの実装にも適合するようになる。詳細は下記のURLを
参照されたい。
・http://csswg.inkedblade.net/spec/css2.1#issue-26