divタグで位置を指定したい

解決済

質問者：elkheart
質問日時：2012/08/06 23:01
回答数：1件

お世話になります。
ホームページを作成しています。
写真がメインのページになりますので、基本的に文章は余りありませんが、
左下に少し更新用の文章があるようにしたいです。
この場合divタグを使用して下に持ってくる場合はどのようにすればよいのでしょうか？
マージンで調整したのですが、文字が増えてくると下に飛び出したりして不安定になって困っています。
お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2012/08/07 09:08

基本的なこと

『DIV要素(とSPAN要素)は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』ためにあるのです。
　よって
「divによって新着情報であるとマークアップされている要素をウィンドウの左下に常に表示したい」
　と考えましょう。

　新着情報は通常footer内に存在することが多いでしょう。とすればマークアップはHTML5的に記述すると
<body>
　<header>
　</header>
　<section>
　</section>
　<footer>
　　<aside>
　　　<h3>新着情報</h3>
　　　<ol>
　　　　<li></li>
　　　　<li></li>
　　　</ol>
　　</aside>
　</footer>
</body>
　とかになっていると思います。HTM4.01,XHTML1.0,XHTMLでしたら、それぞれ<div class="header">のようになるでしょう。

[HTML4.01]でしたら、
<body>
　<div class="header">
　</div>
　<div class="section">
　</div>
　<div class="footer">
　　<div class="aside" id="latestInformation">
　　　<h3>新着情報</h3>
　　　<ol>
　　　　<li></li>
　　　　<li></li>
　　　</ol>
　　</div>
　</div>
</body>
として、スタイルシートは
#lastInformation{
　　width:360px;
　　osition:fixed;
　　bottom:0;
}
#lastInformation h3{
　　font-size:1.1em;
　　margin:0;line-height:1.4em;
}
とかになります。
　★ただし、この場合div.footerのpositionがstaticであることが必要です。