CSS Gridってなんかとっつきにくくないですか？
一通り学んで理解すると「あ、なるほど。これは超便利！」ってなるんですけど、今までのCSSとは違った考え方というか書き方だからですかね？
でも、そんなとっつきにくさを解消してくれるのがビデオ とかスクリーンキャストです。ブログ記事 とか書籍 でも素晴らしいリソース がたくさんあるんですけど、文章だけで学ぶ よりもビデオ やスクリーンキャストの方が「はじめの一歩」としてはわかりやすいですね。
英語ですけど「これはわかりやすい！」というのに出会ったのでご紹介します。スクリーンキャストなので英語が苦手でも大丈夫だと思います。英語の勉強もかねてぜひ！
Learn CSS Grid for free
Scrimba というインタラクティブなスクリーンキャストのプラットフォーム上で作られた無料のCSS Grid入門講座 です。登録は必要ですけど、無料で以下のようなCSS Gridの基礎が短時間で学べます。すごくオススメです。
- CSS Grid Layoutの基礎
- レスポンシブなグリッドの作り方
repeat()とminmax()の使い方justify-content、align-content、justify-items、align-itemsなどの「寄せ」の使い方auto-fitとauto-fillの違い
コース自体もわかりやすくていいんですけど、Scrimbaというスクリーンキャストの仕組みがすごくいいなと思います。キャストを見ながら学べる仕組みで、途中でも見終わった後でも、見ているコードをその場で編集して手を動かしながら学べるようになっています。
コーディングやプログラミングを学ぶのにはすごく良さそうな画期的なプラットフォームです。日本でもすぐに広まりそう。
さいごに
昨年、主要なブラウザのサポートが揃ったことで、ますます注目を集めるCSS Gridですが、これ本当に画期的ですね。レスポンシブなサイト制作にもすごく役立ちますし、プロダクションでも使えるようになる日が待ち遠しい。。。
CSSレイアウトのルネッサンスや〜！
2018年1月9日に公開された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。