divタグ使ってますか？

僕は使ってます。
でも疲れました。

divタグが無ければデザインの乗ったwebページは作れない、と言っても過言ではないでしょう。

divタグは意味を持たないので、コレはスタイリング上やむなく使われることが多いかと思います。
つまり、divを書くたびに「このdiv要素はcssで何のために必要なのか」悩ませるスキが出てきます。

そして意味がない故に使いやすく、そして増えすぎると、そんなタグです。

だから少ないに越したことはないんですね。
そうですよね？

減らしましょう。

grid編、Web Components編の二つで行きます。

今日の記事はgrid編です。

課題

※0.5倍くらいでご確認ください

See the Pen
without grid by haradabox (@haradabox)
on CodePen.

flexをメインに作成されたwebページですね。

影響範囲の分割を考えて、レイアウトは、パンくずリストなどの要素それ自体とは異なるdivで区切っています。
レイアウトが変わっても要素自体は変わってないと言える優しさの権化。

そんなdivを無慈悲に減らします。

まずは大枠のレイアウト

コレを

<div class="layout">
  <div class="layout__header">
    <header class="header"></header>
  </div>
  <div class="layout__breadcrumb">
    <nav aria-label="Breadcrumb" class="breadcrumb"></nav>
  </div>
  <div class="layout__content"><!-- ここは横並べしたいところ。マストで必要 -->
    <div class="layout__main">
      <main class="main"></main>
    </div>
    <div class="layout__aside">
      <aside class="aside"></aside>
    </div>
  </div>
  <div class="layout__footer">
    <footer class="footer"></footer>
  </div>
</div>

/* flex系抜粋 */
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.layout__header {
  flex: 0 0 40px;
  display: flex;
  align-items: center;
}
.layout__breadcrumb {
  flex: 0 0 20px;
  display: flex;
  align-items: center;
}
.layout__content {
  flex: 1 1 auto;
  display: flex;
}
.layout__main {
  flex: 1 1 auto;
  height: 100%;
}
.layout__aside {
  flex: 0 0 200px;
  height: 100%;
}
.layout__footer {
  flex: 0 0 40px;
  display: flex;
  align-items: center;
}

こう。

<div class="layout">
  <header class="header"></header>
  <nav aria-label="Breadcrumb" class="breadcrumb"></nav>
  <main class="main"></main>
  <aside class="aside"></aside>
  <footer class="footer"></footer>
</div>

.layout {
  display: grid;
  grid-template-columns: 1fr 200px;
  grid-template-rows: 40px 28px 1fr 40px;
  height: 100vh;
  grid-template-areas:
    "header header"
    "breadcrumb breadcrumb"
    "main aside"
    "footer footer";
}

.header {
  grid-area: header;
  align-self: center;
}

.breadcrumb {
  grid-area: breadcrumb;
  align-self: center;
}

.main {
  grid-area: main;
}

.aside {
  grid-area: aside;
}

.footer {
  grid-area: footer;
  align-self: center;
}

スッキリしましたね、してませんか？

ここで着目したいのが、gridにしたことで、レイアウトのスタイルの指定順が逆転していることですね。

display	指定の方向
flex	親が並び方を主張 → 子要素が割り当てられる幅や高さを定義
grid	子が`grid-area`でレイアウト位置を主張 → 親で幅や高さの割り当てを定義

これが効くんですね〜。
例えばサイドバーの幅を変更したいぞ、という場合はこうです。

.layout {
  /* 200px → 100pxに */
  grid-template-columns: 1fr 100px;
}
.aside {
  /* 変更なし */
}

もしdiv無しflexで変更入ったらこうですね

.layout {
  /* 変更なし */
}

.aside {
  /* あら要素に変更が。大丈夫かしら */
  flex: 0 0 100px;
}

想像しにくいですか？
レイアウトと要素が別ファイルになってたらどうですかね

.layout {
  /* 変更なし */
}

.aside {
  /* あら要素に変更が。大丈夫かしら */
  flex: 0 0 100px;
}

おわかりいただけましたか？
では次いきましょう

要素の中もそうしちゃおう

これを

