スクリーンキャストで学べるCSS Gridの入門コースがわかりやすくておすすめ

Advertisement

CSS Gridってなんかとっつきにくくないですか?
一通り学んで理解すると「あ、なるほど。これは超便利!」ってなるんですけど、今までのCSSとは違った考え方というか書き方だからですかね?

でも、そんなとっつきにくさを解消してくれるのがビデオ とかスクリーンキャストです。ブログ記事 とか書籍 でも素晴らしいリソース がたくさんあるんですけど、文章だけで学ぶ よりもビデオ やスクリーンキャストの方が「はじめの一歩」としてはわかりやすいですね。

英語ですけど「これはわかりやすい!」というのに出会ったのでご紹介します。スクリーンキャストなので英語が苦手でも大丈夫だと思います。英語の勉強もかねてぜひ!

Learn CSS Grid for free

Scrimba というインタラクティブなスクリーンキャストのプラットフォーム上で作られた無料のCSS Grid入門講座 です。登録は必要ですけど、無料で以下のようなCSS Gridの基礎が短時間で学べます。すごくオススメです。

  • CSS Grid Layoutの基礎
  • レスポンシブなグリッドの作り方
  • repeat()minmax()の使い方
  • justify-contentalign-contentjustify-itemsalign-itemsなどの「寄せ」の使い方
  • auto-fitauto-fillの違い

コース自体もわかりやすくていいんですけど、Scrimbaというスクリーンキャストの仕組みがすごくいいなと思います。キャストを見ながら学べる仕組みで、途中でも見終わった後でも、見ているコードをその場で編集して手を動かしながら学べるようになっています。

コーディングやプログラミングを学ぶのにはすごく良さそうな画期的なプラットフォームです。日本でもすぐに広まりそう。

さいごに

昨年、主要なブラウザのサポートが揃ったことで、ますます注目を集めるCSS Gridですが、これ本当に画期的ですね。レスポンシブなサイト制作にもすごく役立ちますし、プロダクションでも使えるようになる日が待ち遠しい。。。

CSSレイアウトのルネッサンスや〜!

About the author

Rriverの竜(りょう)です。「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、東海岸のボストン近郊でウェブ制作を開始。帰国後、東京のウェブ制作会社に勤務。現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わっています。より詳しくはこちら

記事へのコメントはもちろん、執筆・翻訳、レスポンシブなウェブサイト制作、コラボのご相談などもTwitter @rriver またはFacebook でお気軽にご連絡ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です