1. Sass
1.1. 記法
1.1.1. scss記法
1.1.2. sass記法
1.2. コンパイル
1.2.1. コンパイラ
1.2.1.1. VSCode拡張機能
1.2.1.1.1. live sass compiler
1.2.1.1.2. DartJS sass compiler
1.2.2. .mapファイル
1.3. ネスト
1.3.1. たためる
1.4. &
1.4.1. &を使ったクラスセレクター &-inner
1.5. パーシャル
1.5.1. _○○.scss
1.5.2. @use ‘’ ;
1.5.2.1. as エイリアス
1.6. 変数 $
1.7. mixin
1.7.1. @mixinとメディアクエリ
1.7.1.1. @mixinと@includeが別ファイルの場合 ファイル名.mixin名
1.7.2. @include
1.7.3. @content
2. 詳細度
2.1. !important
2.2. * ( 0 , 0 , 0 )
3. 共通パーツの扱い方
4. レスポンシブ対応
4.1. @media
4.1.1. メディアタイプ
4.1.1.1. screen
4.1.1.2. print
4.1.1.3. speech
4.1.1.4. all
4.1.2. ( max-width: ○○px )
4.1.2.1. ブレイクポイント
4.1.2.1.1. 767
4.1.3. @media内のコードが上書きされるだけなので、 もともとのコードにあったものは書かなくてよい
5. セレクター
5.1. タグ
5.2. .class
5.3. #id
5.4. 属性指定 input[type=“submit”]
5.5. *
5.6. .classA .classB
5.7. .classA , .classB
5.8. .classA.classB
5.9. >
5.10. +
5.11. 擬似要素
5.11.1. ::before , ::after
5.11.1.1. positionと併用して描画
5.11.1.1.1. 三角形
5.11.1.1.2. 要素を覆うinset: 0; background-color: ; width: 100%; height: 100%;
5.11.1.2. content: “”;
5.11.1.3. 要素に子要素がないときdisplay:flexすると、 ::before,要素,::afterの順で横並びになる
5.12. 擬似クラス
5.12.1. :hover
5.12.2. :root
5.12.3. :active
5.12.4. :focus
5.12.5. :checked
5.12.6. :○○-child
5.12.6.1. first
5.12.6.2. last
5.12.6.3. nth
5.12.7. :○○-of-type
5.13. はみ出ていた場合
5.13.1. *, ::before, ::after { outline: 1px solid }
6. ファイル ○○.css
7. container の考え方
7.1. Lv.1 max-width: 1000px; margin: 0 auto; padding: 0 16px;
7.1.1. Lv.2 max-width: 1000px; margin-inline: auto; padding-inline: 16px;
7.1.2. Lv.2’ width: min(1000px , 100% - 16px) margin-inline: auto;
8. ベンダープリフィックス
8.1. -webkit-
8.2. -moz-
8.3. -ms-
8.4. -o-
8.5. live sass compilerなら自動でコンパイル時に付与
9. リセットCSS
9.1. ress.css
9.1.1. box-sizing:border-boxの指定
10. @charset "UTF-8";
11. @font-face
12. プロパティ
12.1. text系
12.1.1. font系
12.1.1.1. font-size
12.1.1.1.1. html { font-size: ○vw; }
12.1.1.1.2. html { font-size: 62.5%; }
12.1.1.2. font-weight
12.1.1.3. font-style
12.1.1.4. font-family
12.1.1.5. color
12.1.1.5.1. aタグに対して
12.1.1.6. class制御
12.1.2. line-height
12.1.2.1. 整数指定
12.1.2.2. px指定
12.1.3. text-align :
12.1.3.1. left
12.1.3.2. right
12.1.3.3. center
12.1.3.3.1. margin: 0 auto との違い
12.1.3.4. justify
12.1.3.5. インライン要素(画像)、インラインブロック要素、ピュアなテキスト、を動かすことが可能
12.1.4. text-shadow
12.1.4.1. text-shadowツール
12.1.5. text-decoration
12.1.6. letter-spacing
12.2. display :
12.2.1. block
12.2.2. inline-block
12.2.2.1. inline要素、インラインブロック要素にmargin-inline:autoは効かない
12.2.2.2. インラインブロック要素を水平中央にするには 親要素に対してtext-align:center
12.2.3. table
12.2.4. inline
12.2.4.1. vertical-align:
12.2.4.1.1. bottom
12.2.4.1.2. middle
12.2.5. none
12.2.6. flex
12.2.6.1. display:flex がないと使えないプロパティ達
12.2.6.1.1. justify-content
12.2.6.1.2. align-items
12.2.6.1.3. flex-direction
12.2.6.1.4. flex-wrap: wrap
12.2.6.1.5. 子要素に指定
12.2.7. grid
12.2.7.1. grid-template-colums :
12.2.7.1.1. fr
12.2.7.1.2. grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
12.2.7.2. place-items : center
12.2.7.3. gap
12.2.7.4. gridツール
12.3. float: left , right
12.3.1. 浮いている
12.3.2. clear: left;
12.4. boxモデル
12.4.1. width :
12.4.1.1. max-content
12.4.1.2. auto
12.4.2. height
12.4.2.1. auto
12.4.3. max-○○
12.4.3.1. 画像に対してmax-width:100%;
12.4.3.2. max-width:○○%はwidth:○○%と同じ
12.4.4. min-○○
12.4.5. 余白
12.4.5.1. margin
12.4.5.1.1. margin-inline
12.4.5.1.2. margin-block
12.4.5.1.3. margin: 0 auto;
12.4.5.1.4. ネガティブmargin
12.4.5.2. padding
12.4.5.3. margin,paddingでどちらでもいい場合はどっちか(基本margin)に統一
12.4.5.4. ショートハンド
12.4.5.4.1. 上下左右
12.4.5.4.2. 上下 左右
12.4.5.4.3. 上 左右 下
12.4.5.4.4. 上 右 下 左
12.4.6. border
12.4.6.1. border-color
12.4.6.2. border-style
12.4.6.2.1. solid
12.4.6.2.2. dotted
12.4.6.3. border-width
12.4.6.4. border-radius
12.4.6.4.1. 子要素に背景色がついている場合も小要素も角丸に
12.4.6.4.2. 4つ角個別指定
12.4.7. box-sizing:
12.4.7.1. border-box
12.4.7.2. content-box
12.4.8. box-shadow
12.4.8.1. X
12.4.8.2. Y
12.4.8.3. blur
12.4.8.4. spread
12.4.8.5. inset
12.4.8.6. 作成ツール
12.4.9. outline
12.5. animation
12.5.1. MAX 8 最低 animation-nameとdurationの２つ
12.5.2. animation-name
12.5.3. duration
12.5.4. delay
12.5.5. easing
12.5.5.1. ease
12.5.5.2. ease-in
12.5.5.3. ease-out
12.5.5.4. ease-in-out
12.5.5.5. linear
12.5.5.6. cubic-bezier
12.5.5.6.1. easingチートシート
12.5.6. iteration-count
12.5.6.1. infinite
12.5.7. fill-mode
12.5.7.1. forwards
12.5.8. よくあるアニメーションパターン
12.5.8.1. 無限横スクロール
12.5.8.2. スライドショー
12.5.8.2.1. ツール
12.5.8.3. fadein
12.5.9. @keyframes
12.5.9.1. 0% (from)
12.5.9.2. 100% (to)
12.6. transition
12.6.1. all
12.6.1.1. 個別プロパティ指定
12.6.2. 数学的に連続なものに有効
12.6.2.1. opacity: 0; visibility: hidden;
12.6.3. easing
12.6.4. 0.5s → .5s
12.6.5. :hover 等は元要素につけることで行きも帰りも発動
12.7. writing-mode
12.7.1. vertical-rl
12.7.1.1. 縦書きのときは-inlineと-blockが逆転
12.7.1.2. display: flex との関係
12.7.2. vertical-lr
12.7.3. horizontal-tb
12.8. background:
12.8.1. background-color
12.8.2. background-repeat
12.8.2.1. x
12.8.2.2. y
12.8.3. background-size
12.8.3.1. cover
12.8.3.2. contain
12.8.3.3. %指定
12.8.4. background-position
12.8.5. linear-gradient
12.8.5.1. ツール
12.8.6. background-attachment: fixed
12.8.6.1. iosで表示されない問題
12.9. position
12.9.1. fixed
12.9.2. relative
12.9.3. absolute
12.9.4. relative と absolute
12.9.4.1. position下で中央
12.9.4.1.1. 水平中央
12.9.4.1.2. 垂直中央
12.9.4.1.3. left:0 ,right: 0;
12.9.4.2. 子要素にheight100%としても浮いているため効かない
12.9.4.3. mainの要素が100vhより短かくても footerを画面下部に常に置く手法
12.9.4.4. 子要素において、画面最上部のmargin-topと最下部のmargin-bottomは外側扱い
12.9.4.5. 親要素がfixed,absoluteであってもrelativeのときと同じように基準となる
12.9.5. sticky
12.9.6. 値
12.9.6.1. top
12.9.6.2. left
12.9.6.3. right
12.9.6.4. bottom
12.9.6.5. inset
12.9.7. z-index
12.9.7.1. 要素の同一階層で比較
12.10. ul,ol系
12.10.1. list-style
12.10.2. list-style-position
12.11. imgタグ系
12.11.1. object-fit
12.11.1.1. cover
12.11.1.2. contain
12.11.2. object-position
12.11.3. aspect-ratio
12.12. overflow :
12.12.1. overflow-x:
12.12.2. overflow-y:
12.12.3. visible
12.12.4. auto
12.12.5. scroll
12.12.5.1. Macの場合スクロールバーの表示は設定によって異なる
12.12.6. hidden
12.13. cursor:
12.13.1. pointer
12.14. transform系
12.14.1. translate()
12.14.1.1. translateX
12.14.1.2. translateY
12.14.2. rotate()
12.14.3. scale()
12.15. clip-path:
12.15.1. polygon
12.16. filter:
12.16.1. gray-scale
12.16.2. drop-shadow
12.16.2.1. ツール
12.17. border-collapse: collapse
12.18. opacity
12.19. visibility:
12.19.1. hidden
12.19.2. visible
12.20. appearace: menulist;
12.21. scroll-behavier: smooth
12.22. 最適なプロパティの順
12.23. 値
12.23.1. グローバル属性
12.23.1.1. inherit
12.23.1.2. initial
12.23.2. 単位
12.23.2.1. %
12.23.2.2. vh
12.23.2.2.1. dvh,svh,lvh
12.23.2.3. vw
12.23.2.4. px
12.23.2.5. rem
12.23.2.5.1. em
12.23.2.5.2. rem と px どっち使うか問題
12.23.3. 関数
12.23.3.1. max( , )
12.23.3.2. min( , )
12.23.3.3. clamp( , , )
12.23.3.4. calc()
12.23.3.5. repeat( , )
12.23.3.6. rgb( 255, 255,255)
12.23.3.7. rgba( 255, 255,255, 1)
12.23.4. ; の扱い