[html・css] 自分のhtml構成・cssは一番効率良く書けているのか？

今していること

・このようなブロック構成のhtml, cssをコーディング

相談

DEMO codepen
下記コードの様に書いているが
・htmlのdivをもっと減らせないか？
→しかしalign-itemsやjustify-contentが使えるflexを使っていきたい
→このhtmlの書き方が一番効率良いのか？　という疑問

そこで皆様ならどうコーディングされるか知りたいです。
また私のやり方で十分でしたら、そのコメントも添えていただけるとありがたいです

<div class="wrapper">
  <div class="image">
    <img src="https://randomuser.me/api/portraits/med/men/65.jpg" alt="" width="150px" height="150px">
  </div>
  <div class="content">
    <div class="title">
      <h2>Lets drink fanta</h2>
    </div>
    <div class="content__under">
      <div class="date">
      2018/11/23
    </div>
    <div class="name">
      Xylitol
    </div>
    </div>
  </div>
</div>

.wrapper {
  
  display: flex;
  align-items: center;
  
  .content {
    margin: 20px;
    
    &__under {
      display: flex;
      justify-content: space-between;
    }
  }
}

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

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

回答4件

ベストアンサー

「質問文のコードで、div要素の数を減らせないか？ただし、flexbox は使いたい。」という質問だと読みました。

まず、質問文のコードのdiv要素は、以下の3つに分類されます。

flexbox を使用するために必要なdiv要素
無意味な内包をするdiv要素
より適切な要素が存在するdiv要素

次に、これらのdiv要素を削ることができるかどうかを考えます。

flexbox を使用するために必要な`div`要素

このdiv要素は必須です。削ることはできません。
もしもこれを削るとすれば、見苦しい CSS を書くか、 CSS Grid Layout を使うことになると思います。

無意味な内包をする`div`要素

スタイリングについて、何の役割も持たないdiv要素です。このようなdiv要素は、削ったとしてもデザインに影響は全くないため、今回の場合、「非効率なdiv要素」ということになります。
質問文のコードから、これに該当するdiv要素を削除すると、 HTML は以下のようになると思います。親要素のdiv要素に付与されていたクラス属性は、子要素に移しました。

HTML
1<div class="wrapper">
2  <img src="https://randomuser.me/api/portraits/med/men/65.jpg" class="image" alt="" width="150px" height="150px">
3  <div class="content">
4    <h2 class="title">Lets drink fanta</h2>
5    <div class="content__under">
6      <div class="date">
7        2018/11/23
8      </div>
9      <div class="name">
10        Xylitol
11      </div>
12    </div>
13  </div>
14</div>

より適切な要素が存在する`div`要素

これは、「div要素の数が減らないのは、何でもかんでもdiv要素を使っているからではないか？もっと適切な要素を使っていけば、div要素の数が減るはずではないか？」という考え方です。

適切な要素を探し、上記の HTML を書き換えると、以下のようになります。

HTML
1<div class="wrapper">
2  <img src="https://randomuser.me/api/portraits/med/men/65.jpg" class="image" alt="" width="150px" height="150px">
3  <div class="content">
4    <h2 class="title">Lets drink fanta</h2>
5    <div class="content__under">
6      <time datetime="2018-11-23">2018/11/23</time>
7      <span class="name">Xylitol</span>
8    </div>
9  </div>
10</div>

上の3つを考えるだけでも、ずいぶんdiv要素を減らせました。
これらに加えて、適当に CSS を書くと、さらにdiv要素を減らすことができると思います(動作確認用リンク)。

HTML
1<div class="wrapper">
2  <img src="https://randomuser.me/api/portraits/med/men/65.jpg" class="image" alt="" width="150px" height="150px">
3  <div class="content">
4    <h2 class="title">Lets drink fanta</h2>
5    <time datetime="2018-11-23">2018/11/23</time>
6    <div class="name"> Xylitol </div>
7  </div>
8</div>

SCSS
1.wrapper {
2  display: flex;
3  align-items: center;
4
5  .image {
6    flex: none;
7  }
8
9  .content {
10    display: flex;
11    margin: 20px;
12    justify-content: space-between;
13    flex-wrap: wrap;
14
15    .title {
16      flex-basis: 100%;
17    }
18  }
19}

投稿2018/11/25 05:39

編集2018/11/25 05:41

s8_chu

総合スコア14731

s8_chu

2018/11/25 05:48

ゆっくり書きすぎた...。

kazoogon

2018/11/25 09:30

詳しい回答ありがとうございます！全部divのクラス名にするのではなく、タグ自体を time, dateなどの名前にするのは早速使っていこうと思います。助かりました！

kazoogon

2018/11/25 09:33

あと <title> にflex-basis: 100%; を指定して、date・nameを覆うdivが不必要になるのもいいですね。。。

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

自信があるのでしたらそれで良いのでは。
そうでないなら「私のやり方で十分でしたら」は余計な一言かと思います。
同じものを再現するやり方がひとつではない以上、答えってないので。
意味があって現在の組み方されてるんですよね。
それぞれきちんの説明できるなら問題はないですよ。
あとは好みの問題になってくるので。

投稿2018/11/25 02:14