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

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

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

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

以前つくったDEMOをもとに、左上に入力した絵文字を一刀両断するDEMOをつくりました。blog.kimizuka.org DEMO ソースコード（抜粋） 絵文字の判定 document.querySelector('input').addEventListener('input', (evt) => { if (evt.target.value.length === 2…

position: stickyを使うと、簡単に吸着されるようなページスクロールを実装できます。developer.mozilla.org DEMO 非常に手軽です。しかし、ここにページ内リンクをscrollIntoViewを使って実装するとちょっとした問題が起こります。具体的にいうと、現在位置…

CSSで擦りガラス越しに見ているようなエフェクトをかけたい際、backdrop-filterを使うといい感じに実装できます。 DEMO ソースコード（抜粋） CSS .backdrop-filter { backdrop-filter: blur(4px); } しかし、現状ではSafariで使用するにはベンダープレフィ…

長らくiOSのSafariでは、input要素にuser-select: noneを掛けると、フォーカス時にキーボードが表示されませんでした。 僕は、ElectronやPWAを開発することが多いので、 * { -webkit-user-select: none; user-select: none; としてしまうことが多かったので…

developer.mozilla.orgOSのダークモードですが、メディアクエリで簡単に判定できます。 @media (prefers-color-scheme: dark) { /* ダークモードのスタイルを書く */ } DEMO 最近つくっている、PWAをホーム画面に登録することを促すポップアップです。 ライ…

フラットなボタンが欲しくなって、はじめは イラストレーター で作ってSVGで書き出そうと思っていたのですが、僕のイラレスキルだと、CSSで作ってしまった方が手っ取り早かったので、CSSでさささっとつくってみました。 DEMO See the Pen button by kimmy (@…

Electronで展示用のアプリケーションをつくった時などに役に立つTipsなのですが、CSSで、 html { cursor: none; } と指定すればマウスカーソルが非表示になります。 DEMO 常に非表示にすると、調整時などに困ったことになるので、何か条件をつけて表示・非表…

iOSのSafariでbuttonタグを連打した際、ダブルタップと判定され、画面が拡大・縮小する現象に困っていました。https://develop.kimizuka.org/touch-action/auto/ をiOS16.13.1のSafariで確認した様子 ボタンをダブルタップすると画面が拡大・縮小するdevelop…

タイトルの通りですが、クリックした箇所を起点にDOMを真っ二つに一刀両断したいなと思い、コードを書いてみました。 思い出の中のFF6の斬鉄剣のようなイメージで制作しましたが、シンプルに仕上げるためにエフェクトは入れていません。 一応、横方向、縦方…

はじめに 結論 px指定 mm指定 調査 ❶ グリッドを表示して計測 ソースコード 結果 調査 ❷ DOMの大きさをmmで指定して計測 ソースコード 結果 結論 はじめに 最近、HTMLをPDFに変換したいと思うことが増えてきまして、いろいろ調査していたのですが、そんな中…

これまで、アスペクト比を固定しつつサイズ可変のDOMをつくる際は、before要素のpadding-topを使ってました。 DEMO ソースコード（抜粋） SCSS div { width: 50%; background: red; &:before { display: block; padding-top: calc(100% * 9 / 16); content: …

developer.mozilla.orgtransform-matrixを使って、クリックした箇所を基準に2倍に拡大する四角形をつくりました。もう一度クリックすると元の大きさに戻ります。 DEMO ソースコード JavaScript const rect = document.getElementById('rect'); let scale = 1…

いままで意識したことがなかったですが、フォントファミリーを変更すると、liタグのマーカー（左についている黒丸や数字など）サイズが結構変わることがあります。 DEMO PC版のGoogle Chrome「Noto Sans JP」と「san-serif」を並べていますが、黒丸は「Noto…

以前、clip-pathでDOMにマスクを掛けつつdrop-shadowで影を落としたことがあったのですが、clip-pathとborderを併用できないかなと思い色々試してみました。blog.kimizuka.org結論としてはborderとの併用は難しく、同じclip-pathを設定した要素をサイズ違い…

Googe Chromeではinput type="time"の右端に時計のアイコンが表示されます。このアイコンは、 [input type="time"]::-webkit-calendar-picker-indicator というCSSセレクタでセレクトできるので、非表示にしたい場合、 [input type="time"]::-webkit-calenda…

DEMO clip-pathで切り抜いたDOMをhtml2canvasで画像化すると、clip-pathが無視されます。 もろもろ試したところ、dom-to-imageというライブラリを使ってみると、しっかりとclip-pathを反映することができました。github.com html2canvasで画像化 dom-to-imag…

CSSのscroll-snapをつかってカルーセルをつくってみました。developer.mozilla.org ループ無し DEMO ソースコード（抜粋） JavaScript const { useEffect, useRef, useState } = React; function App() { const [ list ] = useState([1, 2, 3]); const width…

先日、radial-gradientを使ってパキッとした円を描こうと思った際に、円形グラデーションの%の指定が、円に内接する四角形の大きさを指定していることに気づきました。 ソースコード（抜粋） div { display: flex; align-items: center; justify-content: ce…

accent-colorというCSSプロパティを使えば、input要素の色を変更できることしりました。developer.mozilla.orgInternet Explorerは非対応ですが、モダンブラウザの最新版であれば問題なく使えるようです。 検証 ソースコード input { accent-color: red; } …

linear-gradientとbackground-sizeをうまく使うと、背景に繰り返しで線を引くことができます。 DEMO CSS div { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(0deg, red 1px, transparent 1px); background-size:…

最近、CSSのmix-blend-modeを使って、HTMLの色を動的に変更しようと試みることがありまして、デモページを作って、改めて使用できる値を確認しました。developer.mozilla.org 基本的な使い方 mix-blend-modeを指定すると、重なっていている要素の色を合成し…

最近、CSSのfilterを使って、HTMLの色を動的に変更しようと試みることがありまして、デモページを作って、改めて使用できる関数を確認しました。※ SVGフィルターは試してません ※ 上限はある程度適当に決めていますdeveloper.mozilla.org DEMO 記述順 今回は…

iOS15から明示的にcolorを当てないと、optionの文字色に-apple-system-blueと当てられてしまい、青くなってしまうようです。 body { color: #000; } option { color: #000; } では修正できなかったのですが、 select { color: #000; } で上書きました。ただ…

ものすごく特殊な例な気がしますが、擬似要素に半角スペースを設定しようと思い、SCSSで、 p { &:before, &:after { content: ' '; } } と書いてみたのですがダメでした。HTMLであれば実体参照を使うところなのですが、 p { &:before, &:after { content: '&…

これまで、 input::placeholder { color: red; } input::-moz-placeholder { { color: red; } input::-ms-input-placeholder { color: red; } という感じでベンダープレフィックスをつけて実装していたのですが、改めてMDN Web Docsを確認したところ、IE以外…

結論 調査結果 Google Apple Facebook Amazon Microsoft Twitter Instagram フォントの指定を考える ウェブサイトを作るときの重要な要素のひとつにフォントの選定があります。 最近はもっぱらNoto Sans Japaneseを使うことが多いのですが、いま改めて有名ウ…