articleタグの位置がずれる問題について

2013/09/19 16:23

このQ&Aのポイント

ソース上の<article>タグの位置が画面表示時にずれてしまう問題が発生しています。
正確に希望の場所に入力しても、別のページに移動した後にソースを確認すると<article>の位置がずれている状態です。
この問題の原因や対処方法がわかる方がいらっしゃいましたら、教えていただけないでしょうか？

何故か<article>がずれてしまいます

こんにちは。お世話になります。表題にもありますように、ソース上の<article>の位置がどうしてもずれてしまいます。ソース上の希望の場所に入力しても、画面を移動、というのでしょうか、別のページをに飛んでから、ソースを再度確認すると、<article>の位置がずれてしまうのです。入力したソース上のタグは、下記の通りになります。 <html> <head> <meta charset="UTF-8"> <title>真夏のひまわり畑-forest studio</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> </header> <h1>FOREST STUDIO</h1> <article> <h1>真夏のひまわり畑</h1> <p>森の工房の隣にある畑は、毎年夏になると満開のひまわりの花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2 メートルを超え、見ごたえも十分です。畑の周囲は約5キロの散策コースになっていますので、花を見ながら散歩をするのもおすすめです。</p> <p>太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥たちの餌になります。また、ひまわり油も抽出し、料理屋やお菓子作りに活用しています。ひまわりの種を香ばしくローストしたクッキーも人気商品です。</p> </article> </body> </html> ですが、下記のように、<article>の位置がずれてしまいます。 <html> <head> <meta charset="UTF-8"> <title>真夏のひまわり畑-forest studio</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> </header> <h1>FOREST STUDIO</h1> <article> </article> <h1>真夏のひまわり畑</h1> <p>森の工房の隣にある畑は、毎年夏になると満開のひまわりの花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2 メートルを超え、見ごたえも十分です。畑の周囲は約5キロの散策コースになっていますので、花を見ながら散歩をするのもおすすめです。</p> <p>太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥たちの餌になります。また、ひまわり油も抽出し、料理屋やお菓子作りに活用しています。ひまわりの種を香ばしくローストしたクッキーも人気商品です。</p> </body> </html> どうして位置がずれてしまうのか、さっぱりわかりません。どなたか、教えてはくださいませんでしょうか？よろしくお願いたします。

jiqimao80
お礼率91% (549/600)

CSS
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/09/19 16:53 回答No.1

　article要素は、御存知と思いますが内部にheader,section,footer要素を持つ、あるいは持つと解釈される完結した一塊の文書を示します。 ★何かツール使ってますか? 　下記のように記述してもずれますか?? <body> ＿<header> ＿＿<h1>FOREST STUDIO</h1> ＿</header> ＿<section> ＿＿<article> ＿＿＿<header> ＿＿＿＿<h1>真夏のひまわり畑</h1> ＿＿＿</header> ＿＿＿<section> ＿＿＿＿<h2>タイトル</h2> ＿＿＿＿<p> ＿＿＿＿＿森の工房の隣にある畑は、毎年夏になると満開のひまわりの花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2メートルを超え、見ごたえも十分です。畑の周囲は約5キロの散策コースになっていますので、花を見ながら散歩をするのもおすすめです。＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥たちの餌になります。また、ひまわり油も抽出し、料理屋やお菓子作りに活用しています。ひまわりの種を香ばしくローストしたクッキーも人気商品です。＿＿＿＿</p> ＿＿＿</section> ＿＿</article> ＿</section> ＿<footer> ＿</footer> </body> <body> ＿<article> ＿＿<header> ＿＿＿<h1>FOREST STUDIO</h1> ＿＿</header> ＿＿<section> ＿＿＿<h2>真夏のひまわり畑</h2> ＿＿＿<p> ＿＿＿＿森の工房の隣にある畑は、毎年夏になると満開のひまわりの花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2メートルを超え、見ごたえも十分です。畑の周囲は約5キロの散策コースになっていますので、花を見ながら散歩をするのもおすすめです。＿＿＿</p> ＿＿＿<p> ＿＿＿＿太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥たちの餌になります。また、ひまわり油も抽出し、料屋やお菓子作りに活用しています。ひまわりの種を香ばしくローストしたクッキーも人気商品です。＿＿＿</p> ＿＿</section> ＿＿<footer> ＿＿</footer> ＿</article> </body>

質問者

お礼 2013/09/19 18:00

誠に丁寧かつ詳細なご回答、いつもどうもありがとうございます。先程も、フォントの件、教えていただきありがとうございました。ツール、というのかわかりませんが、ホームページ入門のテキストに付いてきた、「kompozer」という作成ソフト（？）を使用しております。開いてみると、ソースは完全に無地ではなく、docutype等が元から入っており、この部位は色が変わっていてクリックすることができず、削除することも変更することもできません。今、お礼を打っていて思ったのですが、その中にエンコードも含まれているのかもしれません。ご説明にあります長いアンダーバーは、スペースを置く、ということでよろしいでしょうか？