divの入れ子を多用してページをつくることはださいのでしょうか？

Question

CSSで２カラム左メニューレイアウトのサイトを作成しております。

レイアウトはできたのですが、
ページ内にいくつかdivでボーダーのないボックスをつくり
写真をいれたり文章をいれたりします。
１ページのCSSレイアウトしたコンテンツ部分のdivの中に
５つほどdivが入れ子ではいる予定です。

インターネットでdivの多用について調べると
ださいだの、わかってないだと書いてあります。

でもdivを多用しなければ、
例えば写真の横にテキストを配置したり、
よこにイメージを配置したいときに
テーブルやHTMLタグをつかわないといけないので、
余計ソースが汚くなるんではないでしょうか？

私は、CSSを本格的に勉強し始めてほとんど初心者ですので、
詳しいことがわかりませんので、もしご存知の方おられましたらご意見お待ちしております。

reverie013 · Accepted Answer

うわー本当に自分しつこすぎてすみません！
No.11の訂正です。
重大な間違いを犯していました。

.clearに
float:clear;
と書いていますがとんでもない大嘘です。
正しくは
clear:both;
でした。

間抜けすぎる。。。

reverie013 · Answer

度々しつこくてすみません……！(汗) さっきご紹介したCSSはかなりくどかったのでちょっとスッキリさせました。 ---test.css--- div,p{ 　　color　　:white; 　　padding　　:1%; 　　margin　　:1%; } .div{ 　　border　　:solid 1px black; } .left{ 　　float　　:left; 　　width　　:45%; 　　background-color　　:red; } .right{ 　　float　　:right; 　　width　　:45%; 　　background-color　　:blue; } .clear{ 　　float　　:clear; 　　background-color　　:green; } ---ここまで--- ---test.html(訂正部分のみ)---

　　　　文章Ａ　　

　　　　文章Ｂ　　

　　　　文章Ｃ　　

　　　　文章Ｄ　　

　　　　文章Ｅ　　

　　　　文章Ｆ　　

　　文章Ｇ

---ここまで--- あんま変わってないですね！´д｀；スミマセン

reverie013 · Answer

No.8に追伸。

すみません、読み返していて気が付きました。
それで試したらって単位が書いてない……！！

50%で試したら、ということでした。
失礼いたしました。

あと余計なお世話かもしれませんが、
コメントがちょっと飛び飛びのようですね。
回答されている方には皆様に、「回答ありがとうございます」
の一言だけでも返信をした方が良いと思いますよ～。
これから付けるところでしたら大変失礼致しました。

noname#83877 · Answer

＞よろしければどのようなＣＳＳになるのか
そうですね。一例ということであれば

dtに入る画像の縦横が200px×150px固定での話ですが

dl {
width:500px; /* 特に必要はありませんが、テキストとの兼ね合いです */
}

dt {
float:left;
width:200px;
}

dd {
height:auto !important;
height:150px;
min-height:150px;
}

こんな感じでどうでしょうか？

将来的には

dt {
display:run-in;
margin-left:-200px;
}

dd {
padding-left:200px;
}

のようにもできると思います。

reverie013 · Answer

私もＣＳＳレイアウト初心者なので見苦しいコーディングですが。。。 floatのサンプル書いてみました。（自分も1度くらいしか使ったことなかったのでかなり手探りな内容です） ---test.css--- p{ 　color　:white; } .div_l{ 　float　:left; 　width　:45%; 　background-color　:yellow; 　border　:solid 1px black; 　padding　:1%; 　margin　:1%; } .div_r{ 　float　:right; 　width　:45%; 　background-color　:orange; 　border　:solid 1px black; 　padding　:1%; 　margin　:1%; } .left{ 　float　:left; 　width　:45%; 　background-color　:red; 　padding　:1%; 　margin　:1%; } .right{ 　float　:right; 　width　:45%; 　background-color　:blue; 　padding　:1%; 　margin　:1%; } .clear{ 　float　:clear; 　background-color　:green; 　padding　:1%; 　margin　:1%; } ---ここまで--- ---test.html--- 　　　　　サンプルソースコード　　

　　floatのテスト　

　　　文章Ａ　　

　　　文章Ｂ　　

　　　文章Ｃ　　

　　　文章Ｄ　　

　　　文章Ｅ　　

　　　文章Ｆ　　

---ここまで--- 良かったらまるっとコピペでどんなもんか見てみて下さい。ポイントは横幅ですかね。。。 ↑で　width:45%;　とかしてますけど、なぜかと言えばそれで試したら線の幅とか色んな要素でトータル100%を超えてしまって、横並びにならんのです。難しいですねえ。うーーん、我ながら稚拙な＾＾；

reverie013 · Answer

話はずれるかもしれませんが、レイアウトに関して言えば
画像とテキストを並べるのはfloatでできると思いますよ。
（イメージ同士も含む）

参考：　http://www.tagindex.com/stylesheet/img/float.html

テーブルやHTMLでなんて力技を持ち出さなくても。＾＾；

意味合いを考えて適切なマークアップをして、
それから必要に応じて、となると思いますけどね。

taloo · Answer

tableを使わずに、と考えられているので、個々のHTMLタグの意味については調べられているでしょう。 divというのは、その部分をグループ化するという意味があります。入れ子にするのは構いませんが、グループ化したものを全く同じ組でさらにグループ化、グループ化、としていくのは、きれいな組み合わせだと思いますか？もちろん、たまたま同じ組でグループ化してしまった、ということもあるかもしれません。たとえばある季節、月ごとにグループ化すると、

