Progate HTML&CSS道場レッスン初級編の感想

CSSは方法論をもってやらないと崩壊する。メンテ不可能になる。

hayao

Progate HTML&CSS道場レッスン中級編の感想

クソむずい。

名前空間の概念ある？
スコープを区切れない
セレクタが意図しない要素に当ててるとかが怖い

素のCSSでは書けない

Paddingの挙動がよく分かっていない

hayao

HTML & CSS 上級編

レスポンシブデザインにするためにメディアクエリの紹介
マニュアルオーバライド　筋は悪そう

hayao

div要素

特別な意味はない
スタイルをつける目的でidやclassを付与する
他に適切な要素がなかった場合の最終手段

hayao

inputのplaceholder属性

ユーザ入力の支援をするためのヒント
入力欄に値が入力されていないときのみ表示される。

hayao

フォームコントロール

ユーザが値を入力・設定するための部品

form要素

フォーム全体を表す

label要素

フォームコントロールにラベルをつける

for属性

フォームコントロールにid属性でIDを指定している場合、for属性でそのIDを指定することで紐づけることができる。

hayao

https://web.dev/learn/css/

hayao

CSS

すべてはボックスである

内在サイズと外在サイズ
外在サイズの場合は内部のコンテンツの幅が多すぎるとオーバーフローする

ボックスモデル

コンテントボックス
パディング
ボーダー
マージン

パディングはBox内
ボーダーは要素を視覚的にフレーム化する

box-sizing

content box widthはcontent boxの幅。それにpaddingとborderの幅が追加される

border box witdhはcontent box + padding + border

.awesome[data-sizing="intrinsic"] {
  width: min-content;
}

hayao

セレクタ

ユニバーサルセレクタ ex. *
タイプセレクタ ex. section
クラスセレクタ ex. .my-class
idセレクタ ex. #rad
属性セレクタ

[data-type='primary'] {
  color: red;
}

<div data-type="primary"></div>

擬似クラス

例 a:hover

疑似要素

コンテンツの挿入
要素の具体的な部分をターゲットにする

.my-element::before {
  content: 'Prefix - ';
}

コンビネータ

子要素にしか作用できない

子孫
スペース

p strong {
  color: blue;
}

隣接兄弟コンビネータ next sibling +
- 後続兄弟コンビネータ subsequnet ~
  ↑違いが分かっていない　隣接は任意の隣人がいるかで、後続は指定した要素のあと？（後続はnot 直後らしい）
子コンビネータ >

hayao

The cascade

複数のCSS規則の、HTML要素への適用の衝突の解決

カスケードアルゴリズムの4つのステージ

position and order of appearance
Specificity
Origin
Importance

Specificty

id > class > element type

Specificityは累積的
a.my-class.another-class[href]:hover

これは上書きするのが難しい。なので、セレクタはなるべくシンプルになるよう努めるべき

Order

specificityが弱い順

User agent base styles
Local user style
Authored CSS
Authored !important
Local user styple !important
User agent !important

Importance

重要度が低い順

normal rule type
animation rule type
!imoportant rule type
transition rule type

hayao

Specificity

スコアは低く保つ。ちょうど必要なだけの高さであることが大切。でないと上書きするのが難しい。

Universal selector (*): 0 points
element or pseudo-element selector: 1 point
class, pseudo-class or attribute: 10 points
ID selector: 100 point
Inline style attribute 1,000 points
!important: 10,000 points

hayao

Inheritance

キーワード

inherit
initial
unset

unset

unset は CSS のキーワードで、プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定します。言い換えれば、前者の継承プロパティの場合は inherit キーワードのように動作し、後者の非継承プロパティの場合は initial キーワードのように動作します。

hayao

Color

cssにはデータ型がある。colorはデータ型

表現のしかた

hex
- #b71540
rgb
- rgb(183,21,64)
- カンマは不要。後方互換性で書いてもよい。
hsl
color keyword

hayao

Layout

display

inline

