【CSS装飾なしの場合のブラウザデフォルトの見た目】 Win10 Chrome113 number マウスオーバーすると上下の三角形アイコンが表示され、それをクリックすると数値が増減する。この仕様はEdgeでも同様（Win11・macOS VenturaのChromeも同じ） datalist マウス...

【Github Copilot を契約する】 契約状況確認 まずは現在の契約状況を確認してみましょう。GitHubのBilling Summary から確認できます。 「Enable GitHub Copilot」が出ていたら、未契約なので契約に進みます。 GitHub Copilotのページ から、 Monthl...

iframe埋め込みしたGoogle Mapが印刷プレビューに表示されなくて困ったので調べてみたまとめです。 iframe埋め込みしたGoogleMapが印刷プレビューに表示されている iframe埋め込みしたGoogleMapが印刷プレビューに表示されない 【印刷プレビューに表示され...

JavaScriptなしでサイドバーの一部分だけを追従させる動作を作ってみます。※もちろんサイドバーの中身全体を追従させることも、同様の方法でできます！ デモはこちら 【基本のコード】 <div class="column-wrap"> <div class="main-column"> ...

WordPressの管理画面で投稿（ページ）の表示件数はデフォルトで20件です。一覧の設定（表示オプション）から件数を変更することができますが、変更はユーザーごと・各投稿タイプごとに保存されるため、全ユーザー＆投稿タイプ一括で変更したい場合は手間が...

※この記事は、Chrome Beta 109.0.5414.74 で確認した内容です 【発生していた問題：borderの太さがバラバラになる】 Chrome （Chromium）でおそらく2021年ごろから、 border-collapse:collapse; を使ったときのtable内のborderの太さが一部太くなるバグが...

【やりたかったこと】 SplideのAuto Scrollエクステンション で自動スクロールを実装しつつ、splide_slide要素の数が少ないときはSplideの自動発火を切る実装です。 デモはこちら 【ダメになったときの動作】 動作としては以下のいずれかです。 Splideは発...

WordPressのAdvanced Custom Fieldsのグループブロックで、すべてのサブフィールドの値が空のときにfalseがほしい！というときに使える、「連想配列の値がすべて空だったらfalseを返す方法」をご紹介します！ 【先に結論】 array_filter() を使う。 $group...

この記事は 【CSS clip-path】SVGを使ったクリッピングマスクの位置を右から○pxにするには の続編です！ デモはこちら clip-pathを使ったバージョンでは、デザインデータがそもそも「シェイプでマスク」をつかった前景と、不透明度を使った背景の2枚の画像...

CSSのclip-pathを使ったクリッピングマスクを、SVGのパスで作ることができます。しかし、レスポンシブ対応や位置の調整が難しいものです。 今回は、クリッピングマスクの位置を「画面の右端から○○px」という指定にしておしゃれなメインビジュアルにしたい...