このとき夏と６月のグループがイコールになりますが、これは「たまたま１枚しかなかった」という理由のためです。今回されようとしている方法は「たまたま」ではないですよね。

そういうのはダメだというのがHTML＋CSSの考え方です。 > でもdivを多用しなければ、 > 例えば写真の横にテキストを配置したり、 > よこにイメージを配置したいときに > テーブルやHTMLタグをつかわないといけないので、 > 余計ソースが汚くなるんではないでしょうか？ tableタグが汚いのではなく、デザインのためにタグが使われることが汚いのです。

をデザインのためだけに使うのであれば、やってることは変わりません。もちろんでも

でも同じです。質問者さんだけが技術的にできないのか、誰がやってもできないのかは質問文からはわかりません。本当に誰がやってもできないのであれば、それもやむを得ませんが、デザインを目的としたタグを使わないのもきれいなHTML文書を作る第一歩だと思います。初心者脱出を目指してがんばってください。

noname#83877 · Answer

以下はタグの意味を理解し、HTMLのマークアップをしっかりやった上での話です。最適化の観点から言えば使わないほうが良いのはたしかだと思います。ですが、今のhtmlとcssの規格ではどんなレイアウトでも100%div無しでできるわけではありません。これは現状では仕方がないことです。それでも、divを使わずに目的のレイアウトができるのであれば削ったほうがいいと思います。仕事の場合はシステムや管理の面から必要なくてもわざとdivを使うこともあります。もしも本格的にhtmlとcssをやろうとされているのであれば、個人サイトに関しては、限界までdivを削るためのcssの指定方法を模索していった方が後々で役に立つように思います。（本当にしっかりコーディングされたhtmlの1つのdivを削るのはかなり大変なので）ここからはHTMLのマークアップをしっかりやらない時の話です。 SAYKAさんと少しかぶるところだと思いますが＞写真の横にテキストに関しては時と場合によります。以下は画像の横にテキストが来る場合のHTMLです。それぞれ状況と意味が異なっています。 ■サンプル1

: 説明のテキスト

■サンプル2

普通のテキスト

■サンプル3

普通のテキスト
普通のテキスト

サンプル1は画像とそれに関する説明が横に並ぶ場合、サンプル2は画像と普通のテキストの場合、サンプル3は画像と普通のテキストが規則的に複数存在し、まとめられる場合です。それぞれの持つ意味によってHTMLの書き方が違いますよね？タグが入れ子になればなるほど、divはわざわざ追加する必要がなくなってきます。サンプル2で

普通のテキスト

のようにdivを追加しなければ不可能なレイアウトがサンプル3ではdivを追加することなく実現が可能です。ですが、これはどんなものでもわざと多くタグを使う型にはめれば良いという例ではありません。あくまでちゃんとマークアップしない結果としてdivを多様することは避けるべきという例です。

ORUKA1951 · Answer

「ださいだの、わかってないだと書いてあります。」の言葉だけを捕らえて、非難したり、どうして・・というのは問題です。　そのセリフが出る背景には「tableで配置するのは間違っているから、divで配置する」という思考では、確かにHTML上は正しくても、おかしいんじゃないの・・・という意味で使われていると思います。＞でもdivを多用しなければ、例えば写真の横にテキストを配置したり、よこにイメージを配置したいときにテーブルやHTMLタグをつかわないといけないので、余計ソースが汚くなるんではないでしょうか？　という考え方の根本は、やはりおかしいです。　それならdivはひとつもいらないし、いってもひとつ。　はじめにデザインありきで、内容が伴ってない。HTMLはそもそも文書構造を記述するもので、デザインのためではない。　ただ、欠点もあって、XML/XHTMLと異なり、使える要素が限られているので、

なんてかけないのですから、無理からぬところはあります。　たとえば、

: この写真は; 撮影日
: この写真は***; 撮影日

: この写真は; 撮影日
: この写真は***; 撮影日

と書かれているHTMLにおいて、下のdl(定義リスト)をページの左端に200pxで表示し、それらは説明文は写真下に撮影条件はその下に小さな文字で、　次のdlについては、中央に、適当な幅で表示し、説明を写真の右に、撮影条件を写真下に右寄せで・・なんて配置をしようとすると、子孫セレクタや兄弟セレクタ、属性セレクタを活用すると、divなんてひとつもいらないですよね。　「divを多用するなというのは、divを使わなくて済むところにdivを使うな」という意味ですよ。

SAYKA · Answer

全然問題ないんじゃないかな
ただ、divがblock要素だって事を認識していないで沢山使っているというなら問題が有るね。
パーツとして配置するというなら通常はspanを用いる方が良いけれど、多分使い勝手はdivの方が上だろうね。

あと、画像の横にテキスト配置なんてそれこそinline要素の使い方。(区切り線が無いなら　の話)


ソースの綺麗汚い以前に、目的の配置ができる事の方がまず重要。
(tableで画像を巧みに配置する古い技は見た目重視だったからに他ならない)
伝えるのが目的。その構築方法を整理するのは余裕があったらやれば良いんじゃないかな。

divの入れ子を多用してページをつくることはださいのでしょうか？

うわー本当に自分しつこすぎてすみません！

度々しつこくてすみません……！(汗)

No.8に追伸。

＞よろしければどのようなＣＳＳになるのか

私もＣＳＳレイアウト初心者なので見苦しいコーディングですが。

話はずれるかもしれませんが、レイアウトに関して言えば

tableを使わずに、と考えられているので、個々のHTMLタグの意味については調べられているでしょう。

以下はタグの意味を理解し、HTMLのマークアップをしっかりやった上での話です。

「ださいだの、わかってないだと書いてあります。

全然問題ないんじゃないかな

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング