感動したこと
grid-areaが最高。レスポンシブ対応が親要素の３行で済んだ。
序: 限られたHTML構成
wordpressを利用したブログ記事内のマークアップを簡略化する案件がありました。
当初はSEOを意識しつつほかページでもモジュール的に使う方針のため、けっこう複雑なマークアップでした。
それが記事量産フェーズにはいり、運用の手間削減の目的でwordpressの入力機能を併用しつつマークダウンで入力できるHTML構造に変更することになりました。
PDCA回せてる証拠ということで。
変更前HTML
SEO対策しつつサイト構造的にモジュール化もいけるHTML
<div class="wrapper">
<ul>
<li>
<article>
<p>
<a href="#">
<img src="http://placekitten.com/g/140/20" alt="サムネ画像">
</a>
</p>
<div>
<h3>
<a href="#">一行の件名</a>
</h3>
<blockquote>
<p>３行程度の抜粋文章</p>
</blockquote>
</div>
</article>
</li>
</ul>
</div>
変更後HTML
.wapper配下はマークダウンでかける構造にした。
<div class="wrapper">
<h3><a href="#">一行の件名）</a></h3>
<a href="#"><img src="http://placekitten.com/g/140/20" alt="サムネ画像"></a>
<blockquoe>
<p>３行程度の抜粋文章</p>
</blockquote>
</div>
マークダウン
マークダウンにするとこんな感じですかね。
WordpressのAddQuickTagプラグインを使い.wrapperを入れたdivで囲む操作イメージです。
<div class="wrapper">
### [一行の件名](ジャンプ先URL)
[画像URL]（ジャンプ先）
> ３行程度の抜粋文章
</div>
これでコード量としては最低限になりました。
pは無くてもいいんですがあると便利だったのでそのままにしてます。
破: grid採用の経緯
ただこいつ、PC表示ではサムネ画像を左においた２カラム、スマホでは縦３行の１カラムレイアウトなんです。
変更前はdisplay:table;を使ってレイアウトしてました。
【壁１】Table組みができない
マークダウン対応するためにtable組みしようとしたら、trを増やせないんでPC/スマホのレイアウト切り替えが実現できません。
【壁２】 flexだとめんどくさい
じゃあflexは？としたら、１行＋２行の２カラム表示がしんどいです。
【打破策】じゃあgridで
floatでさっくり実現るんですが今更floatでレイアウトはしたくないので、CSS Grid（以下Grid）に挑戦することにしました。
Corder'sHigh2018では大盛り上がりしたそうですね。
私は家庭の事情でその前に会場離脱したので残念でした。
Can I use...で調べたらIE10,11以外は対応できてるっぽいんで、詳しくは確認はしないままとりあえず使ってみます。
※IE対応については後述
とりあえずやってみよう
まずは面倒くさいPCの２カラム表示。
慣れないんでマッピング作って、areaAが1-1と2-1、areaBが1-2、areaCが2-2と指さしながらやりました。
.wrapper {
display: grid;
grid-template-areas: 'areaA areaB' 'areaA areaC';
grid-template-columns: 120px 1fr;// 画像横最大120px
grid-template-rows: 3em 1fr;// 一行件名の行間1.5em（で高さとする）
}
.wrapper > h3 {
grid-area: areaB;
}
.wrapper > a {
grid-area: areaA;
}
.wrapper > blockquote {
grid-area: areaC;
}
割とさらっとできました。
これをメディアクエリ使って１カラム表示にするんですが、
マッピング設定直し面倒だなあ、と思ってたんですね。
急: レスポンシブ解決
スマホのマッピングは、areaAが1、areaBが2、areaCが3となります。
「3」が増えたところでしんどい気分です。
-
grid-template-areは'areaA' 'areaB' 'areaC'になります。 -
grid-template-columnsは１カラムなので、1frでいいかな。autoでもいいかも。 -
grid-template-rowsは、画像が縦max120px、１行の件目->行間0.5emの高さ、抜粋文章->残りの高さだから120px 2em 1fr
// スマホサイズ
.wrapper {
display: grid;
grid-template-areas: 'areaA' 'areaB' 'areaC';
grid-template-columns: 1fr;
grid-template-rows: 120px 2em 1fr;
}
@media screen and (PCサイズ) {
.wrapper {
grid-template-areas: 'areaA areaB' 'areaA areaC';
grid-template-columns: 120px 1fr;
grid-template-rows: 3em 1fr;
}
}
.wrapper > h3 {
grid-area: areaB;
}
.wrapper > a {
grid-area: areaA;
}
.wrapper > blockquote {
grid-area: areaC;
}
あれ、親要素設定しただけでできた。
子要素のgrid-areaの符号変えなくても良いんだとここで気づきました。
え、楽。
あとは検証もそこそこにレビューを同僚に投げて完了です。
よろしくお願いします。
IE11対応について
autoprefixerがなんとかしてくれます。v8.6以上、11月末現在v9.3.1推奨です。
IE10は忘れてください。
- CSS Grid in IE: Duplicate area names now supported! | CSS-Trick