<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>を使う際の目安というか規約というかレイアウトのコツのようなものはあるのでしょうか?
ご存じの方いましたら、ご教授のほどよろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/05/03 13:22
2020/05/03 16:16 編集