HTML制作についてわからないことを聞きたいです。
解決済
回答 5
投稿
- 評価
- クリップ 0
- VIEW 521
前提・実現したいこと
HTMLの基礎を学んでいる初心者です。
参考書に沿って入力して制作している途中です。
エラーが発生した訳ではないのですが、
どうしてもわからなくこちらに質問いたしました。
エラーではなく、ソースコードの役割？などを聞きたいです。
何卒よろしくお願いいたします。
下記に詳細を記載いたします。
コンテンツ部分を制作するにあたって、div要素にid属性wrapをつけて全体を包み、
その中にdiv要素にclass属性でcontentエリアを作っております。
お伺いしたいのは、
「なぜコンテンツエリアが必要なのか？」です。
この本を続けて作っていると、今度はコンテンツエリアの中に
div要素にclass属性でmain-contentエリアを作っております。
id属性wrapがコンテンツの役割ではないのでしょうか？
ここに文字などを記載して追加すればいいのでは？
と思ってしまいました。
きっと必要な工程なのだと思いますが、どうして必要なのか
しっかり理解したいので、どうかご教示頂けますと幸いです。
よろしくお願いいたします。
該当のソースコード
<div id="wrap">
<div class="content">
<h1>見出し</h1>
別ページでは
<div id="wrap">
<div class="content">
<div class="main-center">
補足情報（FW/ツールのバージョンなど）
シングルカラムを制作しております。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+6
HTML としては div 要素は必要ではありません。
おそらく後の工程で CSS を適用しやすくするため、あらかじめ用意しておいていると思われます。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
checkベストアンサー
+5
そもそも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を極めて、このレイアウトの都合で作られる無駄な箱を最小限に抑えるのが貴方が生涯かけて取り組む頭脳労働になります。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+4
こういうのは経験だから、とりあえず疑問のまま先に進めていくと、ある段階で符の落ちるようになります。
簡単に言うと、スタイルを設定する時に、エリア分けをしておくと便利だということです。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+3
HTMLの仕様や、divを入れ子で増やしてる意味合いなど用途の部分は、他の回答者さんが、お答えしているので、その先のことを少しだけご回答させていただければと思います。
現状はおそらく基礎を学んでいる、そういった参考書を参照されているようなので、出てこない話かと思いますが、
HTMLは正しいセマンティクスに則った書き方をしたほうがよく、
SEOに有利になったり、ブラウザに、正しくページの内容を理解してもらえるようになります。
そして、セマンティクスを意識した書き方をすると、
divがやたらめったら入れ子になることはぐっと少なくなります。
miyabi-sanさんがおっしゃる通り、divは意味をもたないただの箱です。
セマンティクス上の意味を持ちません。
ただし、ブロックとして、グループ分けをすることができ、
とりわけ、IDないしclassを付けたdivにだけ、CSSを割り当てたり、
JavaScriptでDOMのコントロールをしやすくなったりします。
セマンティクス上意味を持つブロック要素としては（セマンティクス要素）、sectionや、articleなどが代表的ですが、
これらは、
section： タイトル（h要素）を持つ一つのコンテンツ
article： タイトル（h要素）を持つ、それ単体で独立できるコンテンツ
といった意味が持たされています。
mainという要素も存在します。（そのページ内で、メインコンテンツとなる領域をまとめて囲う要素）
これらの要素を使用し、質問者さんのHTMLのマークアップを行った場合、下記のようになるでしょう。
（かなり拡大解釈します。）
<!-- headなどは省略 -->
<body>
<div id="wrap">
<main class="content">
<h1>見出し</h1>
<section>
<h2>メインコンテンツ</h2>
<p>コンテンツ</p>
</section>
<section>
<h2>記事一覧</h2>
<div id="articleList">
<article>
<h3>記事タイトル001</h3>
<p>記事の最初の文章</p>
</article>
<article>
<h3>記事タイトル002</h3>
<p>記事の最初の文章</p>
</article>
</div>
</section>
</main>
<aside>
<h3>リンクなど</h3>
<p><a href="https://hoge.jp/">hoge</a></p>
</aside>
</div>
</body>
<!-- 別ページでは -->
<body>
<div id="wrap">
<main class="content">
<h1>見出し</h1>
<section class="main-center">
<h2>メインコンテンツ</h2>
<p>コンテンツ</p>
</section>
</main>
<aside>
<h3>リンクなど</h3>
<p><a href="https://hoge.jp/">hoge</a></p>
</aside>
</div>
</body>divの入れ子は激減してるのがおわかりいただけると思います。
結果、#wrapは使っていますが、
経験していくとわかるのですが、
これ、使うのと使わないのでは、CSSレイアウトのやりやすさと管理しやすさが段違いなので、
ひとまず倣っておくのが、よろしいかと思います。
（bodyに直接入れていくと、CSSの割り当てや、JavaScriptでのコントロール時に、かなりやりずらくなることが多々ある）
なんにせよ、これは、次か、次の次の段階の話です。
まずは参考文献に書いてある通りにやっていき、疑問はメモでもしてひとまず置いておいて、
基本のグループ分け的要素であるdivを使い、
CSSの割り当て方や、HTMLの性質を学んでいかれるのがいいでしょう。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+2
まず id 属性と class 属性の違いを意識しましょう。
id 属性はあるエレメントを特定するための「識別子」であって、HTML ページ全体のなかで一意でなくてはいけません。そして id 属性は、本質的にはそれ以外の意味を持ちません。
つまり、 <div id="wrap"> というのは、「この <div> に wrap という名を授ける」というだけの意味しかなく、この div がどういう用途のものなのかを示しているわけではありません。
一方 class は、そのエレメントがどういう用途に供されるものかを示すために付けているものです。実際には CSS で表示制御を統一するために使うことが多いです。
content であれば、おそらくは画面内の主たる内容を示すものであり、内容表示に関わる表示指定が CSS でされていると了解されるものです。例えば背景を指定していたり、横幅を制限していたり、フォントサイズを設定していたり。
※content でない画面内の内容としては、ヘッダー部分だったりメニュー用の領域だったりがありますかね
そういう文書の論理構造を含めた描画制御を class を使って表現するので、contents の下に main-contents だの sub-contents だのがあったって、別段おかしくもなんともないのです。
※むしろ最初の id="wrap" が意味不明ですね
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.80%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
azuapricot
2019/04/19 19:30
回答するほどでもないのでアドバイスてきな。
必ずコンテンツエリアが必要なわけではないです。
あとで見た人がわかりやすいように作ると自然とそうなるだけです。
ホームページは今自分だけで作っているかもしれませんが、
会社で作るとなると複数人で同じ画面を編集したりします。
となると、クラス名とかなにもつけずに<div> <div> <div>......
だとこのdivはなにをしてるんだ？？っていうのがわかりにくいですよね。
あとは自分が数日後にそのコードを見てすぐ理解できるか、でしょうか。
1週間たてば自分のコードも他人のコード。
後から編集するときにわかりやすいようなHTMLをこころがけたらよいのではないでしょうか。
dodox86
2019/04/19 21:11
私には畑違いなところですが、一連のご回答を含め何気に良問な気がしました。質問のタイトルが内容を反映していればベストでしょうか。
m.ts10806
2019/04/19 21:23
質問は編集できますのでタイトルご調整ください