すごいdiv

Posted by: wu
2007年11月20日 19:02
XHTML CSS

あまりに多いので書くのも気が引けるのだけど、body要素直下のすべての内容をdiv要素で何重にも囲ってるサイトが増えてきてますね。これ変だと思うんです。

大抵こんな感じに

<body>
  <div id="wrap">
    <div id="container">
	.
	.
    </div>
  </div>
</body>

wrapper(包み込む), container(入れ物)なんていう名前がつけられていて、さらにすごいdivになると、さらにこの内側に inner(内側)というものが出てくる。

「class名やid名は、デザインに依存しないものが好ましい」と言いうのなら、「包み込む」や「内側」もデザインにかなり近いものだと思うのですが、真面目に突っ込む人は見かけず、このようなHTMLは増加しているようです。

再利用性という点からみても、「内側」という名前の要素郡ならば、移動するときは「外側」と一緒でないとおかしいし、「外側」の中に「内側」という名前以外のものが入る場合も気持ち悪くなってしまうと思うのですが、ここらへんは「決めうちのセット」ということなんでしょうか。

ま、まぁ、すべてを包み込むdivを１つ付けるだけで可能になるビジュアルデザインもあるというのもわかっているんですが、シンプルなサンプルを紹介するときに「最初からこのセットで」みたいに紹介するのはあまり良くない事だと思います。

Newer: 問題: 重要な部分を抜き出せ！ (国語)
Older: floatプロパティのテスト

Comments:32

nobuko 2007年11月20日 20:44

うおっ！同感！実は、このような命名がプロっぽい人たちの規則なのかと自分を納得させようとしていた矢先の記事で（それも問題だったわけだが）、ビックリです。ホントのところは、「インナーって・・・・それ下着じゃねーの？」って思ってたんです。そういうサイトに限って、無駄に div が多かったりするし。

自分の中でひとつの疑問が解決しました！

wu 2007年11月20日 21:42

あ、nobukoさんも気になっていたんですね。
そういえば、インナーはあるけど、アウターは見かけないですね（笑
これらの命名規則は海外サイトから流れてきたものだと予想しています。

海外サイトのデザインを模した、日本のCSS寄りのウェブデザイナーが、解説ソースの中にいれたり、自身のサイトで使い始めたのが発端じゃないかなぁ。それまでみたことなかったし。

どっちにしても、こういう命名ができるのはHTMLをないがしろにしてる人が多いのは確かです。

Lilly 2007年11月20日 22:00

なぜかCSSのテンプレート無料配布（HTMLを知らなくても使えるなんとかかんとか）とかしてるサイトさんに多い気がします。
body直下にdivがあってはいけないという決まりがないと言わればそれまでなのですが、wrapperの中に全要素あるってことはbodyは要らないってことなんだろうかとも思ってしまいます。
最近はdivでくくって・を行頭につけ、brで改行でリストと言い張る人もいるご時世なので、なんとも言い難いのですが……

wu 2007年11月20日 22:16

そうですね。間違ってないといえば間違ってないのですが、文書と見栄えを分けて考えることを妨げてしまうと思いますね。
これがOKならあれもOKとやっていくと、結果的に扱いづらいものが出来上がってしまうんですね。

michael 2007年11月20日 23:12

英語を直訳するとおかしいとか、そういうことは２つの言語の間では付きものだし、いちいちつつくことじゃない気がする。
そういう命名をすることを「HTMLをないがしろにしてる」とするのはちょっと違うと思う。

美しいソース（笑）の話ばかりしているコーダーの趣味ブログと、デザインありきでそれをなんとかコーディングして実現させてるサイトではそもそもの存在意義が違うし、制作にかけられる時間や費用の制約がまったく違う。

>「最初からこのセットで」みたいに紹介するのはあまり良くない。

という結論はとても正しいと思うけど、コメントしてる方々解釈はずれてる気がして、結局「innerがタブー」みたいに読めるのは残念。

wu 2007年11月20日 23:26

直訳じゃなくてもおかしいですよ。命名そのものがおかしいという話ではありません。
HTMLもCSSもそうですけど、美しいソースがどうこう言いたいのではなくて、こういった書き方をしていると、結局大事なところがわからなくなるからやめたほうがいいと言いたいのです。innerがタブーとも言っていません。ちなみに、class="red"もclass="clearfix"もタブーだとは思ったことありません。

