「質問文のコードで、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:48
2018/11/25 09:30
2018/11/25 09:33