HTML制作についてわからないことを聞きたいです。

前提・実現したいこと

HTMLの基礎を学んでいる初心者です。
参考書に沿って入力して制作している途中です。
エラーが発生した訳ではないのですが、
どうしてもわからなくこちらに質問いたしました。
エラーではなく、ソースコードの役割？などを聞きたいです。
何卒よろしくお願いいたします。

下記に詳細を記載いたします。

コンテンツ部分を制作するにあたって、div要素にid属性wrapをつけて全体を包み、
その中にdiv要素にclass属性でcontentエリアを作っております。

お伺いしたいのは、
**「なぜコンテンツエリアが必要なのか？」**です。
この本を続けて作っていると、今度はコンテンツエリアの中に
div要素にclass属性でmain-contentエリアを作っております。

id属性wrapがコンテンツの役割ではないのでしょうか？
ここに文字などを記載して追加すればいいのでは？
と思ってしまいました。

きっと必要な工程なのだと思いますが、どうして必要なのか
しっかり理解したいので、どうかご教示頂けますと幸いです。

よろしくお願いいたします。

該当のソースコード

別ページでは

補足情報（FW/ツールのバージョンなど）

シングルカラムを制作しております。

azuapricot

2019/04/19 10:30

回答するほどでもないのでアドバイスてきな。必ずコンテンツエリアが必要なわけではないです。あとで見た人がわかりやすいように作ると自然とそうなるだけです。ホームページは今自分だけで作っているかもしれませんが、会社で作るとなると複数人で同じ画面を編集したりします。となると、クラス名とかなにもつけずに<div> <div> <div>...... だとこのdivはなにをしてるんだ？？っていうのがわかりにくいですよね。あとは自分が数日後にそのコードを見てすぐ理解できるか、でしょうか。 1週間たてば自分のコードも他人のコード。後から編集するときにわかりやすいようなHTMLをこころがけたらよいのではないでしょうか。

dodox86

2019/04/19 12:11

私には畑違いなところですが、一連のご回答を含め何気に良問な気がしました。質問のタイトルが内容を反映していればベストでしょうか。

m.ts10806

2019/04/19 12:23

質問は編集できますのでタイトルご調整ください

行動規範の内容に同意します

回答5件

HTML としては div 要素は必要ではありません。
おそらく後の工程で CSS を適用しやすくするため、あらかじめ用意しておいていると思われます。

投稿2019/04/19 08:40

x_x

総合スコア13749

nagareboshi

2019/04/19 09:08

ご回答いただき誠にありがとうございます。 CSSを適用しやすくするには、必ずclass属性で指定をしておく必要があり、contentをあらかじめ用意したということですね。

行動規範の内容に同意します

ベストアンサー

そもそもHTMLが何者であるかを理解した方が良いでしょう。
HTMLはとある研究施設で、論文の共有の為に作られたファイル様式です。

[HTMLの歴史] HTMLの誕生からHTML5までをザッと要点紹介

言ってしまえば、Office製品のWordです。
論文共有する事が目的ですから、タイトル・本文・箇条書き・表・画像ファイル貼り付け…とまぁこんな感じの書き方が揃っていれば一通り表現出来ますよね？

最初は研究施設の中だけで論文を交換するだけだったので良かったのですが、
これで企業の紹介したり、ネット通販、掲示板、SNSを実現すればよくね？

…という感じで全世界の様々な人間がやってきてHTMLを魔改造しはじめます。
そして色々な機能を取り込んで肥大化しました。
肥大化したものの、元々Wordと同じことするために作られた論文の文書交換フォーマットです。

あーもうわかったからデザイン上の都合はCSSでなんとかしてくれ！
…ということでCSSというデザインを調整するファイルと二人三脚でWebページを表現するのが今のHTMLです。

ようやく本題に入ります。

なぜコンテンツエリアが必要なのか？

全く必要ありません。
え？必要無いのに作るの？アホじゃね？
必要がないのはHTMLとしての都合であり、CSSの都合でしょう。

デザインの基本は箱です。
四角い箱を紙に描いて、その中にボタンや文字などを埋め込んでみて評価するというやり方が一般的です。

ブラウザはdiv要素やp要素等を箱に見立てて四角いエリアを構築します。
CSSはその四角のエリア内の背景は何色であるか、外側から何px離れているか、文字のサイズや色などんな感じか？
…という情報を記述していく仕組みになっています。

つまりHTMLとしては不要ですが、
レイアウト上の都合で箱を沢山作って描画しなければなりませんので、
HTMLでは無駄に沢山箱を作ってネストしていく事になります。

ここまではOK？

さて、この作った無駄な箱、
「箱A」「箱B」「箱C」…「箱Z」…「箱AZ」……という風にAから順番に名付けていくと途方もない数になるでしょう。
なので非常に遺憾ですが、「ここはxxを表現するためのエリアなんだよ」という名前をつけます。
これが<div class="content">の正体です。

「コンテンツ」という箱そのものには価値はありません。
なので無駄な箱を増やせば増やす程ノイズが増えて読み書きしづらくなります。
CSSを極めて、このレイアウトの都合で作られる無駄な箱を最小限に抑えるのが貴方が生涯かけて取り組む頭脳労働になります。

投稿2019/04/19 09:03

miyabi-sun

総合スコア21461

nagareboshi

2019/04/19 09:28

ご回答いただき誠にありがとうございます。 HTMLのコラムもつけていただきすごい分かり易かったです。ご回答いただいた内容によると、私が今制作しているのは、 [ wrap ]という箱を作って、その中に、[ content ] や [ main-content ]の箱を入れ箱ごとによってCSSで装飾を施している状態ということですね。そして、[ content ] や [ main-content ]などの2つの箱をすべて装飾したい時に登場するのが、この[ wrap ]の箱！そうなると、今回の参考書では[ wrap ]の箱を用意していますが、必ず必要ではなく、[ content ] や [ main-content ]の箱だけでもよく、なるべくこの箱たちを増やさないのがベストということですね。上記のような解釈で問題なさそうでしょうか？よろしくお願いいたします。

