DOCTYPE宣言とstyleの適用
- DOCTYPE宣言をするとstyleが適用できなくなる理由とは？
- DOCTYPE宣言後にスタイルが適用されるようにする方法とは？
- DOCTYPE宣言によってデザインが変わってしまう問題の解決策は？
- ベストアンサー
DOCTYPE宣言をするとstyleが適用できない
webサイト作りの初心者です。 初め、ドキュメントタイプ（DOCTYPE）の宣言を書かずに<html>タグからコードを書いていたのですが、 全体がある程度形になってから、1番上に <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> を追加し、<html>を <html xmlns="http://www.w3.org/1999/xhtml"> に変えると、デザインが変わってしまいました。 具体的には、 <div style="height:960;">～</div> と書いて作っていたブロックの高さが、 DOCTYPE宣言を書く前はちゃんと960になっていたのですが、 書いた後は、中に入っているコンテンツ（テキスト）の高さまで縮み、style部分の数字をいくらいじっても変わってくれません。 他にも、style属性のmargin-leftなどが適用されなくなっていました。 なぜ、DOCTYPEの宣言をするとstyleが適用されなくなったのでしょうか？ また、どうすれば適用されるようになるのでしょうか？ よろしくお願いします。
- 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には、高さでけの指定しかしていませんが？？？ 基本的な記述をマスターしていますか？？？
関連するQ&A
- DOCTYPE宣言とdocument.body.clientHeight
お世話になります。 ブラウザのサイズを取得するにはどうすればよいのでしょうか？ document.body.clientHeightで取得出来るのは分かりましたが DTDにより動作したり、しなくなるのも分かりました。 ×動作しない <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ○動作する <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 後者のものですとIEでは動作しますが、firefoxでは動作しません。 何か対処法は、御座いませんでしょうか？ 一番望む形は <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> の宣言で、ブラウザサイズが取れるようになるのがベストです。 CSSを使用しているので<?xml version="1.0" encoding="UTF-8"?>を入れると 表示モードが互換になるので・・・。 対応したいブラウザはIE6.0、firefox,Safariです。 一応ソース <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script> function init(){ var bodyHeight = document.body.clientHeight; alert(bodyHeight); } </script> </head> <body onload="init();"> <div> ほげ </div> </body> </html>
- ベストアンサー
- JavaScript
- ＤＯＣＴＹＰＥ宣言は厳密に気にするべきか？？
現在ＷＥＢを独学で学んでおります。 そこでＤＯＣＴＹＰＥ宣言についていくつか疑問に思いました。 ひとつでもわかる方はご回答頂ければ幸いです。 １．<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> と、ソースの頭に記述しておいて <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> の内容で記述(XHTML 1.0 Transitionalで記述)することは可能ですか？？ つまり、HTML 4.01 Transitionalを宣言して終了タグなど、XHTML 1.0 Transitionalの方式で書いても正確に表示されるかを知りたく思って おります。 ２．ＤＯＣＴＹＰＥ宣言を書いてないサイトが多く見受けられますが、 この場合はどのようにＤＯＣＴＹＰＥ宣言と捉えられるのでしょうか？ また、この場合のデメリットとかはありますでしょうか？？ 以上、わかる方いましたらよろしくお願いいたします。
- ベストアンサー
- HTML
- DOCTYPE宣言によりmarginがきかない
いつもお世話になります。 やりたいことは、divタグの領域を左右に同じ幅のマージンとなるようにしたいのですが、DOCTYPE宣言を入れたのと入れていないので、マージンが正常に働いてくれません。 例えば以下のコードがあったとします。 <html> <head> </head> <body> <div style="width: 100%; padding 5px; margin: 10px 20px; border: solid 2px black;">aaaaa</div> </body> </html> これをIE８で開いてみると、左右20pxでマージンをとってくれます。これに、 <?xml version="1.0" encoding="windows-31j" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> ・・・（省略）・・・ を追加して開いてみると、左はマージンをとっているのですが、右は端っこまでいってしまいます。 自分なりに調べてみて、DOCTYPE宣言により、標準準拠モードと後方互換モードがある、ということを知ったのですが、ではどうすれば標準準拠モードで正しくマージンを取ることができるのか、というところまで見つけれませんでした。 どうすれば正しくマージンを取ることができるのでしょうか。 宜しくお願いいたします。
- ベストアンサー
- HTML
- DreamWeaverでのスタイルシート適用後のプレビューについて
最近やっとDreamWeaverを購入してテーブルからCSSデザインに 乗り換えようと奮闘中のものです。 外部スタイルシートに div#container { background: #ffffff; padding: 20px; margin: 10px 30px; border: 2px solid #999999; } と書き、 HTMLのほうに、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link href="/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="container"> test web site </div> </body> </html> と書きプレビューしてみたのですがスタイルシートが 適用されません。 デザインビューでは適用されているのですが、、、 何が原因なのでしょうか?
- ベストアンサー
- ホームページ作成ソフト
- ＤＯＣＴＹＰＥ宣言について
自分はＸＨＴＭＬ１．０を参考通り <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> このように二列で入力しているのですが、一列で入力しても大丈夫なのでしょうか？また、オススメの宣言タイプ？があったら教えてください。お願いします。
- 締切済み
- ホームページ作成ソフト
- 教えてください。ホームページを作っているのですが、宣言文を入れると、中
教えてください。ホームページを作っているのですが、宣言文を入れると、中央に配置できなくなります。 これはどうすればよいのでしょうか？？ <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head>
- ベストアンサー
- その他（インターネット・Webサービス）
- “タグの属性”と“スタイル”の優先度について
HTMLの勉強をしています。以下のソースですと、“cellpadding”が機能しません。試しに、*{margin:0; padding:0;}を外しレンダリングしてみると、うまくいきました。これは、やはり、「“タグの属性”と“スタイル”での指定なら、“スタイル”が優先されると考えてよいのですか？」 よろしく、お願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style text/css> *{ margin:0px; padding:0px; } </style> </head> <body> <table width="200" border="1" cellspacing="1" cellpadding="15"> <tr> <td>セルパディング</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- XHTML宣言についてですが自分のものでどこがおかしいのか解りません。
XHTML宣言についてですが、 私はライブドアブログでブログを作っています。 ブログのチェッカーで引っかかりました。 現在の宣言内容です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML1.0 では XML宣言をすることが強く求められています。 と指摘されましたがどうしたらいいかわかりません
- 締切済み
- HTML
- Dreamweaverのデフォルトを変更したい
Dreamweaverでhtmlドキュメントを新規に作成、かつ、XHTML準拠させると、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> という宣言も自動で作成されますが、このデフォルト宣言をStrictにしたいのですが、どこでどのような操作をしたらよいのでしょうか？ ご存知の方、お願いします。
- ベストアンサー
- HTML
- Dreamweaverでバリデートをかけてソースをチェックしたところ、
Dreamweaverでバリデートをかけてソースをチェックしたところ、 タグ"html"には、現在アクティブなバージョンでは属性"xmlns:spry"がありません。 [XHTML 1.0 Transitional] タグ"div"には、現在アクティブなバージョンでは属性"spry:region"がありません。 [XHTML 1.0 Transitional] タグ"div"には、現在アクティブなバージョンでは属性"spry:repeat"がありません。 [XHTML 1.0 Transitional] というエラーがでてしまいました。 現在のDOCTYPE宣言は、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> です。 html要素は、 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" xmlns:spry="http://ns.adobe.com/spry"> です。 DOCTYPEに問題があると思い、XHTML1.0のStrict DVDやFrameset DVDなどに変更してみましたが、エラーは[XHTML 1.0 Transitional]の部分がそれぞれのDTDに変わるだけで、エラーは減りませんでした。 ちなみにHTML 4.01に変更したらエラーがとても増えました。 ※一番上のエラーですが、 htm要素中のxmlns:spry="http://ns.adobe.com/spry"を削除したら、エラーがなくなりました。 残りは2つです。 助けてください。
- ベストアンサー
- HTML
お礼
回答ありがとうございました！ 勉強になりました。 ちなみに、発生していた問題の原因は色々いじっているうちに治りました。何が原因だったのかはわかりませんでした…。