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…

これまで、 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を使うことが多いのですが、いま改めて有名ウ…

通常、positionをfixedにした要素の親要素のoverflowをhiddenにしても、はみ出した部分は隠れません。 HTML <div class="parent"> <div class="child"></div> </div> CSS .parent { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 160px; height: 160px; background: red; overfl…

developer.mozilla.orgAndroid Chromeではアンダーラインが表示されるのに、iOSのSafariでは表示されないという事態に直面しまして、いろいろ調べてみると、text-decorationを一括指定すると、Safariで表示されなくなることに気づきました。iOSでもMacOSでも…

DEMO 解説 clip-pathにSVGのID（正確にはSVG内の図形のID）を渡してあげればその図形をマスクにすることができます。developer.mozilla.orgまた、SVGもタグなのでCSSアニメーションで動かすことができます。 そうすると、合わせ技でマスクをアニメーションさ…

❶ position: fixedの要素を用意する ❷ ❶で用意した要素に背景色を設定する ❸ ❶で用意した要素の子要素を用意する ❹ ❸で用意した要素をY軸で180度回転させる（裏返す）という処理、つまりコードで書くと、 HTML <div> <p></p> </div> CSS div { position: fixed; background-col…

SegoeUIはマイクロソフトがよく使用するフォントであり、Windowsに搭載されていますが、Macには搭載されていません。 なので、ウェブサイトでSegoeUIを使い、絶対に表示させたい場合、ウェブフォントを導入することになります。まず、Googleフォントで探して…

developer.mozilla.org最近、clip-pathを使い、DOMにクリッピングマスクを掛けることが多いのですが、クリップしたDOMにbox-shadowで影を落とそうとすると上手く行きませんでした。 影が落ちない例 div { width: 200px; height: 100%; background: #fff; cli…