XML宣言をしたら・・・

このQ&Aのポイント
  • XHTML+CSSを勉強中なのですが、xml宣言をすると画面が左に寄ってしまいます。
  • CSSのmarginの設定に問題があるのか検討しましたが、解決策が見つかりません。
  • 画面中央に表示するためには、どのような修正が必要でしょうか?
回答を見る
  • ベストアンサー

xml宣言をしたら・・・

XHTML+CSSを勉強中なのですが、下記のソースを見てください。 <?xml version="1.0" encoding="Shift_JIS"?> <!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> -----------省略------------- </head> <body> <div id="container"> -----------省略------------- </div> </body> </html> xml宣言をするまでは画面中央に表示されていたのですが、宣言の行を追加したら左側に寄ってしまいました。 CSS部分は以下のようになっています。 body { font-size: 100%; font-family: sans-serif; color: #333333; margin: 0; padding: 0; background-color: #F0F0F0; } #container { width: 800px; position: relative; margin: 0 auto; background-color: #FFFFFF; } marginの設定の仕方が悪いのかなとか考えたんですが、わかりませんでした。 用は<table align="center">のようなことがしたいんです。 どなたかご教授よろしくお願いします。

  • XML
  • 回答数3
  • ありがとう数5

質問者が選んだベストアンサー

  • ベストアンサー
noname#20378
noname#20378
回答No.2

しばらく解らなかったけど、CSSソース見てたら解決しました。 ここでHTMLのソースを見直してみるとlink要素によるCSS指定がないので <script src="js/topstyle.js" type="text/javascript"></script> が怪しいと判断し、このソースを調べることにしました。 見ると共通するcss/all.cssとcss/top.cssと ブラウザやOSごとにCSSを振り分けていることが解ります 最初私はIE6専用CSSを調べに行きましたが特に怪しい部分は見つからなかったのでcss/all.cssを見始めました 解決。 body { text-align:center; /*これですね*/ } IEの「過去互換モード」の別のバグを利用してます(笑) #標準準拠モードでは修正されているようです。 http://www.anslasax.net/css-make/t-a/index.html http://sourcemania.jpn.org/doc/block_center/#wrong 本来text-alignプロパティは【ブロックボックスの位置をそのままに】中のインラインテキストの位置を変えるものですが、IEは【ブロックボックスの位置ごと変更します】 ということで、調べ方と共に、うまく行ってる理由、おw解りいただけましたか?

elm005
質問者

お礼

返答が遅れてしまい大変申し訳ありません。 色々と勉強が必要だと改めて実感しました。 text-align:center;を使うとは思いませんでした。 この件に関して解決しました。本当にありがとうございました。

その他の回答 (2)

noname#20378
noname#20378
回答No.3

#1,#2です。 余計なお節介かもしれないけど・・・言っておいたほうがいいかなと思ったので。 IEのCSS解釈にはFirefoxやOpera等他のブラウザに比べかなりのバグがあります 有名なCSS実装度チェックにAcid2というものがあります。「えむもじら」さんのところに各ブラウザでテストを受けた時の画像が載っています http://level.s69.xrea.com/mozilla/index.cgi?id=20051030_Acid2 ...というわけで、デザインで困ったことがあったり、 思ったとおりにならないときはFirefoxやOperaで確認しなおしてみるといいでしょう。 #私は普段からFirefoxを使っています。速度や消費メモリから言ったらOperaの方が使いやすいとは思いますが。

noname#20378
noname#20378
回答No.1

IEのバグです。 「DOCTYPEスイッチ」というものをご存知でしょうか? 娘娘飯店しるきぃうぇぶ-DOCTYPE 宣言による「解釈モード」の切り替え http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_situation.html で、実は 娘娘飯店しるきぃうぇぶ-ねこめしにっき2001年9月20日を見てもらうと解りますが WinIE6 の DOCTYPE スイッチ機能不全発見 http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/09b.html 抜粋します 【HTML ソース冒頭に XML 宣言があると、DOCTYPE スイッチせず有無いわさず Quirks 解釈(過去慣習互換≒ WinIE5.x 的解釈互換)になってしまう】 んです、IEは。 で、さらに、 文書型宣言とブラウザでの表示 http://www.mars.dti.ne.jp/~fuming/advanced/dtd.htm >margin:autoが有効かどうか 後方互換モード:【無効】 となっています。 原因はもう解りましたね? 一般的にはXML宣言を抜く形で回避されているようです (省略できるのはUTF-8またはUTF-16またはHTTPヘッダ等別なプロトコルで明示された場合とされているため、大抵は文書をUTF-8に変換しています)

elm005
質問者

補足

なるほど、そんなバグがあったとは思いもよりませんでした。 ありがとうございます。 しかし、私がこの質問をした理由は下記サイトで可能になっていたからなんです・・・。 http://www.r2works.com/

関連するQ&A

  • XML宣言について

    htmllintでエラーチェックをしたら、 <!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"> にはXML宣言をいれろとでたので <?xml version="1.0" encoding="Shift_JIS"?>を入れました。 しかし、下記cssの設定でセンター揃えの設定をしていたのに 左よりになってしまいました。 XML宣言を取ると元のセンター揃えに戻りましたがXML宣言はいれない 方がよいのでしょうか?入れてもセンター揃えになりますか? css---------------ーーーーーーーーーーー * {1 margin: 0; padding: 0; } body { margin: 0px; padding: 0px; background-color:#f0fbff; height:100%; font-size: 13px; } html{ height:100%; } #wrapper { background-color:#fff; margin:0px auto; padding:0px; width:848px; height:100%; min-height:100%; border-left:1px solid #b8b8b8; border-right:1px solid #b8b8b8; } body > #wrapper { height:auto; }

    • ベストアンサー
    • HTML
  • GoogleChromeでxml宣言が消える?

    GoogleChromeでソース表示を行うと1行目に表示されるはずのxml宣言が表示されません。 例えばIE7で神奈川県のサイト(http://www.pref.kanagawa.jp/)をソース表示すると <?xml version="1.0" encoding="Shift_JIS"?> <!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"> となりますが、同じサイトをGoogleChromeでソース表示すると <!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"> と1行目にあるはずのxml宣言が消えて2行目の空行から始まっています。 だからなんだと言われると困るのですが・・・IE6対策でphpの条件分岐でIE6以外の場合のみ表示としているはずが、あれ?と言う状況です。 ソースや表示そのものがおかしくなるわけではないと思いますが、最初は条件分岐が間違っているのかと悩みました。 これはきちんと表示させる方法があるのか、もしくはそういう仕様なのか、実は他のソースもちゃっかり修正されちゃってたりしないのか、どんなもんでしょう。

    • ベストアンサー
    • HTML
  • xmlの宣言?ドコモで反転表示がうまくいかない。

    質問の内容がレス違いの場合はご了承ください。 PHPを使用して携帯向けのサイトを作成していますが、ドコモの文字反転がうまく行かなくて困っています。 説明が複雑になりますが、xmlの宣言でつまずいているのか.htaccessの設定とサーバーの設定がうまくいって無いのかほからないので、現状を書きますので、わかるようでしたらアドバイスしてください。 使用サーバー さくらのレンタルサーバー PHPのバージョン PHP 4.4.8(変更の予定はありません) 状況 .htaccessの内容 AddType application/xhtml+xml .xhtml 実行ソースabc.xthmlの内容 <?xml version="1.0" encoding="Shift_JIS"?> <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" /> <title>テスト表示</title> </head> <body> <div style="background-color:#ff0000;">テスト表示</div> </body> </html> ------------------------------------------------------------- この状態でドコモ端末よりアクセスすると反転表示されます。 これではPHPが使えないので、xhtmlでPHPを使えるようにしてみました。 参考にしたサイト http://help.sakura.ne.jp/forumup/c/2006/09/60.html http://faq.sakuratan.com/wiki/wiki.cgi?cgi%25a4%25c8php#i23 .htaccess変更後の内容 AddType application/xhtml+xml .xhtml DirectoryIndex index.html index.php .ht Action myphp-script /inc/php.cgi AddHandler myphp-script .php .html .xhtml 実行ソースabc.xthml変更後の内容 <? echo '<?xml version="1.0" encoding="Shift_JIS"?>'."\n" ?> <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" /> <title>テスト表示</title> </head> <body> <? echo "これで表示されれはOK"."<br>"; ?> <div style="background-color:#ff0000;">テスト表示</div> </body> </html> ------------------------------------------------------------- PHPは動作しているのですが、反転されないようになりました。 IE等でソース確認してみましたが、ソースにはxmlの宣言文は書かれています。 ですが、ドコモ端末で反転されないのです。 表示されていたのが表示されなくなったので、その間にやった処理を見直したのですが、xhtml上でPHPを動作させたいので、その方法がわかりません。 ちょっと説明がヘタで申し訳ないのですが、良きアドバイスお願いします。

    • ベストアンサー
    • PHP
  • HTMLで○や■などをテキストの代用とした時

    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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body { font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS P Gothic", sans-serif; background-color: #42413C; margin: 0; padding: 0; color: #000; } .container { width: 960px; text-align: center; background-color: #FFF; margin: 0 auto; } .header { background-color: #ADB96E; } .content { text-align: left; padding: 10px 0; } .footer { padding: 10px 0; background-color: #CCC49F; } --> </style></head> <body> <div class="container"> <div class="header"> </div> <div class="main"> <p>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</p> </div> <div class="footer"> </div> </div> </body> </html>

  • iframeを使わずに上下50%ずつに分割したい

    タイトルどおりですが・・・ frameやiframeを使わずに上下2分割させ、50%ずつ固定にしたいのですが、うまくいきません。 高さ100%は http://black-flag.net/css/20110621-3232.html で再現できたのですが、この中にheight:50%のdivを切ろうとしても上に詰まってしまいます。 表現する方法はあるでしょうか。 <!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" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>CSS HEIGHT 100% SAMPLE</title> <meta http-equiv="content-style-type" content="text/css" /> <style type="text/css"> *{ margin: 0; padding: 0; } html,body { height: 100%; } body { font-size: 100%; line-height: 160%; font-family: Arial,Helvetica,sans-serif; color: #000; text-align: center; background: #cccccc; } #container { margin: 0 auto; width: 800px; height: 100%; min-height: 100%; text-align: left; background: #fff; } body > #container { height: auto; } .half{ margin:0 auto; min-height:50%; height:50%; width:800px; } #container > .half { height: auto; } </style> </head> <body> <div id="container"> <div class="half"> <div> 上のコンテンツ。固定にしたい </div> </div> <div class="half"> <div style="overflow:scroll"> 下のコンテンツ。スクロールさせたい </div> </div> </div><!--/#container--> </body> </html>

    • ベストアンサー
    • CSS
  • 画像の貼り方教えてほしいです

    CSSの画像の貼り方がわかりません body{ background-color: #f2f2f2; padding: 0; margin: 0; } div#container { width: 700px; padding: 0; margin-left: 150px; background-color: white} div#header { background-color: blue; badkground-image: url(画像.jpg); width: 640px; height: 233px } 画像の部分のCSSはこんな感じです。 htmlは <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="roll.css" type="text/css" media="all" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="menu"> <ul> <li><a href="#">web</a></li> <li><a href="#">title1</a></li> <li><a href="#">title2</a></li> <li><a href="#">css</a></li> <li><a href="#">seo</a></li> </ul> </div> <div style="clear:both; "></div> </div> </body> </html> こうなってます。 ここまで何が間違っているかわかりません。 初心者ですがどなたかわかる方よろしくお願いします。

  • 教えてください。ホームページを作っているのですが、宣言文を入れると、中

    教えてください。ホームページを作っているのですが、宣言文を入れると、中央に配置できなくなります。 これはどうすればよいのでしょうか?? <?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>

  • 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>

  • ブラウザ上部に余白があります。

    近い現象はありましたが、解決出来なかったのでご質問させて頂きます。 下記のソースでhtmlを制作しましたが、#headerの上に余白があります。 どうすればこの余白をとる事が出来るでしょうか? お教え頂ければと思います。 ↓ソース↓ <!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 type="text/css"> <!-- html, body{ margin:0; padding:0; } div#header{ background-color: #F00; margin:0px; padding:0px; } --> </style> </head> <body> <div id="header"> <h1>test</h1> </div> </body> </html>

  • 自作HPのレイアウトがセンターにきません!><。。

    サイトのレイアウト構成は、『ヘッダー・2段組み・フッダー』をそれぞれ分かりやすく色づけしたのですが、なぜか2段組みのとろだけ、センターにきません。 また、3つの構成に上下に隙間が出来てしまいます。 誰かどこがオカシイのか教えてください。 下記にXHTML、CSSを入力しました、メモ帳等にコピペして見て頂けないでしょうか? ご回答お待ちしております。  【XHTML】 <?xml version="1.0" encoding="shift_jis"?> <!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> <title> List </title> <link rel="stylesheet" href="style.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div class="box_header"> </div> <hr /> <div class="box_a"> </div> <div class="box_b"> </div> <hr /> <div class="box_footer"> </div> </body> </html>  【CSS】 @charset "shift_jis"; body { background-color: #ffffff; margin-left: auto; margin-right: auto; font-family: Osaka, "ヒラノギ角ゴ Pro W3","小塚ゴシック Std B","MS Pゴシック",; } hr { height: 1px; width: 100%; background-color: #000000; } div.box_header { background-color: #ff0000; width: 1200px; height: 200px; margin-left: auto; margin-right: auto; } div.box_a { background-color: #808080; float: left; width: 800px; height: 2000px; margin-left: auto; margin-right: auto; } div.box_b { background-color: #0000ff; float: left; width: 400px; height: 2000px; margin-left: auto; margin-right: auto; } div.box_footer { background-color: #008000; clear: left; width: 1200px; height: 200px; margin-left: auto; margin-right: auto; }