文中の単語のように機能する
明示的に幅と高さを設定できない
ブロックレベルのマージンとパディングは、周囲の要素によって無視される

block

互いに並んでいない。
自分たちのために新しいラインを作成する
全て辺のマージンが考慮される

flex

要素の子の動作方法も決定する。
子供がflex item?になる。

flexbox

1次元のレイアウト。水辺また垂直。
要素の子要素をインライン方向に並べてブロック要素に引き伸ばすので、子要素は同じ高さになる。

アイテムは同じ軸にとどまり、スペースがなくなっても折り返されない。
互いに同じラインに押しつぶそうとする。

grid

単軸レイアウトでなく多軸レイアウト

Flow Layout

inline-block

textと同じように配置されるけど、ブロックの一部の特性が無視されない

float

指定された方向にフロートされる
兄弟要素がその周りをwrapする

floatの注意点？

multicolum layout

colum-count
colum-width

positioning

hayao

Grid

用語

グリッド線

1始まり

グリッドトラック

2つのグリッド線の間のスペース

グリッドセル

行トラックと列トラックの交点によって定義されるグリッド上の最小スペース

グリッドエリア

グリッドセルの集まり

ギャップ

トラックの間の溝

Insepect CSS grid

intrinsic sizing keyword

min-content
max-content
fit-content()

理解すべき概念

用語

Grid Lines
- 線
Grid tracks
- 二本のGrind lineにかこまれた領域
Grid cells
- ２つのGrid tracksの交点
Grid area
- Grid cells集合
Gaps
- tracks間の余白
Grid container
- display:gridが適用されたエレメント
Grid item
- grid containerの直接の子供

size keyword

min-content
- 文字がオーバーフローしない限り小さく？
max-content
- 文が改行されないように広く？
fit-content
- 指定した値を超えるまではmax-content
- 指定した値よりは大きくならない

fr

関数

minmax
- よくわからない
- 設定したmin以上、max以下らしいが、frと一緒に使われたときに大きさはどう決まる？
repeat

auto-fill とauto-fit

auto-placemetnt

grid template areas

hayao

Logical Property

ブロックの流れであるblock flowと文の流れであるinline flowがあるmargin-topなどはflowに関係なく動作するが、margin-block-startなのでblock flowのスタートを意味する。flowの流れによって物理的な位置が変わる

Browser supportは様々

hayao

spacing

margin

ボックスの外側

marginの崩壊
auto
可能なスペースを適用された方向に占有する？

＃## padding
断熱材のようにボックスの内側にスペースを作成する
ボックスモデルによっては、全体的な寸法に影響を与える

position

static default
relative
- 自身の位置からの相対位置？
absolute
- 親の位置からの相対位置？
  -　sticky
- よくわからない。docked/stucked stateのときの適用される？
- スクロールしても画面にとどまる

hayao

pseudo element

`::before`と`::after`

子要素を作る
空文字を指定して、imageとか表示できる？

::first-letter
::first-line
::backdrop
::marker
::selection
::placeholder

hayao

pseudo class

Interactive states

:hover
:active
:focus
:target
:link
- LVHAルール

Form states

:disabled and :enabled
:checked and :inderminate
:placeholder-shown

Validation states

:valid and :invalid and :in-range
:first-child and :last-child
:only-child
first-of-type

Finding empty elements

:empty

Finding and excluding multiple elements

:is()
:has()
:not()

hayao

z-index

基本は出てきた順に重なる
positionをstatic(default)以外にして、z-indexを設定すると重なり方を制御できる。
gridやflexboxを使っているときはpositionを変えなくてもz-indexが働く

stacking context

共通の親を持ち、z-indexで移動するエレメントの集まり

stacking contextの作り方

いろいろな方法があるhttps://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

hayao

Funcitons

custom propertiesとvar()

:root {
	--base-color: #ff00ff;
}

.my-element {
	background: var(--base-color);
}

hayao

Cascade

conflictの解消ルールの集合のこと

StyleSheet origin
Selector specificty
Source Order

color: black;

colorはproperty
blackはvalue
この一行はdeclaration

