みかづきブログ・カスタム

基本的にはちょちょいのほいです。

2024-04-01から1ヶ月間の記事一覧

details要素のgrid-template-rowsを0frから1frにtransitionさせることでアコーディオンを実装する 🪗

前々回のdetails要素と前回のgrid-template-rowsの合わせ技です。blog.kimizuka.org blog.kimizuka.orgdetails要素の開閉にアニメーションを設定したい場合、本当はopen属性の有無で子要素のgrid-template-rowsを変更することで、JavaScriptなしで実現できそ…

grid-template-rowsを0frから1frにtransitionさせることでheightがautoのアコーディオンをCSSのみでアニメーションさせる 🪗

CSS

DOMの高さを0からautoにCSSアニメーションでスムーズに変更したいとき、grid-template-rowsを使うといい感じになるということを教えていただきました。 DEMO SCSS(抜粋) dd { display: grid; // ❶ grid-template-rows: 0fr; // ❸ transition: grid-templat…

details要素のopen属性の有無でプロパティを変化させる際、transitionを設定してもアニメーションしない 😱

CSS

details要素自体をアニメーションさせる場合 details要素自体にtransitionを設定し、open属性の有無でプロパティを変化させたときはアニメーションします。 ※ Google Chrome(123.0.6312.124)でしか確認していません。 DEMO SCSS details { background: rgb…

python-shell(5.0.0)からコールバック関数の渡し方が変更になっていることに気づく 🤖

Node.jsからPythonスクリプトを実行できるpython-shell。 僕はNode.jsのサーバからmyCobotを操作する際に活用しています。blog.kimizuka.org基本的にはrunStringメソッドを使ってPythonでコードを実行しています。 ものすごくシンプルに書くと、 import { Py…

Intl.Segmenterを使って絵文字を含んだ文字列のlengthを取得する ✏️

かつて、文字列を配列に分割代入することで絵文字を含んだ文字列のlengthを簡易的に取得したことがありました。blog.kimizuka.orgサロゲートペアに対して、String.prototype.lengthで文字列の長さを取得しようとすると、うまくいかないときもありますが、 co…

フロントでテキストの長さをカウントする際にHTMLタグを除外する 🌏

noteやcodocなど、文章の途中に有料エリアを設定できるプラットフォームが増えてきました。 大体どのプラットフォームでも課金前から有料エリアの文字数を知ることができるようにデザインされています。 noteでの有料エリアの文字数の提示この文字数カウント…

Next.js(Page Router)のuseRouter().asPathにはhashが含まれる 👀

useRouterの公式ドキュメントがこちら。nextjs.orgasPathの項目には、 asPath: String - The path as shown in the browser including the search params and respecting the trailingSlash configuration. basePath and locale are not included. https://n…

特殊文字を使って擬似要素(before, after)に改行を設定する 📝

CSS

\Aで改行できることを知りました。 white-space: pre-wrapとセットで設定する必要があります。 SCSS p { &:after { white-space: pre-wrap; content: '改\A行'; } } DEMO 関連記事 blog.kimizuka.org