【CSS】Gridレイアウトの作り方を学ぼう!【GRID GARDEN】とは?

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「GRID GARDEN」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・CSSの「グリッドレイアウト(Grid)」を学びたい方
・無料の「グリッド学習サイト」を探している方
・HTMl/CSSを学習中の方

「GRID GARDEN」って何?

GRID GARDEN」とは、ゲーム感覚で「グリッドレイアウト(Grid)」が学べるサイトのことです。全28問。Gridを利用して、畑のにんじんに水やりをして育てながら、CSSが極められます!(いいね)

Grid Garden
A game for learning CSS grid layout

FlexBoxバージョンもあります🐸

【CSS】FlexBoxの使い方が学べるサイト【FLEXBOX FROGGY】とは?
みなさんこんにちは!おさかなです!今回は「FLEXBOX FROGGY」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・FlexBoxをマスターしたい方・Webサイト作成・Webデザインに...

実際に使ってみよう!

基本操作

それでは早速サイトにアクセスしましょう!

左側が、コードの「入力画面」です。(はい!)

右側が「出力画面」になります。
最初の課題は、水をにんじんの位置まで移動する基本的なコードです!(ふむふむ…。)

grid-colum-start」プロパティを使って、水をにんじんのところへ移動させてみましたー!(おお!)

課題をクリアしたら「次へ」ボタンが押せるようになります。(ポチっと)

プログラムをきれいに見せる「コード映え」画像が作れちゃう?!【Ray.so】とは?
みなさんこんにちは!おさかなです!今回は「Ray.so」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・プログラムを書いている方・人に見せるための、コード画像がほしい方・コードをきれいに見...

(ひと休み🍮)

課題を進めよう!

それでは課題をどんどん進めていきましょう!(おー!)
レベル2では、雑草を取り除くという課題となっています。

レベル1同様「grid-colum-start」プロパティを使って、雑草を除去します。

アニメーションもついていて、可愛い🌱)

レベル3では「grid-colum-end」プロパティを使って、複数列に水やりしていきます!(よし!)

ちなみに値は「縦線」を基準に決めます。
今回は4番目の縦線まで、水やりしたいので「grid-colum-end: 4;」とすればOKです!(おー!)

レベル4も、引き続き「grid-colum-end」プロパティを使います。(ふむふむ…。)

こちらは別解として「マイナスの値」を使うことも可能です!

レベル5に進みます。(あっ…マイナスの値についての問題、先取りしてしまった。笑)

レベル5では「負の値(マイナス)」について、学習できます!(えい!)

さらに課題を進めていくと、にんじんの数が増えたり…。(畑っぽい💧)

水と除草剤?の混合課題も!(おお〜!)

レベル24の課題おもしろい!
みなさんも是非「Gridレイアウト」を極めて、CSSスキルを強化してみてください〜✨(お疲れ様です🍵)

CSSグリッドレイアウト デザインブック | エビスコム |本 | 通販 | Amazon
AmazonでエビスコムのCSSグリッドレイアウト デザインブック。アマゾンならポイント還元本が多数。エビスコム作品ほか、お急ぎ便対象商品は当日お届けも可能。またCSSグリッドレイアウト デザインブックもアマゾン配送商品なら通常配送無料。
おさかな
おさかな

アクセスフラッシュ!!

ナビまる
ナビまる

それはグリッドマン。笑

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

日本語で指示すると、AIがコードを書いてくれる?!【AI programmer】とは?
みなさんこんにちは!おさかなです!今回は「AI programmer」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・AIプログラマーにコード記述のサポートをしてもらいたい方・ソースコード...
おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。紆余曲折あり、現在はエンジニア兼ライターとして活動中。
SAOのユウキが好きです!

おさかなをフォローする
タイトルとURLをコピーしました