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を無慈悲に減らします。
まずは大枠のレイアウト
コレを
<divclass="layout"><divclass="layout__header"><headerclass="header"></header></div><divclass="layout__breadcrumb"><navaria-label="Breadcrumb"class="breadcrumb"></nav></div><divclass="layout__content"><!-- ここは横並べしたいところ。マストで必要 --><divclass="layout__main"><mainclass="main"></main></div><divclass="layout__aside"><asideclass="aside"></aside></div></div><divclass="layout__footer"><footerclass="footer"></footer></div></div>/* flex系抜粋 */.layout{display:flex;flex-direction:column;height:100vh;}.layout__header{flex:0040px;display:flex;align-items:center;}.layout__breadcrumb{flex:0020px;display:flex;align-items:center;}.layout__content{flex:11auto;display:flex;}.layout__main{flex:11auto;height:100%;}.layout__aside{flex:00200px;height:100%;}.layout__footer{flex:0040px;display:flex;align-items:center;}こう。
<divclass="layout"><headerclass="header"></header><navaria-label="Breadcrumb"class="breadcrumb"></nav><mainclass="main"></main><asideclass="aside"></aside><footerclass="footer"></footer></div>.layout{display:grid;grid-template-columns:1fr200px;grid-template-rows:40px28px1fr40px;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:1fr100px;}.aside{/* 変更なし */}もしdiv無しflexで変更入ったらこうですね
.layout{/* 変更なし */}.aside{/* あら要素に変更が。大丈夫かしら */flex:00100px;}想像しにくいですか？
レイアウトと要素が別ファイルになってたらどうですかね
.layout{/* 変更なし */}.aside{/* あら要素に変更が。大丈夫かしら */flex:00100px;}おわかりいただけましたか？
では次いきましょう
要素の中もそうしちゃおう
これを
<articleclass="card"><imgsrc="http://placeimg.com/200/200/animals"class="card__image"><divclass="card__main"><h1class="heading2"><divclass="heading2__text">アニマル田 トン吉 さん</div></h1><h2class="heading3">この物件のおすすめポイント</h2><pclass="card__text">24時間ゴミ捨て</p><h2class="heading3">ひとこと</h2><pclass="card__text">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思...
</p><divclass="card__button"><buttonclass="button"data-selector="modal__open"data-target="modal-tonkichi">続きを見る</button></div><dialogclass="modal"data-selector="modal"data-modal-id="modal-tonkichi"><divclass="modal__overlay"data-selector="modal__close"data-target="modal-tonkichi"></div><buttonclass="button button--mini"data-selector="modal__close"data-target="modal-tonkichi">x:閉じる</button><divclass="modal__main"><imgsrc="http://placeimg.com/400/200/animals"class="modal__image"><pclass="modal__text">吾輩は猫である。名前はまだ無い。<br>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。<br>ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。<br>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。<br>第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。<br>これが人間の飲む煙草というものである事はようやくこの頃知った。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>吾輩はここで始めて人間というものを見た。<br>しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪に
</p></div></dialog></div></article>/* flex系、position系抜粋 */.card{display:flex;}.card__image{flex:00200px;}.card__main{flex:11auto;}.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;}こう・・・？
<articleclass="card"><imgsrc="http://p!laceimg.com/200/200/animals"class="card__image"><divclass="card__main"><h1class="heading2"><divclass="heading2__text">アニマル田 トン吉 さん</div></h1><h2class="heading3">この物件のおすすめポイント</h2><pclass="card__text">24時間ゴミ捨て</p><h2class="heading3">ひとこと</h2><pclass="card__text">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思...
</p><divclass="card__button"><buttonclass="button"data-selector="modal__open"data-target="modal-tonkichi">続きを見る</button></div><dialogclass="modal"data-selector="modal"data-modal-id="modal-tonkichi"><divclass="modal__overlay"data-selector="modal__close"data-target="modal-tonkichi"></div><buttonclass="button button--mini"data-selector="modal__close"data-target="modal-tonkichi">x:閉じる</button><divclass="modal__main"><imgsrc="http://placeimg.com/400/200/animals"class="modal__image"><pclass="modal__text">吾輩は猫である。名前はまだ無い。<br>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。<br>ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。<br>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。<br>第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。<br>これが人間の飲む煙草というものである事はようやくこの頃知った。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>吾輩はここで始めて人間というものを見た。<br>しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪に
</p></div></dialog></div></article>/* flex, position, grid系抜粋 */.card{display:grid;grid-template-columns:200px1fr;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:1frcalc(80vw-70px)70px1fr;grid-template-rows:1fr31pxminmax(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がありますねえ、、、
単なる縦積み要素のラッパー
<divclass="card__main"><divclass="modal__main">コレらを外すとなると、単なる縦積みをgridレイアウトしなければならない、、、
コスパが悪すぎる、、、
対応するhtmlタグが無い要素
<divclass="modal__overlay"data-selector="modal__close"data-target="modal-tonkichi"></div>モーダルのオーバーレイって何になるんだろう、、、
clickさせたいからタグにはしておきたいけど、、、
、、、いや！まだチャンスはある！！
僕はWeb Componentsにかけますよ！
さてdivは殲滅できるのか！
できて欲しい！
（次の記事へ続く）