記事の詳細
WordPress5.0 GutenbergとedgeとIE11
WordPress5.0のGutenbergをIE(Internet Explorer)で動作させることは難しい、という話はよく聞くのですが、普通に別ブラウザで編集したものをedgeやIEで見た時、表示崩れが起こったのでそれに関するメモ。
今回のブログの見出しはコチラです!
WordPress5.0からのGutenbergの「レイアウト機能」にある「メディアと文章」「カラム」などはCSS Gridでできている
このマークのアイコン。
編集画面だとこうなります。
実際の画面だとこうなって、
スマホだとこうなります。
ブロック要素で「モバイルで重ねる」にチェックを入れると、以下のようになります。
実は編集画面の際こんなレイアウトにすることができますが、こうした場合モバイル版でも写真の位置は下に回ります。
モバイル版の時に写真を上に上げたい場合は、「grid-template-areas」の書き方を変更していかなければなりません。「メディアと文章」はつまり、CSS Gridを利用しているんですね。
これは「レイアウト機能」にある「カラム」も同じで、GutenbergのレイアウトはCSS Gridを中心に構成されています。
CSS Glidが本格的に導入されているのはIE11からなので、IE10以前でGutenbergを使うのは潔くあきらめるとともに、なるべく早急にIEの利用を中止してedgeに移ることを推奨します。
CSS Gridとはなんぞ
Gridとは水平線と垂直線の集合が交差したもので、線と交点で構成されます。CSS GridはWrapper(親)とItem(子)に分かれており、Wrapperに「display:grid;」を適応することでグリッドにすることが出来ます。線を「グリッドライン」、線で構成された四角い部分を「グリッドトラック」と呼びます。
この親要素「display:grid;」に対し、子要素に「grid-template-columns」「grid-template-rows」で行と列を制御しつつ、レイアウトを整えていきます。
IE11にCSS Gridを適応させるためには、ベンダープレフィックスが必要です。
当然、GutenbergをIEでスムーズに表示するためには、ベンダープレフィックスが必要です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
親要素 display: grid; display: -ms-grid; grid-template-columns:auto auto; grid-template-rows:auto auto; -ms-grid-columns:auto auto; -ms-grid-rows:auto auto; 子要素 grid-column - -ms-grid-column grid-row - -ms-grid-row |
これをいちいち手打ちしていたのでは気が狂うので、Autoprefixerを利用している方が多くいます。
ちょっとお手軽なのがこのブラウザでできるベンダープレフィックス付与アプリ。
Autoprefixer CSS online
edgeやIEでGutenbergの表示をコントロールする
さてCSS Gridを利用したGutenbergでよく出るIEの表示崩れがこちら。
これは以下と同じページになります。
「メディアと文章」は、IEでは画像の大きさが「width: 100%;」になっていて、親要素のwidthに依存します。つまり、親要素のwidthが決まっていないと、widthが確定しているところまで大きくなります。
CSS Gridではwidthを指定することがあまりありません。グリッドで指定します。
一応「高度な設定」でクラス付けをし、「width: inherit;」にすることで画像はトリミングしたメディアサイズになりますが、floatでもflexでもないこの「メディアと文章」のレイアウトは、IEではどうしようもない、というのが結論でした。
なので、このレイアウトをIEにも適応したい場合は、カラムを利用することをお勧めします。
ちがうところは画像がセンター揃いでなく、左上揃いになるところです。
IEで見るとこんな感じ。
なお、テーマなどによってはこのカラムでも画像が親要素からはみ出すという現象が起きることがあります。その場合は以下のようにwidthを設定してあげるとなんとかなります。
1 2 3 4 |
.wp-block-image img,.wp-block-image { max-width: 100%; width: 100%; } |
結論としては、
- IEまで対応したい場合は「メディアと文章」は使わずに「カラム」を利用する
- 画像が親要素からはみ出す場合は「.wp-block-image img,.wp-block-image」に「width:100%」を適応する
まだまだIEが現役になってしまっているので、新しいアプリが活躍できないという現状、非常に残念でなりません……。
そのうち新しいバージョンでアップデートされていくと思いますので、今はなるべく最小限の動きで回避していきましょう!