◆悩んだとこ、後から気づいたとこをシェアしていきます。

デイトラをはじめました。
現在中級に入ったところですが、つまずくようになってきたので
初めて復習をしています。

復習にあたって、VSCodeでmarkdownを使ってノートをとるようにしました。
せっかくなので、同じ悩みの方に向けて投稿していきます。

単元を学習した後に読むのが良いと思います。

わたしも同様に初学者です。内容の正確性を保証することはできません。
訂正やより良い情報があればご教授お願いします。

✔この記事で解決できること

講義内容と課題の中でわからないことが解決できるかもしれない。
調べる時間を短縮できるかもしれない。
学習の仕方を効率化できるかもしれない。

◆DAY2 HTML を書いてみよう

✔ ブロック要素、インライン要素

ここはよく確認したほうが良いです。
私は曖昧にしたまま進んだので、
毎回a、ul、inputの中央揃えなどで頭を捻りました。

違い	ブロック	インライン
改行	要素の前後	入らない
幅、高さ	指定できる	指定できない
margin	上下左右	左右のみ
タグ	div,h1,p,ul	a,span,input

◆DAY3 CSS を書いてみよう

✔ セレクタ、プロパティ、バリュー

セレクタ {
プロパティ: バリュー;
}

HTMLは、要素=開始タグ＋属性＋属性値＋内容＋終了タグ
のようです。
私は混乱したのできをつけて。

✔ 子孫セレクタの要点

忘れやすいです。
複数のセレクタはカンマ,を使う。
これと次の 2 つで十分そう。
いまのところは。

.contents 以下の p をすべてを指定する記述
.contents p {}
.contents 直下の p すべてを指定する記述
.contents > p {}

<div class="contents">
 <p>1と2が適用される</p>
 <p>1と2が適用される</p>
 <div>
 <p>1が適用される</p>
 <p>1が適用される</p>
 </div>
</div>

✔ ボックスレイアウトの注意点

必須です。
当初は、次のことが理解できていませんでしたし、
この観点で教えてくれる教材はなかなか見当たりませんでした。

border はコンテンツエリアを囲う線の太さのこと。上図では、黄色帯のことです。
殆どの図で、borderの外枠だけが太く描かれているのでわかりにくい。
width と height はコンテンツエリアを指定する。次のborder-boxで変わります。
border-box は width と height の指定範囲をコンテンツエリア、padding、border にする。
コンテンツエリアを縮小して調整される。

✔px、em、rem の違い

今はpxとemで良さそう。

px 絶対値長さの単位
em 相対値親要素に対する割合 0.5em = 50%
rem 相対値 html タグに対する割合 r は root

+参考サイト
https://qiita.com/39_isao/items/e8242901ba1aadb75676

✔ 背景

初級が終わった後でも知らなかったもの。
今は流しても良いかも。

background-size: contain;
コンテンツエリアを埋めるように画像を繰り返す
background-repeat: no-repeat, repeat-Y;
画像を繰り返さない、縦方向に繰り返す
background-attachment: fixed, scroll;
背景を固定する、スクロールできるようにする

✔float

flexboxがあるので、もしかしたら実務であまり使わないのかもしれないが、
理解だけはしたほうが良いのかも。
浮く、回り込むといった抽象的な表現で説明している教材が多いので、
仕組みを調べてみた。
以下はリンク先をわたしなりに補足したものです。

box（ブロック）の高さは、指定がない場合コンテンツエリアの中身で決まる。
しかし、float を設定すると親の box から浮いてしまう。なので、
親 box のコンテンツエリアに float の box は存在しなくなる。
その分親 box の高さがなくなる。
float が設定された box の次に clear を設定すると
float の box + clear の box までが親 box のコンテンツエリアに収納され、
親 box が高さを持つ。

+参考サイト
https://60pablog.com/css-clear/

✔flexbox

重要。
並べたい要素の親に display:flex;を記述し、
並べ方のプロパティも一緒に記述するのを忘れない。
最初は、並べたい要素に直接下記を書いて困ってました。

display:flex;
justify-content:center;

+参考サイト
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
https://pakupakumukku.com/2020/03/22/post-1629/
https://flexboxfroggy.com/#ja

✔position

曖昧にしないほうが良いです。
流して教わることの多いabsoluteの仕組みを知っておくと
コードが一歩読みやすくなると思います。

static デフォルト
fixed ブラウザを起点に位置固定
relative 本来表示される場所を起点にずらす
absolute 親に static 以外が指定されていると親を起点にずらす

+参考サイト
https://www.asobou.co.jp/blog/web/css-position

✔z-index

値が大きいと手前に表示
案外使わない分忘れやすかった。

◆DAY4 環境設定

HTMLhint は、中級で入れるプラグインの EasySass と
不具合を起こすので、中級に入る時にアンインストールしたほうがいい。

最近デイトラのslackで流れてきましたが、当時めちゃくちゃ困りました。
slackの質問スレはナレッジになるので、困ったときは検索してみてください。
私は数時間悩んだ後にslackの過去ログを見ることを思いつきました。