linuxのコマンドやgitの使い方から解説。 web開発を本格的に初めてみたいって人向け。 とてもわかり易いし、自分もここで躓いたなってとこが解説されててとても良い。 こんな感じの教材で授業が進めてもらえたら、誰でもまずまずのものが作れるようになると…

グリッドシステムでのレイアウト #container { display: grid; grid: "areaA areaB areaC" 100px "areaD areaE areaF" 100px / 200px 200px 200px; grid-gap: 10px 20px; } //レスポンシブで1行のアイテム数が変わるとき #container { display: grid; grid: …

//grid-template //これはめっちゃ読みやすいから使うように #container { grid-template: "areaA areaB areaC" 100px "areaD areaE areaF" 100px / 200px 200px 200px; } // grid-gap // これも積極的に使うべし #container1 { grid-row-gap: 10px; grid-co…

読み終わり。 グリッドレイアウトの使い方の説明は薄い。 実現したいデザインをグリッドレイアウトで書く方法が載ってる。これから学びたいって人より、すぐ見栄えのいいものを作らないとって人向けかな。 flexbox使ったほうが楽そうな場面でもgridで押し通…

グリッドレイアウトってめっちゃ便利やね。 これあればmarginいらないんじゃないのって思ってたらそんな記事があった。 これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ | HTML5Experts.jpbo…

css gridは入れ子ができる。 bodyで全体をグリッドに分け 細かいのはそれぞれでまたグリッドにすると見やすそう。細かいマージンはグリッドで作らずにそれぞれの要素で作る

3章まで読み終わった。 わかりやすいし、サンプルもとてもよい。 css gridを使いこなせれば好きなレイアウトが作れるような気にさせてくれる。 自分でなにか作る際は積極的に使って練習しよう。ただ、全く同じ名前の本があるのはいただけない。 検索しづらい…

cssだけでクラスの付替えっぽいことをしたいときは checkboxを使う labelがクリック対象として動作するからlabelをいじくる。 CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応） <input id="nav-input" type="checkbox"> <label id="nav-close" for="nav-input"></label> /*閉じる用の薄黒カバー*/ #nav-close { display: none; //初めは…

1つ目を終えた。 わかりやすくて良い本だと思う。 ただ、モダンと書いてあるけどflexbox, grid layoutは使われていない。 勉強も兼ねてflexboxとgrid layout使ってみたらすごくcssがシンプルになった。 横に並べたいときはとりあえず display:flex を使って…

floatでごちゃごちゃしてたらgrid layoutやflexboxってのがあることを知った。 grid layoutはここがとてもわかり易かった CSS Grid Layout を極める！（基礎編）

vscodeの拡張でscssで保存すると自動でコンパイルしてくれるのがあった。 taskに書かなくてもコンパイルしてくれてとっても便利。