旧ブログコンテンツ

現在は note で発信しています。

CSS Nite LP58フォローアップ（8）鹿野 壮さん

CSS Nite LP, Disk 58 #LP #デザイン #レイアウト

2018年9月29日に都内で開催したCSS Nite LP58「Coder’s High 2018」のフォローアップとして、の鹿野 壮さん（ICS）『もう一歩踏み込んで現場で使うCSS Grid』セッションのスライドなどを公開します。

ハンズオンで学ぶCSS Grid

鹿野 壮さん（ICS）を講師に迎え、CSS Gridの基本を抑えつつ、より一歩使いこなすためのテクニックをハンズオンで学びます。

メッセージ、補足など

今回はご参加ありがとうございました。各モダンブラウザで使えるようになって1年経ったCSS Grid。2018年のオススメの書き方、採用事例、IE 11の対応方法、未来のCSS Gridまでを解説しました。アンケートでは「現場で使ってみようと思った」「CSS Gridの環境が便利になっていて驚いた」などの声をいただき嬉しく思います。新しい手法や技術を知ることは、自分自身の表現力や作業効率を上げることに直結します。ワクワクしながら新しい技術を一緒に学びましょう。

	<p>フォローアップでは、発表での補足とお寄せいただいた質問をいくつかピックアップして回答します。</p>
	<h3>アンケートでいただいた質問に関して</h3>
	<h4>（質問）縦にコンテンツが並んでいるケースでも使うことはあるか？</h4>
	<p>はい、あります。今回紹介した案件では、固定幅のヘッダー・フッター、可変幅のメインコンテンツ、<code>gap</code>プロパティを用いたレイアウトの際に使用しました。サンプルコードは次のとおりです。</p>
	<ul>
		<li><a href="https://codepen.io/tonkotsuboy/pen/aROyVq">https://codepen.io/tonkotsuboy/pen/aROyVq</a></li>
	</ul>
	<h4>（質問）チームの学習コストはどれくらいかかったか？</h4>
	<p>CSS
		Gridを案件に導入した2017年は、本セッションで紹介したエリア名の行列定義ができなかったため、覚えてもらうことに苦労しました。Autoprefixerの進化でエリア名の行列定義が可能になると、他のCSSによるレイアウトよりも簡単だという声もあり、数回使用するだけでCSS
		Gridを覚えてもらえました。</p>
	<h4>（質問）Sassを使用した場合、Autoprefixerをどのタイミングで使えばよい？</h4>
	<p>Sassのコンパイル後に、Autoprefixerによる変換を実行します。</p>
	<h4>（質問）要素が重なる表現は可能か？</h4>
	<p>同じ行・同じ列にアイテムを配置すると、アイテム同士は重なります。<code>z-index</code>で重なり順を制御することもできます。</p>
	<h4>（質問）<code>repeat()</code>メソッドを使った場合、IE 11でアイテムがすべて左上に並んでしまうがどうしたらいいか？</h4>
	<p>行・列の繰り返しに使用する<code>repeat()</code>メソッドは、AutoprefixerによるIE
		11向け変換が可能です。しかし、アイテムの配置の際に注意点があります。IE 11を除くブラウザでは行・列の左上から順にアイテムが配置されていきますが、IE 11では自動的に配置されないので次のように配置位置を指定する必要があります。</p>
	<p>▼ CSS</p>
	<code>
	<pre>/* 1行目・1列目に配置する */
.item:nth-child(1) {
  grid-row: 1;
  grid-column: 1;
}

