gapプロパティ（旧名grid-gap）を用いると、CSS Gridにおける列と行の間隔を設定できます。 ▼ MDNの「grid-gap」のデモより。 便利なプロパティですが、IE 11には対応しておらず、CSS Gridにおける苦労点の一つでした。 しかし、6/2にリリースされたAutoprefixer v8.6を用いると、IE 11向けにもgapを用いたレイアウトを実現できます。 どのように変換されるか？ gapを使ったCSSコードがどのように変換されるかを確認してみましょう。次のようなコードを例に紹介します。 grid-templateプロパティの書き方は見慣れないかもしれませんが、グリッドのエリア名、列幅、行幅をまとめて指定する手法です。grid-template-areasで定義したエリア名に加えて、行幅がそれぞれ50px、1fr、50px、列幅が200px、1frであることを示
CSS Gridは非常に便利ですが、唯一の欠点はIE11以下・Edge15以下のユーザーをサポートする必要がある場合に期待通りに機能しないことです。 CSS Gridでページのレイアウト・グリッド・コンポーネントを実装する際に、IE11以下・Edge15以下をサポートするフォールバックのテクニックを紹介します。 Grid to Flex Grid to Flex -GitHub CSS Gridがレイアウトで優れている点は、水平方向と垂直方向の両方を制御して、レイアウトができるという点です。 Flexboxでは両方を制御することはできないため、その点に注意します。 CSS Grid, Flexboxについて学びたい時は、下記の記事がオススメです。 5分で完璧に分かる！CSS Gridの基本的な使い方を解説 CSS Gridの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説 CSS
CSS Gridはブラウザに2次元のレイアウトを作成できるCSSの素晴らしい機能です。今までの実装方法に比べて、HTMLはより簡単で、CSSはより堅牢に実装することができます。 そんなCSS Gridの唯一の問題点は、ブラウザのサポートでしょう。 2018年4月現在、IE11のサポートが完全とは言えない状況ですが、IEへの対応のポイントをしっかり押さえておけば、CSS Gridでレイアウトを実装することができます。flexboxやfloatをフォールバックとして使用する必要もありません。 CSS Gridを使用する際、IE11にどのように対応させるのか、その注意点と実装方法を紹介します。 CSS Grid Application Layout in Production 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最初は、C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く