質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • HTML

    11861questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

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

解決済

回答 4

投稿

  • 評価
  • クリップ 8
  • VIEW 19K+

imamura

score 123

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

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+16

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

デザインのための空要素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>&nbsp;</div>のどちらが良いかと言えば<div></div>の形でかまいません。
これは、文章構造にとっては入っていようがいまいが変わらない存在であるためです。
よって、div(あるいはspan)については、デザインのための空要素は「有り」という考えに至っています。

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/18 09:35

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

    キャンセル

+7

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

どういった文脈で書かれた内容なのか、またその「空要素」の定義がしっくりきませんね・・・。私は空要素と聞くと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レイアウトの時代は&nbsp;だったり1px GIFとかが必要だったのでそういうことですかね?)


デザインのための空要素

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/18 09:30

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

    キャンセル

+2

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

心情的には仕方ないと思いつつも、あるべき姿では決して無いので回答としては無しです。
この回答は変化することはないと思います。


[HTMLの歴史] HTMLの誕生からHTML5までをザッと要点紹介 - Naverまとめ
よく纏まっているので、これをベースに考えてみます。

出発点は研究資料の文書を電子化という所で、
HTML本来の役目から考えると、空要素どころか、無駄なタグは一切あるべきではないというのが最もシンプルな回答です。

逆に文書的に中身が空やスペースが入って意味があることならば、積極的に採用すべきです。
分かりやすい箇所はテーブルの空のセルとか…

HTML5現在、ブログや企業サイト等ではヘッダーやフッター、サイドバーが当然のようにあり、
新世代に対応する文書の在り方に移り変わっているように見受けられますね。
ある程度の妥協は仕方がないにしても、どれだけの必要最小限のタグで実現出来るか実装者の腕の見せ所ではあるでしょう。

しかし、HTMLはその成り立ちや役割からすると信じられない程軽視されているように見受けられます。
プログラマーにとって本業はプログラミングなのでHTMLごときは片手間にすべきもの…
デザイナーにとっても本業はデザインなのでHTMLごときは片手間にすべきもの…

世の中は妥当ではないHTMLで溢れかえってます。
3大他人の実装を見てはいけないものの例です(他の2大はPHPとJavaScript)


空要素はよくない
&nbsp;を入れる

IE6辺り対策で記憶しています。
IEでは何も入ってないタグを無視するみたいな仕様があったと記憶してます。
テーブルのセル回りも上手く認識しないので、&nbsp;を入れる必要のある箇所はあったかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

-5

HTML5以降は良くないと思います。

ボックスモデルを把握出来ていない場合でfloatの回り込みを解除目的で利用してたのでは?

マージンが効かないとか、パディングが効かないとか、でも仕事でやらなきゃいけないからとりあえずディブで…。

上司やディレクターの圧が、強すぎたんじゃないですかね。

納期ギリギリでやらされたとか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/24 21:13 編集

    (誤ってコメントいたしました。済みません)

    キャンセル

  • 2016/11/24 22:34

    本音が聞けてよかったです。

    ついでに、質問されている分野を徹底的に応えられる、進んで解決して行き頼りなるのが技術職と言う職業です。

    あなたがプロか詐欺師かわかりませんが…。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • HTML

    11861questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。