/* 1行目・2列目に配置する */
.item:nth-child(2) {
  grid-row: 1;
  grid-column: 2;
}</pre>
	</code>
	<p>行数、列数が増えると手動で記述するのは煩わしいので、我々の案件ではSassを使って次のように対応しました。<code>$rowNum</code>、<code>$columnNum</code>を変更すればコピペで使えるので是非ご利用ください。</p>
	<p>▼ Sass</p>
	<code>
	<pre>.item {
  // 行数（3行）
  $rowNum: 3;
  // 列数
  $columnNum: 5;
  
  // 左上から順番に配置する
  @for $row from 1 through $rowNum {
    @for $column from 1 through $columnNum {
      $index: ($row - 1) * $columnNum + $column;
      &:nth-child(#{$index}) {
        grid-row: $row;
        grid-column: $column;
      }
    }
  }
}</pre>
	</code>
	<p>また、<code>gap</code>のIE 11向け変換は<code>repeat()</code>メソッドを使った場合は不可能です（2018/10/01時点）。我々の案件では、<code>repeat()</code>メソッドを用いる場合は<code>margin</code>や<code>padding</code>でアイテム間のスペースを設けることにしました。</p>
	<h4>（質問）<code>repeat()</code>メソッドで、行数・列数を固定して行幅や列幅が動的に変化するレイアウトがしたい</h4>
	<p>3行5列の行列を作成するには、次のようなコードを書きます。<code>grid-template-rows</code>は行のサイズのみを指定するプロパティ、<code>grid-template-columns</code>は列のサイズのみを指定するプロパティです。</p>
	<p>▼ CSS</p>
	<code>
	<pre>.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
}</pre>
	</code>
	<p>「<code>repeat()</code>メソッドをIE 11で使う場合の注意点」で紹介したアイテムの配置を行えば、IE 11でもレイアウトが可能です。サンプルを用意しました。</p>
	<ul>
		<li><a href="https://codepen.io/tonkotsuboy/pen/dgPgGb">https://codepen.io/tonkotsuboy/pen/dgPgGb</a></li>
	</ul>
	<h4>（質問）<code>repeat()</code>メソッドで、画面サイズに応じて行数や列数が動的に変化するレイアウトがしたい</h4>
	<p><code>repeat()</code>メソッドの第一引数に<code>auto-fill</code>を指定すると、コンテナーのサイズに応じて行数や列数の変わるレイアウトが可能です。詳しくは、記事「<a href="https://www.webprofessional.jp/difference-between-auto-fill-and-auto-fit/">これは便利！CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る - WPJ</a>」を参照ください。</p>
	<p>▼ 画面サイズに応じて100pxサイズの列の数を変えるCSSコード</p>
	<code>
	<pre>.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}</pre>
	</code>
	<p>ただし、<code>auto-fill</code>はIE 11では使えないので、<code>repeat()</code>メソッドではなく<code>grid-template</code>プロパティなどで行数・列数を書き換えるか、Flexboxでレイアウトします。</p>
	<h3>感想</h3>
	<p>いただいた感想の中から、とくに印象深かった感想をいくつかピックアップします。Gridの便利さが伝わったようで何よりです。</p>
	<ul>
		<li>行番号・列番号での指定が難しかったので、<code>grid-template</code>プロパティを用いたエリア名の書き方がわかりやすかった。</li>
		<li>昨年も参加したが、昨年よりもCSS Gridを使うのに便利な環境になっていることがわかった</li>
		<li>IE 11で<code>gap</code>プロパティの変換が可能になったことを知らなかった</li>
		<li>IE 11の対応を気にしていたが、今回の話を聞いて使ってみようと思った</li>
		<li><code>display: contents</code>やCSS Houdiniが、早く全ブラウザに実装されてほしい</li>
		<li>うにちゃんが可愛かった</li>
	</ul>
	<h3>さいごに</h3>
	<p>次の媒体でWebデザインやフロントエンドの情報について発信しています。こちらも是非ご覧ください。</p>
	<ul>
		<li><a href="https://ics.media/">ICS MEDIA - Webデザイナー/デベロッパーの必読メディア</a></li>
		<li><a href="https://qiita.com/tonkotsuboy_com">tonkotsuboy_com - Qiita</a></li>
		<li><a href="https://www.lynda.jp/courses/learning-flexbox">Flexbox 入門 - Lynda.com</a></li>
		<li><a href="https://schoo.jp/class/3570">Gulp入門 - Schoo</a></li>
		<li><a href="https://www.webprofessional.jp/lesson/swift4designers/">WebデザイナーのためのiOSアプリ開発入門 - WPJ</a></li>
	</ul>
	<p>もしCSS Gridの学習をしていて不明な点があれば、<a href="https://twitter.com/tonkotsuboy_com">Twitter</a>等で気軽にご相談くださいませ。</p>