◆悩んだとこ、後から気づいたとこをシェアしていきます。
デイトラをはじめました。
現在中級に入ったところですが、つまずくようになってきたので
初めて復習をしています。
復習にあたって、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の過去ログを見ることを思いつきました。