みなさんこんにちは!おさかなです!
今回は「GRID GARDEN」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・CSSの「グリッドレイアウト(Grid)」を学びたい方
・無料の「グリッド学習サイト」を探している方
・HTMl/CSSを学習中の方
「GRID GARDEN」って何?
「GRID GARDEN」とは、ゲーム感覚で「グリッドレイアウト(Grid)」が学べるサイトのことです。全28問。Gridを利用して、畑のにんじんに水やりをして育てながら、CSSが極められます!(いいね)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/e273daced450bbeec9a1cf2d0fff4a80.png)
↓FlexBoxバージョンもあります🐸
![](https://osakanav.com/wp-content/uploads/2022/10/flexboxfroggy-top-160x90.png)
実際に使ってみよう!
基本操作
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2022/11/cssgridgarden.png)
左側が、コードの「入力画面」です。(はい!)
![](https://osakanav.com/wp-content/uploads/2022/11/cssgridgarden-edit.png)
右側が「出力画面」になります。
最初の課題は、水をにんじんの位置まで移動する基本的なコードです!(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2022/11/cssgridgarden-syuturyoku.png)
「grid-colum-start」プロパティを使って、水をにんじんのところへ移動させてみましたー!(おお!)
![](https://osakanav.com/wp-content/uploads/2022/11/cssgridgarden-done.png)
課題をクリアしたら「次へ」ボタンが押せるようになります。(ポチっと)
![](https://osakanav.com/wp-content/uploads/2022/11/cssgridgarden-next.png)
![](https://osakanav.com/wp-content/uploads/2021/11/rayso-top-160x90.png)
(ひと休み🍮)
課題を進めよう!
それでは課題をどんどん進めていきましょう!(おー!)
レベル2では、雑草を取り除くという課題となっています。
![](https://osakanav.com/wp-content/uploads/2022/11/cssgridgarden-2.png)
レベル1同様「grid-colum-start」プロパティを使って、雑草を除去します。
![](https://osakanav.com/wp-content/uploads/2022/11/cssgridgarden-lv2.png)
(アニメーションもついていて、可愛い🌱)
![](https://osakanav.com/wp-content/uploads/2022/11/cssgridgarden.gif)
レベル3では「grid-colum-end」プロパティを使って、複数列に水やりしていきます!(よし!)
![](https://osakanav.com/wp-content/uploads/2022/11/cssgridgarden-q3.png)
ちなみに値は「縦線」を基準に決めます。
今回は4番目の縦線まで、水やりしたいので「grid-colum-end: 4;」とすればOKです!(おー!)
![](https://osakanav.com/wp-content/uploads/2022/11/cssgridgarden-3.png)
レベル4も、引き続き「grid-colum-end」プロパティを使います。(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2022/11/cssgridgarden-.png)
こちらは別解として「マイナスの値」を使うことも可能です!
![](https://osakanav.com/wp-content/uploads/2022/11/cssgridgarden-mainasu.png)
レベル5に進みます。(あっ…マイナスの値についての問題、先取りしてしまった。笑)
![](https://osakanav.com/wp-content/uploads/2022/11/cssgridgarden-q5.png)
レベル5では「負の値(マイナス)」について、学習できます!(えい!)
![](https://osakanav.com/wp-content/uploads/2022/11/cssgridgarden-a5.png)
さらに課題を進めていくと、にんじんの数が増えたり…。(畑っぽい💧)
![](https://osakanav.com/wp-content/uploads/2022/11/cssgridgarden-15.png)
水と除草剤?の混合課題も!(おお〜!)
![](https://osakanav.com/wp-content/uploads/2022/11/cssgridgarden-18.png)
レベル24の課題おもしろい!
みなさんも是非「Gridレイアウト」を極めて、CSSスキルを強化してみてください〜✨(お疲れ様です🍵)
![](https://osakanav.com/wp-content/uploads/2022/11/cssgridgarden-hatake24.png)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
アクセスフラッシュ!!
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
それはグリッドマン。笑
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2022/10/aiprogrammer-top-160x90.png)