レイアウトだけではないCSS Grid応用テクニック

全2回

Webページのコンテンツのレイアウトをする際、強力な機能を発揮するCSS Gridですが、少し違った場面でも活躍します。「2つの要素を重ねる」「テキストの量による大きさを判定する」という面で活用してみましょう。

後編 タグ入力UIの残りの領域確保

Gridは「レイアウト」とは少し違った場面でも活躍します。入力枠が入力内容テキストの大きさに自動で調整されるUIをつくってみましょう。

前編 コンテンツのクロスフェード

CSS Gridは、コンテンツのレイアウト以外にもいろいろな活用ができます。まずは、コンテンツのクロスフェードを実現する方法を見てみましょう。