CSSベース

CSS : cascading stype sheet

selectors

selectorメソッドuniversal*typeTagid#idclass.classattribute[]

universal

* {
  color: green;
}

type

li {
  color: blue;
}

id

#special {
  color: pink;
}

class

.red {
  background:yellow;
}

attribute

a[href^="naver"] {
  color: green;
}

a tagのhref属性はnaverで始まる

cssタイプ

幅はば:幅はば
Height:高さ
padding:コンテンツ内の空間
margin:コンテンツ以外のスペース
背景:背景色
border-width
border-style
border-color
border:2 px dashred:折りたたみ可能
display : inline, inline-block, block
position :

静的:デフォルト

相対

:元の位置から

を外す

absolute:所属箱から

を取り出す

固定:ウィンドウレベルから

を移動

sticky:

を元の位置に固定する

flexbox

容器を飾ることができる子供たち

display

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

飾り物ができる子供たち

order

flex-grow:追加構成

flex-slich:構成を減らす

flex-basis: auto
flex-basis : 60%, auto

align-self : center

display:flex;
:flex boxを構成します!
flex-direction: row;
:プロジェクト方向の設定
: row, column, row-reverse, column-reverse
flex-wrap: nowrap, wrap;
:itemが多くなったら、次の
:nowrap->itemをスキップしない
:wrap->次の行に移動
flex-flow: column nowrap
上の2つを1つに設定
justify-content :flex-start;
中心軸に物を置く方法
: flex-start, flex-end, center, space-between, space-around, space-evenly
align-items : baseline
相対軸に項目を配置
align-content:
border : 1px solid black;

media quories

メディアクエリにサイズが設定されていません
でも大体整理しておきます.
mobile : 320px~480px
tablet : 768px~1024px
desktop : 1024px~

@media screen and (min-width: 800px) {
  .container {
    width: 50%;
  }
}