![退会済みユーザー](https://ddjkaamml8q8x.cloudfront.net/profileImages/deletedUser/icnUserSample.jpeg)
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月)において、デザインのための空要素というのは、ありでしょうか?なしでしょうか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
![guest](/img/icon/icnUserSample.jpg)
回答4件
0
ベストアンサー
一通り読ませていただいた上で、タイトルの
デザインのための空要素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
総合スコア204
0
だいぶ前に「空要素はよくない」と覚えた記憶があり、
どういった文脈で書かれた内容なのか、またその「空要素」の定義がしっくりきませんね・・・。私は空要素と聞くと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
総合スコア69574
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
![退会済みユーザー](https://ddjkaamml8q8x.cloudfront.net/profileImages/deletedUser/icnUserSample.jpeg)
![guest](/img/icon/icnUserSample.jpg)
0
ベストプラクティスは変化すると思いますが、現在(2016年11月)において、デザインのための空要素というのは、ありでしょうか?なしでしょうか?
心情的には仕方ないと思いつつも、あるべき姿では決して無いので回答としては無しです。
この回答は変化することはないと思います。
[HTMLの歴史] HTMLの誕生からHTML5までをザッと要点紹介 - Naverまとめ
よく纏まっているので、これをベースに考えてみます。
出発点は研究資料の文書を電子化という所で、
HTML本来の役目から考えると、空要素どころか、無駄なタグは一切あるべきではないというのが最もシンプルな回答です。
逆に文書的に中身が空やスペースが入って意味があることならば、積極的に採用すべきです。
分かりやすい箇所はテーブルの空のセルとか…
HTML5現在、ブログや企業サイト等ではヘッダーやフッター、サイドバーが当然のようにあり、
新世代に対応する文書の在り方に移り変わっているように見受けられますね。
ある程度の妥協は仕方がないにしても、どれだけの必要最小限のタグで実現出来るか実装者の腕の見せ所ではあるでしょう。
しかし、HTMLはその成り立ちや役割からすると信じられない程軽視されているように見受けられます。
プログラマーにとって本業はプログラミングなのでHTMLごときは片手間にすべきもの…
デザイナーにとっても本業はデザインなのでHTMLごときは片手間にすべきもの…
世の中は妥当ではないHTMLで溢れかえってます。
3大他人の実装を見てはいけないものの例です(他の2大はPHPとJavaScript)
空要素はよくない
を入れる
IE6辺り対策で記憶しています。
IEでは何も入ってないタグを無視するみたいな仕様があったと記憶してます。
テーブルのセル回りも上手く認識しないので、 を入れる必要のある箇所はあったかと思います。
投稿2016/11/22 10:41
総合スコア21177
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
HTML5以降は良くないと思います。
ボックスモデルを把握出来ていない場合でfloatの回り込みを解除目的で利用してたのでは?
マージンが効かないとか、パディングが効かないとか、でも仕事でやらなきゃいけないからとりあえずディブで…。
上司やディレクターの圧が、強すぎたんじゃないですかね。
納期ギリギリでやらされたとか。
投稿2016/11/22 05:29
総合スコア335
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/24 12:14 編集
![guest](/img/icon/icnUserSample.jpg)
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/11/18 00:35