2minCording Part1

ChiYo 2021/04/07

2分コーディングに挑戦！
この人のやつをやっていく
https://codepen.io/abxlfazl/pen/VwKzaEm

ChiYo 2021/04/07

    <button class="menu__item active" style="--bgColorItem: #ff8c00;" >
      <svg class="icon" viewBox="0 0 24 24">
        <path d="M3.8,6.6h16.4"/>
        <path d="M20.2,12.1H3.8"/>
        <path d="M3.8,17.5h16.4"/>
      </svg>
    </button>

svgとは何なのか🤔

ChiYo 2021/04/07

ふむふむ

https://ferret-plus.com/7522

ChiYo 2021/04/07

画像を書く（SVGが作れる）ツールもあるっぽい

ChiYo 2021/04/07

なるほど！！
これ１つの塊でこの画像を作ってるのか！！

path1つがそれぞれの線になってる

    <button class="menu__item active" style="--bgColorItem: #ff8c00;" >
      <svg class="icon" viewBox="0 0 24 24">
        <path d="M3.8,6.6h16.4"/>
        <path d="M20.2,12.1H3.8"/>
        <path d="M3.8,17.5h0.4"/>
      </svg>
    </button>

ChiYo 2021/04/12

こんなツールまである👀
https://www.svgator.com

ChiYo 2021/04/12

box-sizing: border-box;を指定することで、width とheight にpaddingも含む事ができるようになる

ChiYo 2021/04/13

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

box-sizing: inherit;で継承されない親のプロパティを継承することができるようになる

ChiYo 2021/04/14

-webkit-tap-highlight-color: transparent;
ここではスマホ専用のリンクをタップした時の動きが書いてある

ChiYo 2021/04/14

all: unset;を使うことで、プロパティをリセットできる

ChiYo 2021/04/14

アンダースコアを２つ繋げる命名規約があるらしい
BEMっていう命名規約
https://nycreation.jp/blog/archives/289

ChiYo 2021/04/15

will-changeでは、ブラウザーに要素の変更の予測を伝えている

ChiYo 2021/04/15

transform: scale(0);は、ⅹ軸とy軸での拡大率を指定できる

ChiYo 2021/04/15

transformプロパティでは色んな事が出来るんだ👀
２D変形、３D変形ができる

ChiYo 2021/04/15

なるほど！！
この丸い所はbefore要素を作ってやっているのか～
だから最前面じゃなかったりtransformで色々スタイルが指定してあるんだ👍

ChiYo 2021/04/16

SVGで使える装飾プロパティ
fill、stroke-dasharrayとか

ChiYo 2021/04/16

animationを使うとanimationに関わるプロパティが一括で指定できる
@keyframesでは、アニメーションの開始時と終了時のスタイルを指定することができる

ChiYo 2021/04/18

querySelectorを使うことで、HTMLの要素を取得することができるようになる

https://www.sejuku.net/blog/70581

ChiYo 2021/04/18

選択によってスタイルが変わる動きの書き方は、ここのサイトが参考になった👌🏻

ChiYo 2021/04/18

イベント処理の書き方
https://www.sejuku.net/blog/57625