それと、シンプルに書くということは「制作にかけられる時間や費用の制約」に関係します。趣味かどうかは関係ありません。ただ、シンプルに書くにはいろいろな方法を知ってないとできないので、それを知らない人はデザインありきになるんでしょう。「ビジュアルデザインありき」でHTMLを勉強している人が多いのなら何もいいませんが。

とおりすがり 2007年11月21日 00:28

多分、このエントリーに誤解が多いのは前半で「body直下の内容を何重にも囲ってる」ことに対する違和感が書かれていて、class名やid名は～の所から唐突に命名についての話になってるからだと思います。

nobuko 2007年11月21日 00:36

> 多分、このエントリーに誤解が多い...

そうかなぁ・・・そういう命名を前提とするような div を作ってるって意味で、必要のない div が増えてるとも言えるわけで、両者は結局同じことだと思いますけど。

とおりすがり２ 2007年11月21日 09:43

> 「ビジュアルデザインありき」で･･･

そりゃそうだろ。ユーザが直接触る部分なんだから･･･
問題になっていることは、そのうちに時間がいろいろ解決してくれるんだろうけど、今は仕方ないんじゃないですか？

あ 2007年11月21日 09:54

以前、システムの開発のときに、顧客が「どうしてもHTMLはこの会社で」と、デザインやユーザエクスペリエンス調査を専門にしてるところのHTMLをもらったことがあるのですが、酷いものでした。

てっぺんから同じようにwrapperがあるのはもちろん、その次がwrapper-inner、container等々ずらずら続いてました。

内部の部品もdiv/spanの嵐で、「<div class="h1"><h1>... 」というものまである始末。