miyabi-sun

2019/04/19 09:42

バッチリです！無駄な箱が少なくなるのがベストです！

行動規範の内容に同意します

こういうのは経験だから、とりあえず疑問のまま先に進めていくと、ある段階で符の落ちるようになります。

簡単に言うと、スタイルを設定する時に、エリア分けをしておくと便利だということです。

投稿2019/04/19 08:40

kasa0

総合スコア578

nagareboshi

2019/04/19 09:08

ご回答いただき誠にありがとうございます。疑問が生まれると、気になって集中できなくなるタイプなため助かりました。疑問のまま手を進めることも大事ですね。エリア分けをすれば、後で便利ということですね。

行動規範の内容に同意します

HTMLの仕様や、divを入れ子で増やしてる意味合いなど用途の部分は、他の回答者さんが、お答えしているので、その先のことを少しだけご回答させていただければと思います。

現状はおそらく基礎を学んでいる、そういった参考書を参照されているようなので、出てこない話かと思いますが、
HTMLは正しいセマンティクスに則った書き方をしたほうがよく、
SEOに有利になったり、ブラウザに、正しくページの内容を理解してもらえるようになります。
そして、セマンティクスを意識した書き方をすると、
divがやたらめったら入れ子になることはぐっと少なくなります。

miyabi-sanさんがおっしゃる通り、divは意味をもたないただの箱です。
セマンティクス上の意味を持ちません。
ただし、ブロックとして、グループ分けをすることができ、
とりわけ、IDないしclassを付けたdivにだけ、CSSを割り当てたり、
JavaScriptでDOMのコントロールをしやすくなったりします。

セマンティクス上意味を持つブロック要素としては（セマンティクス要素）、sectionや、articleなどが代表的ですが、
これらは、
section：タイトル（h要素）を持つ一つのコンテンツ
article：タイトル（h要素）を持つ、それ単体で独立できるコンテンツ
といった意味が持たされています。
mainという要素も存在します。（そのページ内で、メインコンテンツとなる領域をまとめて囲う要素）

これらの要素を使用し、質問者さんのHTMLのマークアップを行った場合、下記のようになるでしょう。
（かなり拡大解釈します。）

html
1<!-- headなどは省略 -->
2<body>
3<div id="wrap">
4  <main class="content">
5    <h1>見出し</h1>
6    <section>
7      <h2>メインコンテンツ</h2>
8      <p>コンテンツ</p>
9    </section>
10    <section>
11      <h2>記事一覧</h2>
12      <div id="articleList">
13        <article>
14          <h3>記事タイトル001</h3>
15          <p>記事の最初の文章</p>
16        </article>
17        <article>
18          <h3>記事タイトル002</h3>
19          <p>記事の最初の文章</p>
20        </article>
21      </div>
22    </section>
23  </main>
24  <aside>
25    <h3>リンクなど</h3>
26    <p><a href="https://hoge.jp/">hoge</a></p>
27  </aside>
28</div>
29</body>
30
31<!-- 別ページでは -->
32<body>
33<div id="wrap">
34  <main class="content">
35    <h1>見出し</h1>
36    <section class="main-center">
37      <h2>メインコンテンツ</h2>
38      <p>コンテンツ</p>
39    </section>
40  </main>
41  <aside>
42    <h3>リンクなど</h3>
43    <p><a href="https://hoge.jp/">hoge</a></p>
44  </aside>
45</div>
46</body>

divの入れ子は激減してるのがおわかりいただけると思います。
結果、#wrapは使っていますが、
経験していくとわかるのですが、
これ、使うのと使わないのでは、CSSレイアウトのやりやすさと管理しやすさが段違いなので、
ひとまず倣っておくのが、よろしいかと思います。
（bodyに直接入れていくと、CSSの割り当てや、JavaScriptでのコントロール時に、かなりやりずらくなることが多々ある）

なんにせよ、これは、次か、次の次の段階の話です。
まずは参考文献に書いてある通りにやっていき、疑問はメモでもしてひとまず置いておいて、
基本のグループ分け的要素であるdivを使い、
CSSの割り当て方や、HTMLの性質を学んでいかれるのがいいでしょう。

投稿2019/04/19 10:13

miyabi_pudding

総合スコア9559

まず id 属性と class 属性の違いを意識しましょう。

id 属性はあるエレメントを特定するための「識別子」であって、HTML ページ全体のなかで一意でなくてはいけません。そして id 属性は、本質的にはそれ以外の意味を持ちません。
つまり、<div id="wrap"> というのは、「この <div> に wrap という名を授ける」というだけの意味しかなく、この div がどういう用途のものなのかを示しているわけではありません。

一方 class は、そのエレメントがどういう用途に供されるものかを示すために付けているものです。実際には CSS で表示制御を統一するために使うことが多いです。
content であれば、おそらくは画面内の主たる内容を示すものであり、内容表示に関わる表示指定が CSS でされていると了解されるものです。例えば背景を指定していたり、横幅を制限していたり、フォントサイズを設定していたり。
※content でない画面内の内容としては、ヘッダー部分だったりメニュー用の領域だったりがありますかね

そういう文書の論理構造を含めた描画制御を class を使って表現するので、contents の下に main-contents だの sub-contents だのがあったって、別段おかしくもなんともないのです。

※むしろ最初の id="wrap" が意味不明ですね

投稿2019/04/19 08:48