ブロック要素を含むボックスを作るときの注意点は？

現在お店のHPを製作中です。
　で、リストや<h>や<div>の入ったボックスを組むのに<p>タグでくくったのですが、うまくいきませんでした。
　これはブロック要素をインライン要素でくくってはいけないということだったようです。
　そこで、ボックスの中にはブロック要素はなるべく入れないほうがいいのでしょうか？それとも同じくブロック要素のタグでくくってやれば特に問題はないのでしょうか？
　なにぶんこの件で初めてブロック要素・インライン要素という言葉を知りました＾＾；
　他にも注意するところがあったら教えてほしいです。
　よろしくお願いします。

No.1 ベストアンサー 回答者： Werner 回答日時： 2006/06/06 23:28

> リストや<h>や<div>の入ったボックスを組むのに<p>タグでくくったのですが、うまくいきませんでした。

> これはブロック要素をインライン要素でくくってはいけないということだったようです。
p要素はブロック要素です。
ただ、p要素はブロック要素ではありますが
中身にブロック要素を含むことができません。
それにpは段落なので中にhがあるのは意味的にも変でしょう。
http://www.ne.jp/asahi/minazuki/bakera/html/refe …

ブロック要素のネスト(入れ子)は
外側の要素がブロック要素を含むことができるdivなどであれば問題ありません。


もちろん、インライン要素の中にブロック要素を含むことはできません。

この回答へのお礼

な・なるほど・・・<p>タグもブロック要素ですか・・・。。
ありがとうございます＾＾；

お礼日時：2006/06/07 08:42

No.6 回答者： partita 回答日時： 2006/06/09 19:05

＞ボックスをラインで囲む技術のことはなんと言うんでしょうか？

CSSで「border」を設定するだけです。
ちなみに余白は「margin」「padding」と2種類あります。
marginはborderよりも外側の余白で、背景色や背景画像は適用されません。
paddingはborderより内側の余白で、背景色や背景画像が適用されます。
近接するボックス同士の間隔調節は前者を利用します。

下記も参考に。

参考URL：http://adp.daa.jp/tech/20040709-1.html

この回答へのお礼

回答ありがとうございます。
つまり、私がボックスとおもっていたのはボーダーだったわけですね。。
ありがとうございました。

お礼日時：2006/06/10 15:47

No.5 回答者： awasumi 回答日時： 2006/06/08 14:26

http://www.kanzaki.com/docs/html/htminfo14.html# …から引用
<div class="section" id="sec2">
<h2>第2節：りんごの香りについて</h2>
<p>りんごの香りは何となく甘酸っぱい…</p>
<p>しかし、これに対してバナナの場合はもっと
甘い香りがする…</p>
<p>このことからも、私の好きな果物が
りんごであることがよく分かるはずだ…</p>
</div>
のようにひとつのまとまり＝グループ　を『ボックス』と呼ぶと考えるといいと思います。

pはブロック要素となり、そのブロック要素をdiv要素で囲むということです。

私も最初の頃はちんぷんかんぷんでしたよ...○rz

参考URL：http://www.kanzaki.com/docs/html/htminfo14.html# …

この回答へのお礼

なるほど、、分かりやすい説明ありがとうございます。
では、ボックスをラインで囲む技術のことはなんと言うんでしょうか？

お礼日時：2006/06/08 23:25

No.4 回答者： partita 回答日時： 2006/06/07 17:32

「ボックス」という言葉は専門用語として定義されていないと思いますし、「ボックス」と聞いて想像するものも個人によって異なると思います。

推測するに、あなたの考えている「ボックス＝まとまり」は、すべてdivで囲むと解決するのではないでしょうか。

参考URL：http://www.kanzaki.com/docs/html/element-level.h …

この回答へのお礼

ありがとうございます。
CSSなどの解説サイトではボックスといっていたので、それでいいと思ってましたが、違うんですね？
正しく伝えるにはなんといったらいいんでしょうか？

お礼日時：2006/06/08 09:02

No.3 回答者： awasumi 回答日時： 2006/06/07 11:15

ここのHTML Project2というフリーソフトはいかがでしょうか？

http://www1.ttcn.ne.jp/~kaneto/
基本的には手入力になりますが、キー入力支援がついているので、タグ等を完全に覚えていなくても使うことができます。
スタイルシートの編集ももちろんできます。

あと文法チェックとして
http://htmllint.itc.keio.ac.jp/htmllint/htmllint …
をお勧めします。
マイナスにならないようにするだけでもいいと思います。

No.2 回答者： goulan 回答日時： 2006/06/07 02:46

ブロック・インライン要素に関しては No.1さんの通りです。

他 注意点として：
タグ打ちなさっているようですが、専用ソフトでしょうか？ html作成支援系ソフトはお使いになったことありますでしょうか。支援ソフトには文法検証の出来るものもありますし、タグ入力支援するものもあります。利用なさると良いかと思います。スタイルシートに関しても同じです。

実際に表示してみると、ブラウザによってレンダリングが変わってしまう場合があります。お店のHPということですので、顧客は不特定多数ですから、各種ブラウザ（視覚系）でほぼ同じレンダリングになるように検証してから uploadをお勧めします。

この回答へのお礼

ふむふむ。。。
ありがとうございます。
使っているのは「TTTEDIT」というフリーソフトです。
CSSは別に「TeraPad」というフリーソフトを使っています。
これでいいでしょうか？
お金がないので基本的にフリーソフトで済ませたいですが、お勧めがあったら教えてください

お礼日時：2006/06/07 08:45