私は勉強不足でこっちの業界はあまり詳しくなかったので、そういうワザもあるのかなぁ、と思ってましたがやっぱりヘンでいいんですよね？(笑

# 「実践 Web Standards Design」買いました。
# 時間が無くて読み込めてないのですが（＾＾；

michael 2007年11月21日 10:42

あ、なんかごめんなさい。本文を批判してるわけじゃないです。
私がひっかかったのはwuさんの意見というよりコメントで「インナーって下着じゃねーの？」っていう流れになったとこ。

それって「wrapってサランラップかよ。」っていうのと同じ。
キリないし、くだらないなぁと。

wuさんの発言じゃないけど、あまりにくだらないコメントがあってそれが本文とずれてると思ってコメントしました。

私もinner使うことがありますが、個人的にはMT3のデフォルトテンプレートの影響です。この命名は別に悪くないと思いますけどね…。

メガネ女子 2007年11月21日 11:31

あ”－　やっぱ気になっている人いたんですね！
わたしは3pingさんと同じように、bodyの下の要素を大きく３つにグループ分けしています。（グループにする必要がないときは省略してます）
これでも内容は３つの箱にはいってるので、中央寄せや固定幅への変更とか楽にできますよね。
どーーーしても背景画像などでボックスが足りなくなったときは泣く泣く#wrapperを使ってます。

dam 2007年11月21日 11:44

>泣く泣く#wrapperを使ってます。
そう。できれば使いたくないんだけど、背景あてるdivが足らないと使います。

wu 2007年11月21日 16:04

皆さんコメントありがとうございます。(はてぶコメントもありがとうございます)

#wrapがCSS用に用意されたボックスなことは誰も異論ないと思いますが、body直下を何重にもしないでも可能なことのほうが多いと思います。中には不可能なものもありますけど、皆さんコメントしてるように、そういうときだけ使ったらいいんじゃないでしょうか。使うか使わないかが問題じゃなくて、考えてHTMLを書いてればそれでいいと思います。

でも、ほとんどの人は#wrapや#containerが最初から頭にあって、他の手段なんて考えもしないんじゃないかなと思うんです。(そういうサイトを沢山見ます。)
#wrapや.innerがディファクトスタンダードだと勘違いしてしまったら、クラス名やID名も考えなくなると思うし、.innerの使われ方を許してしまったら結局HTMLはなんでもありになってしまうんじゃないかな。

#僕は専門学校でWebデザインを教えているんですが、早いうちに自力でCSSハックを覚えた生徒ほど、綺麗な書き方からどんどん遠ざかってしまいがちで、考えたり試行錯誤しなくなっちゃうんですよね。

wu 2007年11月21日 16:12

># 「実践 Web Standards Design」買いました。
># 時間が無くて読み込めてないのですが（＾＾；

「あ」さん、ありがとうございます!!
分厚いでの漬物石や枕としても使えるように作られていますので、かわいがってください。

Heath 2007年11月22日 00:46

仕事や複数人での開発ならなおのこと命名規則は大事だと思います。意味のあるその場限りではない命名をすることで、引継ぎで担当が替わったりしても、理解に無駄な時間がかかることを防げますし。

inner という命名がベターかどうかは、例えばその HTML を扱うデザイン会社等で、 inner をどういう要素に使うのか仕様がちゃんと決まっているなら問題はないと思います。

でも、すべての雑多な形容詞や名詞について仕様をきめておくのは非現実的なので、仕様が無くても一目でわかるような命名をしたほうが良いのは自明ではないでしょうか。

殆どのプログラミング言語の場合、｢これを命名のテンプレートにしておけば、大抵の開発者は理解出来るよ｣という伝統的な命名法がいくつかあるので効率化されているのですが、HTMLの場合そういうのがまだ一般化されていないので自分で考えないといけないですよね。

できるだけ苦労したくないなら、誰でも理解でき、誤解されにくい名前をつけるのは more better ではないでしょうか。

また、google 等が提供しているサービスの中には、特別なフォーマットにしたがっていない一般の HTML からマークアップや class や id を頼りに強引に情報を解析してメタデータとして利用しているものもあります。このようなサービスは以後増えていくと予想されますので、SEO 等の観点から考えても意味のある名前をつけることは無駄にはなりません。

具体的にこれを決めて楽をしようという、microformats みたいなのもあります。(対応しているサービスもあります。)

nobuko 2007年11月22日 01:19

別に「下着」を強調したかったわけではないんだが、そんなの読んでてわかるだろ？話の流れを変えたつもりもない。
誤解を招いたのなら謝るけど、もっと行間を読めよ。

Heath 2007年11月22日 01:44

nobuko さんのフォローになるかどうかわかりませんが、「下着じゃねーの？」ってのは、「インナーって・・・・それなんのこといいたいんだよ？」っていう疑問を含んでいると思います。別に下着じゃなくても、意味の幅、悪く言えば誤解の余地のある単語を命名に使ったことで、理解する人にひと手間かけさせてしまってるわけです。

もっと言えば、 inner や container といった言葉は、｢あそこにあるあれのなかのあれ｣のような文章にも通じるものがあります。なんというか、代名詞的なんです。

そういう命名や、それを使って意味の理解しにくい div を大量生産することは、自分のためにも共同作業者のためにも、はたまたどこにいるかわからない3次的な利用者のためにも、あまり能率的じゃないよねってことじゃないですか。

# あーくそ全然フォローになってねー気がする

kawachi 2007年11月22日 02:35

うーん。。「inner」とか「wrapper」といったような名前は、「やむを得ず必要だけど、せめて特定の見た目の効果に依存しないような名前にしておこう」といったHTMLへの配慮も感じられますよね。「包括」や「内側」といったニュアンスであれば、例えその要素が本来必要のないものだとしても、HTML単体で見たときに一応の意味合いは通じるので。もちろん突っ込みどころはあるのですが。。

ただHTMLをないがしろにする人であれば、むしろもっとビジュアルに直通するような「bg」といったクラス名を付けるのではないでしょうか。

またLillyさんのコメントに「なぜかCSSのテンプレート無料配布とかしてるサイトさんに多い」とありますが、これは後々スタイルの指定が行いやすいよう、HTMLにある程度の柔軟性を持たせておこうという意図にほかならないと思います。

そしてこれは、無料配布のテンプレートに限らず、実際の案件にも当てはまると思います。実際僕も、ある程度後々のスタイルの変更に応じやすいように考慮した結果、divを2重にしてinnerやsection-innerといったように、ほかの語と組み合わせてこうしたクラス名を用いることが多々あります。

wuさんのコメントにある「考えてHTMLを書いてればそれでいい」という意見がすべてだとは思います。ただこのエントリーとコメントを読んだときに、michaelさんが主張していることと同じ様な感想は僕も抱きました。

nobuko 2007年11月22日 03:51

> wuさんのコメントにある「考えてHTMLを書いてればそれでいい」という意見がすべてだとは思います。ただこのエントリーとコメントを読んだときに、michaelさんが主張していることと同じ様な感想は僕も抱きました。

これが、わたしのコメントに対する評価なら、気分を害されたことは謝る。

> ただHTMLをないがしろにする人であれば、むしろもっとビジュアルに直通するような「bg」といったクラス名を付けるのではないでしょうか。

これはわたしに対する批判なのか、この記事に対する批判なのか？よくわからなない。

> そしてこれは、無料配布のテンプレートに限らず、実際の案件にも当てはまると思います。実際僕も、ある程度後々のスタイルの変更に応じやすいように考慮した結果、divを2重にしてinnerやsection-innerといったように、ほかの語と組み合わせてこうしたクラス名を用いることが多々あります。

それは、あんたの案件で当てはまっても、ここで問題になってるような、抽象的な一般論には当てはまらないんじゃないか？わたしだって、具体的な案件を想定したら、妥協するよ。この記事では、そもそも、そんなことを問題にしてるんじゃないだろ？

Heath 2007年11月22日 05:19

第三者が意見するのもよくないと思いますが、あえて言うと、こういった場で文章のとらえ方に人それぞれ差ができるのは当然のことです。

だからといってとらえ方の差そのものについて議論して、wu さんがあげてくれた話題について具体的になにか得るものがあるんですか？

確かに議論することにも意味はありますけど・・・ケンカ腰になるのは大人げないよ・・・落ち着こうぜ？

wu 2007年11月22日 06:55

nobukoさん、
kawachiさん、
Heathさん、コメントありがとうございます。

ここまでのコメントを改めて読んで、みなさんそう意見は異なっていないと感じましたが、命名に関して僕が突っ込んだのでそこでこじれてしまったようです。
body直下をすべて包括するdivなので、名前を付けるとしたら#wrapや#all, #containerというのは、苦しいながらもそれ以外に思いつかないので仕方ないとおもいます。(#documentというのも見たことあります)。
nobukoさんも、命名だけ抜き出して指摘しているのではなく、その前にdivの存在を疑問に思ったうえで苦し紛れな名前を引き合いに出したのだと思います。

考えた上で#wrapを追加するのなら問題ありません、僕もたまにやります。もしそれでも解決できないのであれば、その内側にもう１つdivを用意することもあるかもしれません。（今はまだないですが）
でもやっぱり、勉強してる人には受け売りで使ってほしくないですね。それが必要になるまでの過程が理解できればいいのですが。

あと.innerですが、これは#wrapより性質が悪いと思います。
ある要素の内側にinnerを使うとしたら、同類のデータには必要なくても.innerを付けたくなるでしょうし、そうなると、全体的に文書を抽象的で実際の文書の性質とは無関係な名前をつけて良しとなっていくように思えます。

Heath 2007年11月22日 08:20

> それが必要になるまでの過程が理解できればいいのですが
妥協や所謂 dirty hack に相当するものは、自分で何故そうするのかわかってやってるかどうかが上達の為には近道ですよね・・・

僕は何度か、(entry とか date とか title とかできるような)妥協しなくても良い所で inner のような div を大量に使っている配布テンプレートを見たことがあります。そのテンプレートの色をカスタマイズしたくて、CSS のわからない知人が苦戦していたんですが、class と id を具体的なものに書き換えてあげただけで、かなり理解が進んでいました。

このエントリを読んで最初に想像したのはそういうのです。

メガネ(腐)女子 2007年11月22日 09:16

わ、コメ欄がすごい成長してる（笑
みなさんのコメントすごい勉強になります。divひとつとっても色々な考え方があるんだなぁ～。
かれこれ2年ぐらい3ping.org(前はbazookaでしたが)を購読してますけど、wuさんがこういう記事書くのって珍しいですね。色々と邪推してしまいます（笑

wu 2007年11月25日 21:48

Heathさん、メガネ女子さん、コメントありがとうございます。

Heathさん
そうですね、HTMLって文書のもっともシンプルな基本構造からマークアップしはじめて、次に、各エレメントの関係を補強するようにノードをまとめていくっていう過程が大事だし、考えなければいけない部分だと思っています。#wrapが必要になるのはいいとしても、それはマークアップの最終段階に必要になって追加されたものって認識できないと、長く付き合えるHTMLを書くことはできないですね。
#匿名になっていたのを修正させていただきました。

メガネ女子さん
このエントリーを書いてよかったです。
今後生徒から#wrapや#innerのことを聞かれたときには、説明と一緒にこの記事のURIを見てもらって、コメントまで読むように勧めることができました。

Anonymous 2007年12月 2日 05:35

デザインを前提としたサイトは、むしろFlashなんかでHTMLから離れる事こそ健全だと思う。HTML+CSSで曲芸するよりも

龍宮 2007年12月 3日 18:40

div1つ取っても、ここまで議論になる物なのかと驚いております。
申し遅れました。3ping.orgを購読しながらウェブの勉強をしている龍宮と申します。

僕も以前はdivの中にまたdivを入れ・・という作り方をしていました。
これは頭の中にデザインありきで作っていたからなのかと今では思います。
先にデザイン画を(チラシの裏にでも)描いて、
divを使うことを考えたときにデザイン画を見ながら考えていたので、
id名やclass名もデザインありきの名前になり、入れ子にもなってしまったのでしょう。

今では極力デザイン画を描いた後、HTMLを書いて構造に適したid名やclass名を考えるようにはしているつもりですが、混乱することもしばしばです。精進が足りませんね。

+ 実践 Web Standards Designを購入しました。
+ 読み込んで、wuさん含む著者の方々のテクニックを身につけたいと思います。

蒲田行進曲 2007年12月 4日 18:16

> 日本のCSS寄りのウェブデザイナーが、解説ソースの中にいれたり、自身のサイトで使い始めたのが発端じゃないかなぁ。

そうそう、全く同感です。やっぱり書籍についてるサンプルの影響だと思います。wrapper とか出まくりですからね･･･。

wu 2007年12月 7日 09:59

書き込みありがとうございます。
>Anonymousさん
CSSの曲芸...Flash? ハテ (ﾟ_｡)?

>龍宮さん
本を買ってくださってありがとうございます！
僕も龍宮さんと同じような作り方をしています。
ビジュアルデザインを考えているときに、CSSのことを考えるあまり
、どこか妥協しそうになるときがあるのですが、そういうときに#wrapperみたいなのを登場させています。
CSSの実装が進めばこんなつまらないことを悩まなくて済むようになるんでしょうね。

>蒲田行進曲さん
なんですかその名前は！
テーテレンテーン　テテテ　テーテレテーンテテテ♪
テーンテーンテーンテテンテーン♪　今日も駅で聞いてきました。
（書籍名のところは伏せさせて頂きました。

MaKOTO 2007年12月 7日 14:51

こんにちは。
海外の50サイト程調べてみました。やはり#wrapperや#wrapが比較的多い様でしたが他にも色々ありました。

page,canvas,doc,case,cadre_blank,holder,contentaussen(contentoutside)
universe,BodyContentFrame 等　あとはxxx-wrapperやxxx-containerもありましたね。

命名については海外でも右往左往しているんでしょうかね？

wu 2007年12月 9日 05:13

MaKOTOさん、こんばんは。
わざわざ調べて頂いてありがとうございます！
universe, holder　なんてのもあるんですね。
#bodyなんてのも多いのかなぁと思いましたが流石になさそうですね。

ただ、他の方にも(はてぶコメも含め)コメントでも指摘を頂きましたが、問題は命名ではないんですよね。短く、言葉足らずな記事本文も悪いのですが、「そのdiv本当に必要？」というタイトルで、マークアップの順序と考え方、CSSの機能的な弱点→妥協策、という順序で主張を支えたら、もっと率直に僕の言いたいことが伝わったかなぁと感じています。
もしくは、もっとわかりやすく「そのすごいdiv、必要なければ書かないでいいのだよ」でよかったなぁ。

wu 2008年8月24日 16:42