このページの本文へ

ついにブラウザー対応が始まったCSS Grid Layoutで要素を並び替える方法

2017年04月14日 13時00分更新

記事提供:WPJ

  • この記事をはてなブックマークに追加
本文印刷

Firefox 52、Chrome 57でついに正式サポートされた、CSS Grid Layout Module(CSSグリッドレイアウトモジュール)。便利だけどちょっと難しい、CSSグリッドを使ったレイアウトの操作方法を解説。

この記事では、CSSグリッドレイアウトを使って要素(Grid Item)を任意の順番に配置する方法を説明します。そのあと、グリッドで複数の要素の位置を揃える方法を解説します。

過去にもグリッド関係の重要なトピックを掲載しました。最初に『2017年に学びたい!次世代CSSレイアウト「Grid Layout Module」の使い方』でグリッドレイアウトで要素を配置するいろいろな方法を、次のステップとして自動で各要素を配置するグリッド自動配置アルゴリズムについてを『徹底検証!CSS Grid Layout Moduleの自動配置アルゴリズムはどう働くか?』で説明しました。

この記事に関するデモは、Firefox(執筆時点ではバージョン52)もしくはChrome(執筆時点ではバージョン57)の使用を推奨します。両者ともグリッドレイアウトが初期設定でサポートされました。

この記事をWPJのサイトで読む

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング