デザインのための空要素divタグは有りか、無しか

webページのデザインのために、divタグにwidth,height,background-imageなどを設定して「見た目」を調整しています。
このdivはデザインを目的にしており、コンテンツ的内容は一切ありません。

だいぶ前に「空要素はよくない」と覚えた記憶があり、それからはfont-size:1pxにして &nbps; を含めるようにしていました。font-size:1pxにしているのはによって高さなどが影響を受けないようにするためです。

最近いくつかのサイトを見ているときにを含めない<div class="bg1"></div>という空要素に出くわして、これでも良いのか？と思った次第です。

実際 font-size:1px の指定するということは、場合により否定するコードも書く必要があり、煩わしく感じています。を書かなければ、font-size:1px指定もいりません。

ベストプラクティスは変化すると思いますが、現在（2016年11月）において、デザインのための空要素というのは、ありでしょうか？なしでしょうか？

回答4件

ベストアンサー

一通り読ませていただいた上で、タイトルの

デザインのための空要素divタグは有りか、無しか

について回答いたしますと、私個人としては「有り」だと考えています。
(この手の話は解釈の問題かと思いますので、私の現時点での解釈を提示いたします)

「空要素は良くない」について

だいぶ前に「空要素はよくない」と覚えた記憶があり

については文脈によって意味が大分変化してしまうので、どのような意味で述べられていたのかは不明ですが、
よく言われることとして
「表示を変化させるためだけの理由でタグを入れるのは良くない」
という事はあります。

すなわち、「文字を大きくしたいからh1要素で囲む」のような話です。

html は文章に対して意味づけをするためのものですから、
「h1はあくまで見出しにつけられるべきであり、文字サイズを変化させるために利用されるべきではない。」
という事ですね。

先ほどの、空要素は良くないというのは、この話の延長したものとして、
「html は文章に対して意味をつけるものなのだから、デザイン目的だけのタグは入れるべきではない」
として、空の要素を入れるのは本来の使い方から外れているよね、ということを
述べられていたのではないでしょうか。

そうであれば、その意見には一部同意できます。
確かに、基本的にはデザインに関しては CSS で制御し、HTML には文章構造のみがあるのが望ましい形です。

`div`と文章構造の関係

ところで、前項の内容は HTML の「文章構造を作る」部分のみを取り上げて議論した結果であると、
私は考えています。

現在では HTML は単純に文章構造を表すためのものではなく、
(実質的にですが)WebサイトやWebアプリケーションの骨格を表すために利用されているケースが多くあります。

この場合、文章構造に関係ない要素が必要となりますが、
そのために用意されたのが div (spanについても同様)ということになります。

実際、HTML(WHATWG Living Standard)の div に関する項（リンクは日本語訳版）を参照すると

div要素は、一切特別な意味を持たない。

とありますから、これは文章やエリアに対して CSS の効果をかけたり、骨組みを作るのに利用して良いということになります。
(そうでなければ、わざわざ意味を持たないタグを定義している理由に説明がつきません)

また、divは特別な意味を持たないのですから、彼は文章構造の観点から言えば、
存在していないも同然の状態とみなされるはずです。

上を踏まえた結論

スタイリングをする際にdivを必要とした場合、
<div></div>と<div> </div>のどちらが良いかと言えば<div></div>の形でかまいません。
これは、文章構造にとっては入っていようがいまいが変わらない存在であるためです。
よって、div(あるいはspan)については、デザインのための空要素は「有り」という考えに至っています。

むしろ後者は という文章構造にとって邪魔なものを入れていることになるので、
良くないのではないかと考えます。

投稿2016/11/17 18:02

ezaki

総合スコア204

回答へのコメント

退会済みユーザー

2016/11/18 00:35

回答ありがとうございます。 HTMLは意味のある文章でデザインに用いてはならない、という部分を自分ルールにしてしまったかもしれません。なにしろ昔のことでルールだけ決めて、理由を忘れたという感じです。ご指摘の通り だけ入れるのも文章としての意味が無いので<div></div>でもいいですね。ちょっとスッキリしました。^^

だいぶ前に「空要素はよくない」と覚えた記憶があり、

どういった文脈で書かれた内容なのか、またその「空要素」の定義がしっくりきませんね･･･。私は空要素と聞くとbr,hr,img,input,link,metaなどの要素をを思い浮かべます。

【HTMLタグ/HTMLの基本/空要素 - TAG index】
http://www.tagindex.com/html_tag/basic/empty.html

【XHTML における空要素の扱い - vivid memo】
http://d.hatena.ne.jp/vividcode/20091002/1254492870

<div></div> などについては古いブラウザのバグなどにそういったものに起因するものがあったのかもしれませんが、少なくとも私はそのバグに当たったことが無いと思います。（tableレイアウトの時代はだったり1px GIFとかが必要だったのでそういうことですかね？）

デザインのための空要素

無くてできるなら無いほうがいいとは思います。::before ::after 擬似要素もあるのでどうしても必要、ということはあまり多くないと思います。（必要なら使います）

投稿2016/11/17 17:41

kei344

総合スコア69158

回答へのコメント

退会済みユーザー

2016/11/18 00:30

回答ありがとうございます。空要素という表現が適切ではなかったもしれませんが、中身のないタグのことです。あ、たしかにtableのtdタグでは何か文字を入れなければならなかったので、それが「必要」と思ってしまった理由かもしれません。たしかに最近は疑似要素も使うようになってきて今回のような使い方は減ってきました。