以下の記事で stylus → dart-sassに変更はしたが、dart-sassに変更したにあたって、@importの記載を@use,@forwordに変更をしたため、その時に行なったことを紹介します。 jackswim3411.hatenablog.com importの廃止についての記事 sass-lang.com 参考にした…

以下の記事の続きのものになります。 qiita.com 遊びでcssを使ったアンパンマンを制作したのですが、意外とcssの学びが多かったので、学べたことをメインで共有します。 完成物 See the Pen css-only-Anpanman's face by miwa_shuntaro (@miwashutaro0611) o…

制作物 https://react-gsap-animation.netlify.app/ 対応したこと 左上の「Add Circle」を押したら、アニメーションのコンポーネントが表示される 要素のアニメーションはクリックされた分実行される アニメーションのコンポーネントについて 中央のアニメー…

GitHubのプロフィールページを最近カスタマイズしたため、その時に行なったことについて紹介いたします。 GitHubのプロフィール編集について docs.github.com 参考にしたページ zenn.dev dev.to 完成したページ github.com 実装した手順 1. バッジ部分を作成…

stylusからdart-sassに変更したので、その時に対応したこと、stylusとscssのコードの比較に載せたものになります。 変更した箇所のコードについては以下になります。 github.com stylusからdart-sassに変更した理由 stylintでstylusのインデント調整した後に…

マウスストーカーを制作したので、その方法について紹介します。 制作物 See the Pen mouse-stalker3 by miwa_shuntaro (@miwashutaro0611) on CodePen. 今回行ったこと マウスの場所に応じて、要素が移動 ポインター要素の周り線のアニメーションの追加 リ…

既存のcssプロパティの値をJavaScirptで取得することがあったので、その時の対応したことになります。 結果 html <div class="block"></div> .block { width: 300px; height: 60px; } /** * cssで適応されているスタイルを返却 * @param {HTMLElement} element 取得を行うHTML要素 * @…

CSS in JS でのlint(今回はemotion)の設定を行ったのときのその時に行ったことになります。 今回使用するパッケージのバージョン { "@types/react": "^17.0.2", "next": "^10.0.1", "react": "^17.0.1", "react-dom": "^17.0.1", "postcss-jsx": "^0.36.4", …

オリジナルの3Dオブジェクトファイルをwebに表示を行ったため、そのときのメモ。 表示するオブジェクトの用意 オリジナルで用意を行う場合、blenderのソフトから作成を行うことができますが、turbosquidのサイトからFreeで3Dオブジェクトを使用することもで…

viteを使用して、vite.config.jsの設定を行うを少し行ったので、そのときのメモ。 viteのインストール v1バージョンの場合 (非推奨) ※ project-appは制作したいアプリ名。 $ npm init vite-app project-app // or $ yarn create vite-app project-app 今回は…

React + ESLintで設定を行なっているときに error 'React' was used before it was defined no-use-before-define の設定が出たので、その時の解消した方法です。 no-use-before-defineとは jsファイル内で変数を指定しているのに変数が使われていない時に出…