cascaed value

cascadeの結果選ばれたあるpropertyに対する値

原則　（絶対のルールではない）

ID selectorを使わないでください
!importantを使わないでください

hayao

Inheritance

すべてのpropertyが継承されるわけではない。主にあなたが継承してほしいと思っているもの、テキスト関連のpropertyなどが継承される。

inherit

継承したいpropertyに使う

initial

デフォルト値でリセット

hayao

shorthand properties

複数のpropertiesを一度に宣言できる。
省略した値はinitial valueでセットされるので注意

順番

要素の4辺を指す上右下左
省略されると反対の辺の値になる

2値のshorthand propertiesは水平・垂直

hayao

相対単位

responsive

cssにおいてはブラウザのウィンドウサイズに応じて異なる反応をするスタイルのこと

em

1emは現在のエレメントのfont size
paddingやmargin、element sizeなどに適している

rem

root em root要素からの相対指定
font sizeの指定におすすめ

tip

時と場合によるが、迷ったらfont sizeはrem、borderはpixel、その他ほとんどはemがおすすめ

media query

特定の画面サイズやメディアタイプにのみ適用されるスタイルをしているために使用される@mediaルール

viewport

web pageが表示されるブラウザウィンドウ内の領域。アドレスバー、ツールバー、ステータスバーがある場合はそれを除く。

vh

viewportの高さの1/100

vw

viewportの幅の1/100

vmin

min(vh, vw)

vmax

max(vh, vw)

hayao

custom property

decleration block内で宣言
--で名前をつける
var(名前)で使う

cascadeとinheritanceの規則がある

JavaScriptからアクセス、セットできる

hayao

box-sizing: boarder-boxのほうが要素のサイズが予測しやすいため、新しいサイトを始めるときはboader-boxがおすすめ

    :root {
      box-sizing: border-box;
    }

    *,
    ::before,
    ::after {
        box-sizing: inherit;
    }

hayao

margin

負のマージン

左と上　自分が移動する
右と下　相手を引き込む

collapsed margin

上下のマージンでのみ発生する
上のmarginが20px、下のmarginが10pxだったら上下の余白は10pxになる
要素を貫通する

ただ必ずしも起こるわけではない。borderやpaddingを設定、flex、overflow:auto etcで起こらなくなる

hayao

ロボトミーフクロウセレクタ

* + *

ページの親の最初の要素でないものを選択する

hayao

doucble container pattern

中央揃えにする方法
Containerを重ねて、内側のContainerにmarginを設定する

hayao

Float

clearfix

Floatはそもそも新聞記事の図のようなものを配置するための方法。
これを要素のレイアウトに用いるために必要な設定？

block formatting context

hayao

Progate HTML&CSS道場レッスン初級編の感想

Progate HTML&CSS道場レッスン中級編の感想

HTML & CSS 上級編

div要素

inputのplaceholder属性

フォームコントロール

form要素

label要素

for属性

CSS

ボックスモデル

box-sizing

セレクタ

擬似クラス

疑似要素

コンビネータ

The cascade

Specificty

Order

Importance

Specificity

Inheritance

キーワード

unset

Color

Layout

display

inline

block

flex

flexbox

grid

Flow Layout

inline-block

float

floatの注意点？

multicolum layout

positioning

Grid

用語

グリッド線

グリッドトラック

グリッドセル

グリッドエリア

ギャップ

Insepect CSS grid

intrinsic sizing keyword

理解すべき概念

用語

size keyword

fr

関数

auto-fill とauto-fit

auto-placemetnt

grid template areas

Logical Property

spacing

margin

position

pseudo element

::beforeと::after

pseudo class

Interactive states

Form states

Validation states

Finding empty elements

Finding and excluding multiple elements

z-index

stacking context

stacking contextの作り方

Funcitons

Cascade

cascaed value

原則 （絶対のルールではない）

Inheritance

inherit

initial

shorthand properties

順番

相対単位

`::before`と`::after`

原則　（絶対のルールではない）