- ベストアンサー
DOCTYPE宣言とstyleの適用
- DOCTYPE宣言をするとstyleが適用できなくなる理由とは？
- DOCTYPE宣言後にスタイルが適用されるようにする方法とは？
- DOCTYPE宣言によってデザインが変わってしまう問題の解決策は？
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 標準モードですね。 そして使われているブラウザはインターネットエキスプローラ(IE)ですね。 IEは、ユーザーの取り込みと競合ブラウザの追い落としのために、独自のスタイルシートの解釈をしていました。そして、そのためにウェブ標準の仕様にあわせることが他のブラウザよりも遅れました。(せっかく古いIE用に作られたページが利用できなくなる) 他のプログラムで扱うなどの必要がなければ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> ではなくて <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> として、HTML4.01strictで作成することにされたら良いでしょう。 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』1999年HTML4.01strict そして、次期HTML5はHTML4.01strictの改定になります。 ・XHTML1.0 transitinalは、同様に推奨されていません。 ・XHTMLで作成する場合でもstrictにしましょう。 その上で、スタイルシートも書き直すと良いです。互換モードと標準モードの大きな違いは、 ・ブロックのサイズの解釈 標準モードではpadding辺の内側です。 ・text^align:centerではブロックは中央に来ません。 などたくさんあります。 なお、 <div style="height:960;">～</div> でスタイルが適用されないことはありません。HTML要素のstyle属性に書かれたスタイルは詳細度が[1,0,0,0]となり、他の部分で書かれたすべてのスタイルを上書きします。ただし、著者やユーザーが!important宣言されている場合を除く。 文法的な間違いがあるため、この部分のHTMLが解釈されていないと思われます。 ⇒Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) の右上のDATAタブをクリックしてソースを貼り付けて見ましょう。 ★サンプル HTML4.01strict タブは＿に置換してあるので戻すこと!!! ▼<DOCTYPE宣>の有無でIEによる表示の差をチェックすること ▼他のブラウザ、firefox,Chromeなどでチェックしてみる。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル0</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- body{background-color:gray;} div.header{background-color:yellow;border-color:orange;} div.section{background-color:white;border-color:silver;} div.footer{background-color:aqua;border-color:blue;} html,body{margin:0;padding:0;} div.header,div.section,div.footer{width:400px;margin:0 auto;padding:20px;border-width:30px;border-style:solid;} div.section{height:400px;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>黄色い部分の幅が400px+40px、</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>ここに自由な長さの文章を入れてみる</p> ＿＿<p>本文(section)の高さは400px + 40px</p> ＿</div> ＿<div class="footer"> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
その他の回答 (2)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 style="height:960;" ではなく style="height:960px;"ではないでしょうか。 こちらを参考にしてみてください。単位が必要です。 http://w3g.jp/others/data/doctype_switching
BBrauzaは、何を使っていますか？ CSSには、高さでけの指定しかしていませんが？？？ 基本的な記述をマスターしていますか？？？
お礼
回答ありがとうございました！ 勉強になりました。 ちなみに、発生していた問題の原因は色々いじっているうちに治りました。何が原因だったのかはわかりませんでした…。