この記事は Hacks ブログに掲載された "CSS Grid and Grid Highlighter Now in Firefox Developer Edition" の抄訳です。
CSS グリッドが Firefox Developer Edition で利用できるようになりました (ダウンロードはこちら)。この機能は Chrome でもすぐに使えるようになります (Safari や Edge でもそうなるでしょう)。そうなれば、ウェブサイトのグリッドレイアウトが簡単にできるようになります。
CSS だけでグリッドレイアウトができるようになるため、HTML からグリッドレイアウトに関する記述を削除できるようになります。メディアクエリや、そのほかのコンテキストと組み合わせることもできるので、Twitter Bootstrap や Skelton のようなコンテンツグリッドを表すためにクラス構造を利用するようなフレームワークを置き換えられます。
変更に弱くなるリスクや、コードが肥大化するリスク、ウェブ上でものを作るときにつきまとう高いメンテナンスコスト、これらを小さくするグリッドは、レイアウトの方式を大きく変える可能性を持っています。これを Jen Simmons は「ウェブで使える本当のアートディレクション」と呼び、Rachel Andrew は、CSS グリッドを広めるための Grid by Example を作成しました。CSS グリッドを知るなら、ここから始めると良いでしょう。
この動画でも使われていますが、グリッドハイライトツールを使うと、表示しているページのグリッドがわかりやすく表示されます。今後もこのような CSS グリッドを使った開発を助けるツールを充実していく予定です。
このツールを使うには、まず最新の Firefox Developer Edition がインストールされている必要があります。CSS グリッドを利用しているページを開き（このデモページで試すと良いでしょう）、メニューの開発ツールからインスペクターを選んで、インスペクターを起動します。CSS で display: grid; と設定されている要素を選択し、"grid" の横に表示されているアイコンをクリックするとグリッド線が表示されます。
前述した通り、Firefox の開発ツールチームは、グリッドをより簡単に使えるようにするための改善を計画しています。進捗は以下のバグで確認できます：
- グリッドが使われているページでは、自動的にハイライトするボタンの追加 (bug 1297100)
- 新しいレスポンシブデザインモードを拡張し、グリッドをハイライトできるようにするとともに、簡単にグリッドを表示するためのオプションを追加する
- グリッドの変更を簡単に行えるパネルの追加
全体に関しては、bug 1181227 のメタバグをご覧ください。
Helen V. Holmes について
Firefox 開発ツールチームのデザイナー。タイポグラフィと Arduino に関するものに情熱を燃やしている。
全ての人に対する健全な技術コミュニテイを作ることを強くサポートしており、
Women Who Code のワシントン DC 支部の開設に貢献。
また全米での学生ハッカソンのメンターを務める。
- ウェブサイト：helenvholmes.com
- Twitter: @helenvholmes