当記事はデイトラでWEB制作コースを受講して18週間、どんな状況でどんな勉強をしているのかまとめています!
未経験、プログラミングの事は全く分からない私が、デイトラで学んだらプログラミングができるようになるのか？という趣旨で発信しています。
- 未経験でもできるの？
- 他の人がどんな風に勉強しているのか知りたい。
- デイトラを受講したいと思っているけどどんなものなの？
そんな方の判断材料になれば幸いです！
なるべくコードや専門用語を使わないように書いているので気楽に見てくださいね。
grid(グリッド)レイアウトとある変わった形の背景画像に悩まされた１週間でした！夢に出そう！
当記事では
- gridレイアウトとは？
- なんで悩んでたのか
- 今週の失敗談
これらをまとめています！こんなに失敗続きでもできるんだって、くじけている人やこれからやろうと思ってる人に勇気づけられたらと思います。
＼デイトラを受けるならここから／
グリッドレイアウトとは？
グリッドレイアウトとは何か？
グリッドは、列と行を定義する水平線と垂直線の集合が交差したものです。要素をグリッド上の行と列の中に配置することができます。
グリッドレイアウトの基本概念
ちょっと何言ってるかわからないですね…。
gridとは格子(こうし)、マス目状のことです。
画面上にマス目があると仮定して、どこに物を置くかを決めてHP上のレイアウトをするということになります。
IE(インターネットエクスプローラー)が廃止され、現状全部のブラウザで動かせるということで覚えるべきプロパティの一つです。
覚えることで少ないコードで今まで難しかった様々なレイアウトが簡単に可能になり、今後必須なのです。
グリッドレイアウト：参考サイト
HPcode(えいちぴーこーど）｜HTML / CSSのレイアウト革命！dispay:gridの使い方を理解してスマートにコーディングしよう！
デイトラ講師でもある、はにわまんさんのサイトでの解説です。
基本的な考えから使い方まで、グリッドレイアウトについて基礎が学べます！
coliss｜CSS Gridでどのように配置されるかをまとめたチートシート
海外サイトを翻訳してくださったサイトになります。
gridプロパティを使ったときにどのように配置されるのか、要素がどのように動くのかをイラスト付きでまとめられているためわかりやすいです。
また、イラストが可愛いです笑
WREATH｜少しくせ者のdisplay: grid;をツールで遊びながら説明してみた
グリッドジェネレーターを使って順番に解説してくれているサイトです。
視覚的、直感的にグリッドレイアウトを確認できるのと同時に、コードまで表示してくれる神サイトです。
１週間もなんで悩んでるの？
サイトを見て、デイトラで習って便利なはずのグリッドレイアウトでなぜ１週間も…？
中級課題ではカリキュラム中にやったことない仕様が多数含まれており、グリッドレイアウトもその一つだったのですね。
パッと見では「これを使うんだな」というのがわかるのですが、細かい内容は自分で調べるというスタンスです。
それでもわからなかったらメンターさんに質問する、という形ですね。
私は10H位悩んだあとに質問しようかな〜と思い、他の方の質問文の形を借りて書こうとしたところ、同じ悩みを持つ方がいて解決することができました。
掲示板のような形で他の方の質問を見ることもできて(デイトラ生はdiscodeを使っている)とても参考になります。
他の方の悩みを見ることで励みにもなる
悩んでるのが自分だけじゃない、というのも少し励みになります。
SNSを見ていると「できた！」報告がどうしても多いため、「自分だけできない」「自分だけ遅れている」なんて考えてしまうことも多々あります。
私は「できない_(:3」∠)_」「わからない＼(^o^)／」とよく発信するのですが、今後SNSを名刺として使うと考えるとそれもどうかなぁという感じですね。
変わった形の背景を作る
HPの装飾として背景に画像や模様、黒板の板のような背景を置いたり、などなどあると思います。
そして様々な形を擬似要素というcssのコードを使うことで表現することができます。
リボンやチェックマーク、スタイリッシュなラインを引いたりと工夫次第で色々なことができます。
そのため「きっとなにか作る方法があるはずだ」とハマってしまいました。
仕様書に「この画像を使ってね」といったものがあるのに気づかず、できないことを延々と調べるということをしていました…。
３日位使ったかも。
今週の失敗！
gridと疑似要素を作るのに費やした１週間でした。
こんなことをしていましたよ、という内容です。どうぞ笑ってください。
- グリッドレイアウトにて、grid-template-areasの数が合わずアイテムが消える
- grid-template-areasを使ってもギャップの分ズレが発生する
- そもそも思った配置にならない！flex使ったほうが楽！
- 背景が作れない、そもそもなんて検索したらいいかわからない
- たくさん検索して「逆角丸」と検索したらいいことはわかった
- サイトのとおりに作ってもうまくいかない
- 直線と直線をつなぐものしかデザインできないことに気づくのに５時間
- clip-pathを使えばうまくいくんじゃないかと調べまくる
- 複雑な形状の曲線はジェネレーターを使ってもできないことがわかる
- 座標を指定して絵を書く(点と点を結んで絵を描く)ならできるとひらめく
- そんな複雑なことさせるかと小一時間考えて、諦める
- 他の方の質問を見てもそんなことを聞いている人はいない
- 諦めて無理やり画像をはめ込む
- 無理やり画像をはめ込んだあとにStyleGuideに適正な画像があることに気づく
たくさん調べて勉強した分、今後に生きると信じてやっています(´；ω；｀)
【体験談】初心者がデイトラでプログラミングを学んだらどうなる？【18週間目】❘まとめ
グリッドレイアウトと疑似要素についてたくさん調べられた一週間になりました。
これでもう怖くない！はず…。
プログラミングの勉強をするにあたって、自分が学習していること以外の情報はシャットアウトしているのですが、多少は取り入れないと独りよがりになっちゃうなと感じました。
ずっともんもんと考えていると自信がなくなっていくのを感じます。プログラミングは長い学習が必要になるといいます。こんなところでくじけてはいられません。
まだまだ先は長いですが、学習した分は取り返せるように頑張っていきたいと思います。
今週は少し愚痴が多くなってしまいました…。
これからも続けたらどうなるか？を更新していくので見て頂ければ幸いです。
リスキリング(大人の学びなおし)やIT人材不足はまだまだ続いていきます。勉強を始めるのに遅いことはありません。
自分も何かのスキルを得たい、変わりたいと思っている方、
一緒に頑張りませんか？
WEB制作のスクールは安い買い物ではありませんが、
頑張るだけの価値はあると感じます。
＼デイトラを受けるならここから／
