現場で働くコーダーのためのCSS Grid + モダンコーディング
鹿野 壮(かの・たけし)
株式会社ICS
インタラクションデザイナー
2019年9月7日開催のCSS Nite in Osaka, vol.52で『現場で働くコーダーのためのCSS Grid + モダンコーディング』セッションを担当した鹿野です。今回はご参加ありがとうございました！
アンケートでは「CSS Gridを現場で使えることが知れてよかった」「実務で使うポイントを解説してもらえてよかった」などの声をいただき嬉しく思います。
新しい手法や技術を知ることは、新しい機能とは、これまでの開発のスピードを上昇させ、ラクにしてくれるものです。
積極的に取り入れ、作業時間を減らし、コンテンツのブラッシュアップに時間をかけましょう。
フォローアップでは、発表での補足とお寄せいただいた質問をいくつか、下記の「アンケートでいただいたご意見、ご質問について」で、ピックアップして回答します。
また、次の媒体でWebデザインやフロントエンドの情報について発信しています。こちらも是非ご覧ください。
アンケートでいただいたご意見、ご質問について
-
質問Gridを使用した印象的なサイトの紹介がほしい
次のようなサイトで使われています。
・iPhone 11 Pro （参考ツイート）
・Qiitaの記事ページ （記事ページの例）
・Google Pixel 3のサイト
・Beautiflちなみに、そのサイトでCSS Gridが使われているかどうかは、次のJavaScriptコードを開発者ツールのコンソールタブで実行すると確認しやすいです。
・参考ツイート -
質問未だIE10をサポートして欲しいという要望が多く、CSS GridはベンダープレフィックスなどでIE10でも使えるのでしょうか？
IE 10のCSS Gridの対応状況は、IE 11と同じです。
よって、ベンダープレフィックスを用いればIE 10でも使えます（参考：Can I use）。
使う場合は、レイアウトを注意深く確認する必要があるでしょう。 -
質問Variable Fontsの日本語対応状況を知りたい
筆者の知る限り、日本語フォントでVariable Fontsに対応しているものはないようです。もしあったらぜひ教えていただければ幸いです。
ちなみに、「Variable Fonts」のサイトでさまざまなVariable Fontsを確認できます。 -
質問main-visualに使っている画像サイズはどれくらいのものを用意すべきでしょうか
デザインによって異なるので一概には言えませんが、筆者は基本的に最大表示サイズの2倍の画像サイズを用意しています。
たとえば、画像の最大表示サイズが800pxであれば、1600pxのものを用意します。2倍にしているのは、デバイスピクセル比が2のデバイスに対応するためです。
デバイスピクセル比が3のデバイスも多く登場していますが、3倍サイズの画像を使うとウェブページ表示時のファイルの転送量が多くなり、画面表示速度の遅延につながるため、3倍以上は対応しないことが多いです。 -
質問repeat()メソッドを使った場合、IE 11でアイテムがすべて左上に並んでしまうがどうしたらいいか？
行・列の繰り返しに使用するrepeat()メソッドは、AutoprefixerによるIE 11向け変換が可能です。
しかし、アイテムの配置の際に注意点があります。
IE 11を除くブラウザでは行・列の左上から順にアイテムが配置されていきますが、IE 11では自動的に配置されません。次のように、grid-templateに行と列を別々に指定することで対応可能です。
▼ CSS
/* CSS Gridに関する設定 */
また、上記のrepeat()の対応をAutoprefixerのCLI（コマンドライン）で行う場合は、 Sassファイルの冒頭に/* autoprefixer grid: autoplace */と記述する必要があります。
セッション内で紹介したオンラインツール「Autoprefixer CSS online」では、Sassファイル冒頭の記述は不要です。