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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

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

Q&A

解決済

2回答

729閲覧

HTMLで<div>の使い方がわからない

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

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

0グッド

1クリップ

投稿2020/05/01 19:33

編集2020/05/01 19:42

<div>要素の使いどころがいまいち分かりません

現在、ProgateでHTMLの勉強をしています。私自身、疑問点を上手く言語化できてないのですが、<div>要素の使いどころ(?)、使い方(?)がよくわからなくなりました。

イメージ説明

例えば上記画像のようなサイトを作成したい場合に、模範解答では以下のようなコードになっています。
top-wrapperの中にcontainerが入っている構造です。

html

1<!-- 一部省略しています --> 2 3<html> 4... 5<body> 6... 7 <div class="top-wrapper"> 8 <div class="container"> 9 <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1> 10 <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 11 <a href="#" class="btn signup">新規登録はこちら</a> 12 <p>or</p> 13 <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a> 14 <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a> 15 </div> 16 </div> 17</body> 18</html>

ですが、私は文字列とアイコン群を別々の塊と捉え、以下のように考えました。
containerの中をさらに、top-wrapper-textとtop-wrapper-iconの2つに分割しています。

html

1 <div class="top-wrapper"> 2 <div class="container"> 3 <div class="top-contents-text"> <!-- 文字列部分 --> 4 <h1>LEARN TO CODE.</h1> 5 <h1>LEARN TO BE CREATIVE.</h1> 6 <p>Progateはオンラインプログラミング学習サービスです。</p> 7 <P>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 8 </div> 9 <div class="top-contents-icon"> <!-- アイコン部分 --> 10 <a class="btn signup" href="#">新規登録はこちら</a> 11 <p>or</p> 12 <a class="btn facebook" href="#"><span class="fa fa-facebook"></span>Facebookで登録</a> 13 <a class="btn twitter" href="#"><span class="fa fa-twitter"></span>Twitterで登録</a> 14 </div> 15 </div> 16 </div>

上記の模範解答ではcontainerの中にテキストやアイコンが書かれていますが、上記画像とは異なる部分を作成する際にはcontainerの中身をさらに<div>で細かく区切っており、どういう場合で<div>を使いグループ化していけばいいのかわからなくなってしまいました。

どのような区切り方でも、目標物を作成することは可能でしょうが、「なぜそういった配置なのか」といったような説明がなされないまま話が進んでいくので非常にモヤモヤとしています。一貫して<div>で細かく区切っていてくれれば、まだ納得できたのですが...

「箱の中に箱を入れていくイメージで書けばよい」、「あまり細かく<div>要素で区切るのはよろしくない」、ということは調べてみて分かったのですが、「ではどこまで箱を細かくしていいのか?」といったように、疑問の解決までには至っていません。好きに書けばいいよ、といわれるとそれまでなのですが、何か<div>を使う際の目安というか規約というかレイアウトのコツのようなものはあるのでしょうか?

ご存じの方いましたら、ご教授のほどよろしくお願いいたします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

まず、ドキュメントを参照しましょう。
<div>: コンテンツ分割要素 - HTML: HyperText Markup Language | MDN

その中にはっきりと書かれています。

<div> 要素は「純粋」なコンテナーとして、本質的には何も表しません。その代わり、 class や id を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を (lang 属性を使用して) 示したりするために使用します。

つまり、文章として意味は持たせたくないが、スタイルをつける上でのグループ分けはしたい、って時などに使用する要素です。
ぶっちゃけそれ以上でもそれ以下でもなく、深く考えることはないのかな、と思います。
おそらく、Progateのカリキュラムの中で、まずは、スタイルの当て方や、クラスの付け方、性質などを学ばせようとしているのでしょう。
その先のセマンティクスな要素配置まで考えてしまうと、Progateの回答も疑問点たくさんありますしね。

さて、コードに関しては、上記の通り、Progateの回答の方も少々突っ込みどころがありますが、
質問者さんのものは致命的な間違いがあります。
それは、h1要素が連続で出現していることです。
HTML5の段では、確かにh1要素の複数出現は許可されていましたが、
それでも、アウトラインを考慮して、配置する必要がありました。
HTML5.1以降は、従来のアウトラインに準拠した、h1〜6の出現が望ましいとされています。
よって、h1要素がなんの要素もはさまずに二回出現するのは文法的に間違いです。
そこだけは、意識して今直すのが今後のコーディングの糧になるかと。

投稿2020/05/01 20:11

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/05/03 13:22

ご回答ありがとうございます。 この質問後も勉強を続けて、なんとなくですが使い方が分かってきたように感じます。h1要素についてはご指摘いただくまで気づいていませんでした。 どうにも一度気になると納得するまで気になってしまう癖があるようで。ともかく、詳しく教えてくださりありがとうございました。
miyabi_takatsuk

2020/05/03 16:16 編集

> どうにも一度気になると納得するまで気になってしまう癖があるようで。 プログラマーには必要な資質かと思いますよ。 正しい書き方、は必ず必要になり、それって、納得するまで突き詰めることによって身に付いたりはやっぱりありますので。 大事になさってください。 まぁ、仕事、となれば、その細かい部分気にしてられなくなるパターンありますけどね・・・。 そういう場面になったら、とにかくまずやってみて手動かしながら考える、ってのが一番てっとり早いと経験上思います。 (正しい書き方が正義とは限らないって意味。特に仕事の現場では) どうか、頑張ってください。
guest

0

基本は「CSSでレイアウト等を操作する時にまとめて扱いたい単位」じゃないですかね。

あんまり細かくしても適用するレイアウトが全部同じなら無駄な<div>タグが増えるだけだし、大きすぎても細かい調整ができなくなる。

<div>そのものはグループ化するという意味しか持たないので、そのグループでまとめて何がしたいのかによります。

投稿2020/05/01 20:07

gentaro

総合スコア8949

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/05/03 13:27

ご指摘のいただいた「グループで何をしたいか」に注目しながらコードを書いていくうちに何となく分かってきた気がします。また、私自身少し深く考えすぎていたようにも感じます。これから、コードを書いたり読んだりしながら少しづつ理解を深めていきたいと思います。ご回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問