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

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

CSS

いつの間にか-webkit-overflow-scrolling: touchが不要になっていることに気づく 📱

CSS

overflow: scrollと一緒に使うことで、慣性スクロールを有効にしてくれることでお馴染みの-webkit-overflow-scrolling: touchですが、いつのまにか不必要になっていることに気づきました。 iOS13.7のSafariとAndroid10のChromeで確認しましたが、overflow: s…

隣接セレクタを使ってJavaScript無しでチェックボックスをカスタムする ✅

CSS

DEMO See the Pen Custom CheckBox without JavaScript by kimmy (@kimmy) on CodePen. 解説 checkboxとlabalと隣接セレクタをうまく使えば、JavaScriptを一切書かずにチェックボックスをカスタムすることができます。 ポイントとしては、❶ チェックボックス…

ドラッグ&ドロップでファイルをアップロードする(HTML Drag and Drop API無しバージョン) 📦

ウェブサイトにファイルをアップロードする際、ファイルをドラッグ&ドロップするUIをよく見かけます。 そういったUIを実装しようとすると、HTML Drag and Drop APIを使いたくなることでしょう。developer.mozilla.orgしかし、実はinputタグでも簡単に作成す…

疑似要素(before、after)のcontentをkeyframeアニメーションで動的に変更する ✍️

CSS

keyframeアニメーションでcontentって差し替えられるのかな。と思って試してみたところ動いた。 使いようによっては便利かもしれない。

ヘッダーをfixedにするときに心掛けて欲しい、たった2つのこと 2️⃣

DEMO See the Pen Fixed Header by kimmy (@kimmy) on CodePen.ヘッダーってfixedで実装されることが多いのですが、個人的には2つだけ心掛けて欲しいことがありまして、例えば、コードレビューのレビュアーになることがあったら、少なくとも❶は確実に指摘し…

scroll-snapをつかってスクロールをぴたっと止める 📱

CSS

先日、「最新のSafariとChromeで観覧できればOK!」というウェブサイトを実装することになりまして、これはチャンス!ということで、前々から気になっていたscroll-snapを実戦投入してみました。developer.mozilla.orgJavaScriptを一切書かずに、ぴたっと吸…

input type="number"についている上下ボタン(スピンボタン)の見た目をCSSで調整する 1️⃣

CSS

数字を入力することに特化した、input type="number"ですが、デフォルトで入力値をインクリメント・デクリメントさせるボタンがついてます。 webkit系のブラウザに限られますが、実はこちらのボタン、CSSを当てることが可能です。 その名も、-webkit-inner-s…

CSS関数で属性セレクタの値を取得する 💻

CSS

developer.mozilla.org CSS関数のattr()をつかえば、属性セレクタの値を取得することができます。 昨日、属性セレクタを調べているときに知りました。 HTML <div data-text="Ya-Ha-!"></div> CSS [data-text]:before { content: attr(data-text); } と書けば、 [data-text]:before { content…

IE11でdatasetをつかってdata属性を動的に更新すると属性セレクタで指定したスタイルが反映されない 💻

結論 IE11ではdatasetでdata属性を更新してもスタイルが反映されない IE11でもsetAttributeでdata属性を更新すればスタイルが反映される! 詳細 かれこれ、ずーっと悩んでいたことだったのですが、IE11では、 属性セレクタをつかってスタイルを指定 dataset…