-
Code
CSSで作るボックスデザイン
素敵なデザインのボックスに出会ったので記事にしてみました 下のイメージのようなボックスをコーディングしました。 See the Pen Untitled by shimpei (@shimpei) on CodePen. […] -
Code
AOS.jsランダム（data-aos-delayの値をランダムに設定する方法）
AOSを使用して要素をふわっと出現させるアニメーションはよく使用されます。タイミングを遅らせたいときにはdata-aos-delay属性を使いますが、ランダムに出現させたい時、AOSにはそのようなオプションが用意されてい […] -
React
Duplicate use of selection JSON ID cell
ビルド時にprosemirror-stateとprosemirror-tablesのバージョンの互換性がないようでエラーがでた。 node_modulesモジュールを一度削除し、インストールするも変わらず。 両方@lat […] -
CSS
ミックスブレンドモード早見表【XDデザイン → CSS】
ミックスブレンドモードの指定をXDデザインから、CSSに変換するのに毎回調べてるな。使いやすい一覧表ほしいな。 しんぺー XD to CSSの一覧を作成しました。一応CSS反映時のサンプルも用意しているので、ブレンドの結 […] -
Code
ホバー時のみ表示させたい要素が、意図せず再表示になる問題。pointer-event: none;で解消されます。
ヘッダーナビをホバーした時に、子メニューが表示されるようにしたけど動き変。マウスアウトして非表示にした後、要素があった箇所にマウスを移動させるとまた表示される！なんで？？opacity: 0;、visibility: h […] -
Code
CSSだけで円グラフ・ドーナツグラフを作成する
円グラフってCSSで作れないよね？Chart.js使うのも大層だし画像で書き出すか。 しんぺー conic-gradientで簡単につくれますよ〜 完成形のイメージ こんな感じです。CSSで割と簡単に作れますよ。 See […] -
Code
【slick.js】画面に表示されたらスライドを開始する。
スクロールしたときにスライダーを動かす記事は多いけど、リサイズのことも考えたり面倒。いい方法ないかな？ しんぺー IntersectionObserverを使えばリサイズの心配は不要です。サンプルコードはコピペで使えるよ […] -
Code
ReactMarkDownでテーブルのエラーを解消する
マークダウンをHTMLにトランスパイルしてくれるReactMarkDownを使用していましたが、最新バージョンでエラーになり、詰まったので解決方法をメモに残しておきます。こんな感じのエラーが出ました。 シンプルなマークダ […] -
Code
tab内にslickを配置したときに起きる不具合を修正する
タブの中にslickを入れているけど、切り替えたときに表示が崩れたりする。。なぜ？ しんぺー タブを切り替えたときにslickを初期化してあげるとうまくいきますよ。解説していきますね。 サンプル 不具合のサンプルと、修正 […] -
Code
モーダル開いたら動画を再生。閉じたら動画を停止＆再生位置を初期化
モーダル内に動画を設置したけど、開いたときに自動で再生させたい。あと、一度再生するとモーダルを閉じてもずっと動画再生されてる。バックグラウンドで音だけ聞こえてる、、なんとかして。 しんぺー モーダルを開いたり閉じたりした […]
