Flexboxやfloatとの適切な使い分け方法』セッションのスライドなどを公開します。スライド(PDF)動画フォローアップメッセージは、イベント開催直後(2017年11月)の時点のものです。Flexboxやfloatとの適切な使い分け方法」を担当した鹿野です。今回はご参加ありがとうございました。11の対応方法、floatやFlexboxとの使い分けまでを解説しました。すごくわかりやすかった、実践で使えそうなことがわかったFlexboxやGridとの使い分けがわかりやすかった基本的な使い方がイメージできて、ハードルが低くなったような気がするなど、想像よりも多くの反響があり嬉しく思います。私自身がGridについて深く学びたかったこともあり、皆さんと一緒にGridの魅力を体験できる時間だったと感じます。アンケートやTwitterでいただいた質問と答えフォローアップとして、アンケートやTwitterでお寄せいただいた質問をいくつかピックアップして回答します。入れ子にできますか?可能です。Grid」では、.backgroundの要素にGrid指定、その中の#cardに対して更にGrid指定となっています。<table>のcolspan属性(セルを横に繋げる指定)は可能ですか?spanという単位が使えます。2;と指定すると、「行の一つ目のラインから、2つ分伸ばしください」という意味になります。プロパティの楽な書き方はありますか?行と列の定義についてまとめることが可能です。行の開始と終了位置指定方法1セッションで紹介した方法です。2;}行の開始と終了位置指定方法2行の開始・終了、列の開始・終了をまとめて指定する方法です。2;}行の開始と終了位置指定方法3行と列をまとめて指定する方法です。/で区切り、次のように指定します。(列終了番号)セッション中に紹介したメインビジュアルのアイテム位置定義は、次のように記述できます。2;}ポリフィルはありますか?Grid未対応ブブラウザでもGridレイアウトが可能なポリフィルがあります。Layoutとはあまり関係ない部分のレイアウトが崩れるライブラリの容量が大きいポリフィルを使う際は、これらの課題に注意してください。複数行になる可能性があるものはGridにしておいた方がよいのでしょうか?Gridにしておいたほうが管理しやすいケースが多いです。gridを指定する方がよいでしょう。.other-photos内のみでGridレイアウトの影響が及ぶようにする方が全体のレイアウトへの影響が少なくてラクです。frとは何の略ですか?fractionです。使う場合、他の要素は可変にしない方がいいのでしょうか?可変要素をいくつ並べても問題ありません。frという単位は、「余白がある場合、その要素をどれだけ拡大するか」を指定しますが、複数の要素にfrを使うと要素の拡大率がfrの数によって変わります。いくつか例を見てみましょう。次のCSSコードでは、2行のレイアウトになります。1行目のサイズが100px、2行目は残りの領域全てです。次のCSSコードでは、3行のレイアウトになります。1行目のサイズが100px、2行目と3行目は、残りの領域を半分ずつに分解したサイズになります。1fr;}2frのように、frに2以上を指定すると余った領域をその数分だけ確保します。次のCSSコードでは、3行のレイアウトになります。プロパティと似たような挙動をすると覚えるとよいでしょう。Qiita」にわかりやすい解説がありますので、合わせて参照ください。レスポンシブ対応した時の状態がわかりませんでした行列の構造を変える例3行3列のGridを、画面サイズ500px以上のときは2行4列に変更しつつ、各セルのサイズを変更してみましょう。行1から3まで、列1から2まで配置したmain-visualを、画面サイズ500px以上のときは列1から4まで配置するように変更してみましょう。4;}}いずれの場合も、HTMLコードの構造を一切変えることなくCSSのみで柔軟にレイアウトを変更できるのがポイントです。ブラウザがGridに対応した正確なバージョン番号を知りたいです各ブラウザは、次のバージョンにてGridに対応しました。16(2017/10/17リリース)です。ポリフィルを使う「ポリフィル」を使うと、Grid未対応ブラウザでもGridのレイアウトが実現できます。副作用もあるので、詳しくは前述の「ポリフィルはありますか?」を参照ください。デフォルトを1カラムレイアウトにするデザイン次第ではありますが、デフォルトをGridを使わない1カラムレイアウトにするという方法もあります。Gridによるレイアウトとすることで、Grid対応、未対応ブラウザに対して情報を伝える方法です。私が個人案件で仕事をする際は、この手法を用いています。@supports規則を使うことで「グリッドに対応しているブラウザのみ、をを付加することができます。grid;}}}メリットばかりではなく、Gridのデメリットとその対応策について聞きたいです一番のデメリットは未対応ブラウザがあることです。11でも対策次第でGridが使えることを考えると、今後Gridが利用できる環境は広がるでしょう。Safari、古いAndroidブラウザ、Grid未対応のブラウザ対応が必要な場合は?」のような対応をしつつ、ブラウザのサポート拡大を待ちましょう。行列の数を増やしすぎると管理が煩雑になるというデメリットもあります。Excelでも行列を多く増やしてセルの結合を多用すると見辛くなるのと同じです。Gridによるレイアウトは大枠部分に留め、細かい部分についてはFlexboxで代用できないか、Gridの入れ子ができないか、等を検討しながらレイアウトしていくのがよいでしょう。感想いただいた感想の中から、特に印象深かった感想をいくつかピックアップします。Gridの便利さが伝わったようで何よりです。11のシェアが16%だと思う。Gridの学習には、次のようなサイトが役立ちます。1もしGridの学習をしていて不明な点があれば、Twitter等で気軽にご相談くださいませ。次の媒体でWebデザインやフロントエンドの情報について発信しています。Niteベストセッション2017」にてベスト・セッション10に選ばれました。「デザイントレンド特別版」を開催します。2020)」を開催します。Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション+αを選びました。Nite(シーエスエス・ナイト)は、Web制作に関わる方のためのセミナーイベント。2005年10月にスタートし、2017年10月で丸12年。これまでに、600回を超える関連イベントを通して、のべ6万名を超える方にご参加いただいています(2016年12月現在)。お問い合わせご連絡はフォームからお願いします(匿名でのご連絡も可能です)。フォームからのお問い合わせ参加予定のセミナーイベントに関しては、あらかじめ各FAQをご一読ください。各種フォームセミナーイベント参加者向けのフォームです。