プロが教える店舗&オフィスのセキュリティ対策術

現在、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の本にはそういう書き方はされておらず、
どうすれば全体が真ん中によるのかも教えていただけると幸いです。

長くなりましたがよろしくお願いいたします。

A 回答 (3件)

文法的に突っ込みどころはたくさんありますが


順序が変わって見える最大の要因はtableの終了タグが存在せず、
ブラウザがどこで終了していいかわからないからでしょう。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<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>
    • good
    • 0
この回答へのお礼

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

お礼日時:2007/01/14 22:16

> 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 …
    • good
    • 0
この回答へのお礼

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

お礼日時:2007/01/14 22:15

ソースがおかしいですね。


・tableタグが閉じられていない
・h1はpの中で使えない
・h1にstrong?
・ulの中でolは使えない
    • good
    • 0
この回答へのお礼

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

お礼日時:2007/01/14 22:14

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!