tag:qiita.com,2005:/super-mana-chan/feedsuper-mana-chanの記事 - QiitaQiitaでユーザーsuper-mana-chanによる最近の記事2024-03-19T18:24:39+09:00
https://qiita.com/super-mana-chan
tag:qiita.com,2005:PublicArticle/18379482024-03-19T18:24:39+09:002024-03-19T18:24:39+09:00https://qiita.com/super-mana-chan/items/13bcac950496dd88c64e【CSS】mask-imageプロパティで簡単にSVGの色変えができたhover時、ナビのカレント時など同じアイコンで色だけ変えたいときに、別の色にした別画像で書き出すのが面倒で悩み続けてきました。
useタグを使う方法もありましたが、何故かうまくできず、、、
そこで出会ったmask-imageがかなり優秀だったので備忘録です。
mask-...super-mana-chantag:qiita.com,2005:PublicArticle/18379472024-03-19T18:24:05+09:002024-03-19T18:24:05+09:00https://qiita.com/super-mana-chan/items/81f6b24b3a0b0e613083【CSS】<input type="file">は::file-selector-buttonでスタイルをつけようは直接スタイル指定ができず、デザインの変更
が面倒だったのですが、::file-selector-button を使えば簡単に指定できることを知ったので備忘録です。
使い方
See the Pen
::file-selec...super-mana-chantag:qiita.com,2005:PublicArticle/18310672024-03-01T17:43:07+09:002024-03-01T17:43:07+09:00https://qiita.com/super-mana-chan/items/4214731fd99fa2819f2cGridのgapで後悔したことgridって？ gapって？
See the Pen
Untitled by himeka223 (@himeka223)
on CodePen.
grid
...子要素を見えないグリッドで仕切り、配置、サイズなど自由にできる
gap
...子要素同士...super-mana-chantag:qiita.com,2005:PublicArticle/16735532023-05-25T14:30:38+09:002023-05-25T14:55:20+09:00https://qiita.com/super-mana-chan/items/47c71d63c0de21818318EJSにwebp生成と画像圧縮の自動化を追加するnode.jsで画像の圧縮とwebp生成を自動化するをEJSテンプレートに追加しました。
figmaから書き出し→サルワカなどのサイトでwebpに変換...の作業なくなり、効率がぐんと上がりました。
今回はそのjsを読み解いていこうとおもいます。
パッケージのインストー...super-mana-chan