• ベストアンサー

XHTMLに関する質問 順序が逆になってしまうのはどうしてでしょうか?

現在、XHTMLでHPを作っているのですが、 <title>My profile </title> </head> <body><center> <p><h1><strong>My Profile</strong></h1></p> <p><img src="pictures/me.jpg"></p> <p>↑is my pfhoto(whem I was 19 years old in Fuji-Mountain)</p> <table border="1"> <tr> <th>name</th> <td>**** ********</td> </tr> <tr> <th>age</th> <td>23</td> </tr> <tr> <th>hobby</th> <td>playing guitar</td> </tr> <tr> <th>Hometown</th> <td>Chiba</td> </tr> <ul> <li>Favorite Guitarist Ranking</li> <ol> <li>Doug Aldrich</li> <li>Zakk Wylde</li> <li>Kiko Loureiro</li> </ol> <li>Favorite Band Ranking</li> <ol> <li>Ozzy Osuborne</li> <li>Whitesnake</li> <li>BON JOVI</li> </ol> </ul> </center> </body> </html> と、ソースを書いたのですが、 写真 簡単な自己紹介(表) 好きなギタリストとバンドのランキング と、ソースで書いた順番ではなく、 写真 ギタリストのランキング 簡単な自己紹介(表) の順に表示されてしまいます。 様々な本やWEBを参照したのですが、よくわかりませんでした。 どなたか、この解決法を教えていただければ・・よろしくお願いいたします。 また、表示を全てセンターに寄せたいのですが、 <center>を使うのは、XHTML的によいのでしょうか?? XHTMLの本にはそういう書き方はされておらず、 どうすれば全体が真ん中によるのかも教えていただけると幸いです。 長くなりましたがよろしくお願いいたします。

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

  • ベストアンサー
回答No.3

文法的に突っ込みどころはたくさんありますが 順序が変わって見える最大の要因はtableの終了タグが存在せず、 ブラウザがどこで終了していいかわからないからでしょう。 <!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> <title>My profile </title> </head> <body> <h1>My Profile</h1> <!-- <h2>Picture of Me</h2> --> <p><img src="pictures/me.jpg" alt=""/></p> <p>↑is my pfhoto(whem I was 19 years old in Fuji-Mountain)</p> <!-- <h2>My Data</h2> --> <table> <caption>My Data</caption> <tr> <th>name</th> <td>**** ********</td> </tr> <tr> <th>age</th> <td>23</td> </tr> <tr> <th>hobby</th> <td>playing guitar</td> </tr> <tr> <th>Hometown</th> <td>Chiba</td> </tr> </table> <!-- 面倒だからCSSによる中央揃えなどは一切省略 dlは二つに分割するとか dt要素をh2要素としてbody直下 dd要素をli要素としてulの子要素としてしまうほうが自然かもしれない でもさ、この場合、分離するよりも tr要素二つ作って作っちゃって th,td要素に含めちゃったほうが個人的には好きだなあ。 もっといえば、追加を三段にして画像も表の中入れてくれた方がすっきりしている気がする。 補足要求してくれればそこまで書くよ --> <dl> <dt>Favorite Guitarist Ranking</dt> <dd>Doug Aldrich</dd> <dd>Zakk Wylde</dd> <dd>Kiko Loureiro</dd> <dt>Favorite Band Ranking</dt> <dd>Ozzy Osuborne</dd> <dd>Whitesnake</dd> <dd>BON JOVI</dd> </dl> </body> </html>

ampman
質問者

お礼

詳しい説明ありがとうございました!! 自分なりに勉強してみます!!

その他の回答 (2)

  • deadlock
  • ベストアンサー率67% (59/87)
回答No.2

> XHTMLに関する質問 順序が逆になってしまう コレに関しては、タグの対応や入れ子をちゃんと確認してください。 lintと呼ばれるチェックツールを使えば、間違いは簡単に分かります。 参考URLに書いたサイトなどはオンラインでも使えますから、参照してみてください。 >> <center>を使うのは、XHTML的によいのでしょうか?? XHTMLにも種類があり、centerを使えるものと使えないものがあります。StrictではNG, TransitionalではOKです。 現在の方向性(見栄えに関するものはCSSを使う)としてはNGなので、できるだけ使わないほうが今後役に立つと思います。 CSSのtext-alignが相当するので、調べてみてください。

参考URL:
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
ampman
質問者

お礼

勉強になりました、ありがとうございました!

  • -Kei
  • ベストアンサー率50% (151/299)
回答No.1

ソースがおかしいですね。 ・tableタグが閉じられていない ・h1はpの中で使えない ・h1にstrong? ・ulの中でolは使えない

ampman
質問者

お礼

ありがとうございました!