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

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

CSS

クリックした箇所を起点に絵文字を一刀両断する 🔪

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

position: stickyとscrollIntoViewを組み合わせて使う 💻

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

iOSでbackdrop-filterを使うときはベンダープレフィックスを付与するべし 📱

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

iOSにおけるinput要素とuser-select: noneのコンビネーションを調査する 📱

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

CSSでダークモードを判定する 🐦‍⬛

CSS

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

CSSでボタンをつくる 🔘

CSS

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

CSSの力でマウスカーソルを非表示にする 🖱

CSS

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

CSSのtouch-actionを使ってiOSのSafariでUIをダブルタップしても画面が拡大・縮小しないようにする 🔍

CSS

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

クリックした箇所を起点に画像を一刀両断する 🔪

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

Google Chromeの印刷機能でWebサイトをA4のPDFに変換する際、1ページに表示できるDOMの大きさ何pxになるのか調査する 📄

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

CSSのaspect-ratioを使ってDOMの縦横比を指定する 📺

CSS

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

transform-matrixを使って、クリックした箇所を基準に拡大縮小する四角形をつくる 🔍

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

liタグのマーカー(黒丸や数字)はフォントファミリーに依存することに気づく 😱

CSS

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

clip-pathでDOMにマスクを掛けつつborderのような枠線を描く ✏️

CSS

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

input type="time"に表示される時計のアイコンを非表示にする ⏰

CSS

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

clip-pathで切り抜いたDOMを画像化する 🖼

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

scroll-snapを使ってカルーセルをつくる 🖱

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で円形のクラデーションを描く際は内接する四角形の大きさを指定する ⭕️

CSS

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

accent-colorを使って、チェックボックス(type="checkbox")、ラジオ(type="redio")、スライダー(type="range")の色を変更する ✅

CSS

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

CSSで方眼紙のような線を引く 📄

CSS

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を試す(トランジションとの併用を検証) 🎨

CSS

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

CSSフィルターを試す(記述順・トランジションとの併用を検証) 🎨

CSS

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

iOS15のSafariでoptionの文字色が青になるのでスタイルを上書きする 🟦

CSS

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

特殊文字を使って擬似要素(before, after)に半角スペースを設定する 📝

CSS

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

placeholder属性の色を変更する(最新ブラウザに限ればプレフィックスが不要なことに気づく) 🎨

CSS

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

GAFAのfont-familyを調べて、フォントの指定を再考する 📝

CSS

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

position: fixedで位置を指定した要素の親要素にoverflow: hiddenを指定を併用したい場合、親要素のtransform, perspective, filterを指定する 👀

CSS

通常、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…

Safariでtext-decorationを一括指定すると表示されなくなる 👁

CSS

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

clip-pathを使ってSVGをマスクとして使いつつ、マスクをアニメーションさせる 😷

CSS

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

Safariにてbackground-colorの設定されたposition: fixedの子要素のbackface-visibilityがおかしい気がする 🤔

CSS

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