お疲れさまです！
早いものでもう師走ですね…
今年のウェブ業界の出来事といえば、1番はなんと言ってもIEのサポート終了ではないでしょうか。
検証ブラウザが減って新しい技術が使いやすくなる一方、しっかり流行りの技術をインプットしていかないといけなくなりました。（IE終了関係なくインプットは大事なんですが。）
みなさまはどういった方法で情報収集していますか。
わたしは最近はInstagramで何気なく見てキャッチアップしています。
そこで今回は今年Instaで見かけた気になるコードだったり、
何かインスピレーションを受けそうなコード、アカウントを共有したいと思います〜！
1行で書ける 知っておくと便利そうなコード
人によっては当たり前のコードもあるかもですが、わたしけっこう知らないもの多かったです。
progress
プログレスバーを表示できる。
<progress value="32" max="100">32%</progress>
See the Pen Untitled by un-T Morikawa (@unt-morikawa) on CodePen.
hidden
タグを非表示できる。（実際使う場面あるのか…🤔）
<p>
次のテキストは「<span hidden>非表示</span>」です
</p>
See the Pen Untitled by un-T Morikawa (@unt-morikawa) on CodePen.
Spellcheck
スペルのチェックを行ってくれる。
次の例文では1文目が誤字っています。クリックすると誤字がハイライトされます。
<p contenteditable spellcheck="true">hello</p>
See the Pen Untitled by un-T Morikawa (@unt-morikawa) on CodePen.
Capture
スマホで「ファイルを選択」をクリックしてみてください。
カメラが起動します。
<input type="file" capture="user" accept="image/*">
See the Pen Untitled by un-T Morikawa (@unt-morikawa) on CodePen.
cssで画像リフレクト
-webkit-box-reflect: below 4px linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3));
See the Pen Untitled by un-T Morikawa (@unt-morikawa) on CodePen.
インスピレーション湧きそうなコード
ちょっと数少ないですが、どこかチャンスがあれば使いたいな〜と思うコード。
Avatar List
アイコン（丸）をホバーすると横にスッとズレるアニメーション
「~」をつかって隣接要素にstyleを当てているところ、色々使えそうですね
See the Pen Untitled by un-T Morikawa (@unt-morikawa) on CodePen.
css shape
cssのみで月の形shape。お手軽ですね。
See the Pen Untitled by un-T Morikawa (@unt-morikawa) on CodePen.
css loader
汎用性ありそうなローディングアニメーション。
コピペでいけるのも使いやすいですね。
3本ラインのローダー
cssだけでポップなローダー
See the Pen Untitled by un-T Morikawa (@unt-morikawa) on CodePen.
回転ローダー
See the Pen Untitled by un-T Morikawa (@unt-morikawa) on CodePen.
脈打つパルスローダー
See the Pen Untitled by un-T Morikawa (@unt-morikawa) on CodePen.
時計型ローダー
See the Pen Untitled by un-T Morikawa (@unt-morikawa) on CodePen.
液体が注がれるローダー
See the Pen Untitled by un-T Morikawa (@unt-morikawa) on CodePen.
炎の揺れみたいなローダー
See the Pen Untitled by un-T Morikawa (@unt-morikawa) on CodePen.
スマホ メニュー
斜めのアニメーションが心地良いメニュー
洒落とんな〜
See the Pen Untitled by un-T Morikawa (@unt-morikawa) on CodePen.
フッター固定に使えそうなメニュー
こちらはcssのみでアニメーションさせています。
See the Pen Untitled by un-T Morikawa (@unt-morikawa) on CodePen.
まとめ
今年気になったコードをまとめてご紹介しました！
ほんとはもっとすんごい動きのやつとかもストックしてたんですが、
コードを拾えなかったり、有料のものだったりして全部はご紹介できませんでしたー
ただ、参考にさせていただいた方々のアカウントはオススメなので、
ぜひフォローしてキャッチアップしていきましょう。
参考
https://codepen.io/vlt_dev/pens/public
https://codepen.io/OfigenusMaximus/pens/public
https://codepen.io/nothing4us/pens/public
https://codepen.io/davidhaz/pens/public