Moduleはレイアウトを構築できる新しいCSSの仕様です。)で対応していたようなレイアウトを効率的に構築できます。Layoutをガシガシ使ってどうだったのか?をお伝えします。Layoutを採用しました。Layoutを使っているサイトを見かけないので、ベンチマークとして見てもらえたら幸いです。Galleryは2009年に公開したサイト🌏。WAI-ARIAや部分的にHTTP/2対応もしてます。Layoutが役立ちました。11の存在はビジネス🏢としてやってる立場では無視できません。11以上、Chrome最新版、Firefox最新版」としているサイトも多いでしょう。IEとEdgeが先行して実装してていたおかげで、比較的導入しやすい土台が揃っています。Layoutでは、レイアウトを格子状に考えます。どの格子に要素を割り当てるか、という考え方で使います。レイアウトを区切ります。CSSでは次のように書きます。1frという単位は可変するところに指定します。50px;}ヘッダーやサイドバー、メインコンテンツ、フッターの4要素を割り当てます。CSSでは次のように指定します。3;}次のURLでサンプルを公開しているので、アクセスしてみてください。標準仕様のみ対応版のデモをブラウザで表示するChromeやSafari、Firefoxなど最新のブラウザーでは期待通りに表示されています。15で見てみましょう。15ではベンダープレフィックスが必要です。16はベンダープレフィックスは不要でChromeやFirefoxと同じ最新仕様のCSSで動作します。次はコードの一部ですが、-ms-を付与したCSSのコードです。ヘッダーが横一行になっていなかったり、サイドバーが行二列に突き抜けていません。背景の赤色が見えています。2011)でブラウザに実装されています。地道にcolumnやrowを数値指定するかない😥レイアウト崩れの原因は行・列の結合部分に関する部分です。ここに古い仕様と標準仕様の違いがあります。標準の仕様では、格子状の分割線1から3まで指定するという方法です。15の仕様は1からセルをいくつ結合するかという指定です。1;}標準仕様ではgrid-column-endで、古い仕様は-ms-grid-column-spanで、仕様自体が異なっています。ここは自分でコードを書き足して対応します。1;}IEとEdgeの対応コード追加をブラウザで表示するやっと、期待通りに表示できるようになりました🙆Autoprefixerの機能で自動対応するのがオススメベンダープレフィックスを手動で付与するのは人類がなすべきことではありません。Autoprefixerという文明の利器を使いましょう。4入門:PostCSS(Autoprefixerやcssnano)を使う方法」が参考になります。Autoprefixer(バージョン8)はベンダープレフィックスを付与するだけでなく、IEの旧仕様をエミュレートする機能が備わっています。grid-template-areasなどIE11で本来は利用できないプロパティでも、互換性のあるコードに変換してくれます。trueと指定し有効化します。});完成品のサンプルはこちらになります。完成品のサンプルをブラウザで表示するソースコードはGitHubで公開しているので、よかったら使ってくださいませ。検索エンジンにはレイアウトが崩れたまま解析されてそうで、不安が大いに残ります。Googleのキャプチャーは改善されておらず、一年間運用した結果からいうと、検索流入が低いままでした。Layoutだから低いのか、コンテンツの性質上の理由で検索流入が低いのか判断つきませんが、参考までに。Gridも問題なく検索エンジンでレンダリングされるようになっています。あてにならないPolyfillPolyfillを探して実験的に試しました。試したのはGitHubで公開されている次のリンクのものです。Layoutが解釈されるようになります。15にも、Polyfillが効いてしまう(エンバグが発生)じっくり取り組んだり、他のPolyfillを探せば解決できたかもしれません。Polyfillを使わず、最新のブラウザが普及するのを待つ方が本質的だと考え、採用を見送りました。Layoutが利用できる最新ブラウザが十分に浸透するまで数ヶ月かかりますが、採用するサイトは今後増えてくるでしょう。Gallery」には技術的に新しく取り組んだ箇所が他にもあります。リニューアルの話は続編記事「脱jQueryのためにしたこと」へと続きます。令和元年5月8日に内容をメンテナンスしています。