<article class="card">
  <img src="http://placeimg.com/200/200/animals" class="card__image">
  <div class="card__main">
    <h1 class="heading2">
      <div class="heading2__text">アニマル田 トン吉 さん</div>
    </h1>
    <h2 class="heading3">この物件のおすすめポイント</h2>
    <p class="card__text">24時間ゴミ捨て</p>
    <h2 class="heading3">ひとこと</h2>
    <p class="card__text">
      吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思...
    </p>
    <div class="card__button"><button class="button" data-selector="modal__open"
        data-target="modal-tonkichi">続きを見る</button></div>
    <dialog class="modal" data-selector="modal" data-modal-id="modal-tonkichi">
      <div class="modal__overlay" data-selector="modal__close" data-target="modal-tonkichi"></div>
      <button class="button button--mini" data-selector="modal__close"
          data-target="modal-tonkichi">x:閉じる</button>
      <div class="modal__main">
        <img src="http://placeimg.com/400/200/animals" class="modal__image">
        <p class="modal__text">
          吾輩は猫である。名前はまだ無い。<br>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。<br>ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。<br>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。<br>第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。<br>これが人間の飲む煙草というものである事はようやくこの頃知った。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>吾輩はここで始めて人間というものを見た。<br>しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪に
        </p>
      </div>
    </dialog>
  </div>
</article>

/* flex系、position系抜粋 */
.card {
  display: flex;
}

.card__image {
  flex: 0 0 200px;
}

.card__main {
  flex: 1 1 auto;
}

.card__button {
  display: flex;
  justify-content: flex-end;
}

.modal {
  position: fixed;
  display: none;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
}

.modal.is-active {
  display: block;
}

.modal__overlay {
  background: rgba(0,0,0,.5);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.modal__overlay {
  background: rgba(0,0,0,.5);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.modal__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal__close {
  position: absolute;
  bottom: 100%;
  right: 0;
}

.modal__main {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  width: 80vw;
  max-height: calc(90vh - 100px);
  overflow-y: scroll;
}

こう・・・？

<article class="card">
  <img src="http://p!laceimg.com/200/200/animals" class="card__image">
  <div class="card__main">
    <h1 class="heading2">
      <div class="heading2__text">アニマル田 トン吉 さん</div>
    </h1>
    <h2 class="heading3">この物件のおすすめポイント</h2>
    <p class="card__text">24時間ゴミ捨て</p>
    <h2 class="heading3">ひとこと</h2>
    <p class="card__text">
      吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思...
    </p>
    <div class="card__button"><button class="button" data-selector="modal__open"
        data-target="modal-tonkichi">続きを見る</button></div>
    <dialog class="modal" data-selector="modal" data-modal-id="modal-tonkichi">
      <div class="modal__overlay" data-selector="modal__close" data-target="modal-tonkichi"></div>
      <button class="button button--mini" data-selector="modal__close"
          data-target="modal-tonkichi">x:閉じる</button>
      <div class="modal__main">
        <img src="http://placeimg.com/400/200/animals" class="modal__image">
        <p class="modal__text">
          吾輩は猫である。名前はまだ無い。<br>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。<br>ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。<br>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。<br>第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。<br>これが人間の飲む煙草というものである事はようやくこの頃知った。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>吾輩はここで始めて人間というものを見た。<br>しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪に
        </p>
      </div>
    </dialog>
  </div>
</article>

/* flex, position, grid系抜粋 */
.card {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "image main";
}

.card__image {
  grid-area: image;
}

.card__main {
  grid-area: main;
  padding-left: 16px;
}

.card__button {
  display: flex;
  justify-content: flex-end;
}

.button {
  grid-area: button;
}

.modal {
  position: fixed;
  display: none;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
}

.modal.is-active {
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr calc(80vw-70px) 70px 1fr;
  grid-template-rows: 1fr 31px minmax(0, calc(90vh - 100px)) 1fr;
  grid-template-areas:
    ". . . ."
    ". . button ."
    ". main main ."
    ". . . .";
  z-index: 1;
}

.modal__overlay {
  background: rgba(0,0,0,.5);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.modal__main {
  grid-area: main;
  position: relative;
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  width: 80vw;
  max-height: calc(90vh - 100px);
  overflow-y: scroll;
}

うーん。

負けたのか、、、？

See the Pen with grid by haradabox (@haradabox) on CodePen.

まだ残ってるdivがありますねえ、、、

単なる縦積み要素のラッパー

<div class="card__main">
<div class="modal__main">

コレらを外すとなると、単なる縦積みをgridレイアウトしなければならない、、、
コスパが悪すぎる、、、

対応するhtmlタグが無い要素

<div class="modal__overlay" data-selector="modal__close" data-target="modal-tonkichi"></div>

モーダルのオーバーレイって何になるんだろう、、、
clickさせたいからタグにはしておきたいけど、、、

、、、いや！まだチャンスはある！！

僕はWeb Componentsにかけますよ！

さてdivは殲滅できるのか！
できて欲しい！

（次の記事へ続く）