klim0824のブックマーク - はてなブックマーク

scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する

scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する 2024.06.01 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがどのように表示されるかは OS やブラウザの設定により異なりますが、大きく分けて以下

klim0824 2024/06/02

css

リンク

Tailwind CSS を使う時に一緒に入れたいライブラリ

Tailwind CSS はすべてをユティリティクラスで書くという特性上、HTML にはクラスがたくさん書かれることになります。1 つの要素に対してクラスがたくさん並んでいると、視覚的にどのようなスタイルが適用されているのかを把握するのが難しくなります。条件によってクラス名を付け替える処理を行っていると更に複雑になります。 <button className={` ${variant === "primary" && "border border-blue-500 bg-blue-500 text-white"} ${ variant === "secondary" && "border border-gray-500 bg-gray-500 text-white" } ${variant === "default" && "border border-gray-500 bg-white

klim0824 2024/02/04

Tailwind

リンク

Bun でクロスプラットフォームなシェルスクリプト

Bun でクロスプラットフォームなシェルスクリプト 2024.01.20 Bun の `$` を使うと、クロスプラットフォームなシェルスクリプト（Bun Shell）を書くことができます。Bun Shell は macOS (zsh)、Linux (bash)、および Windows (cmd) と OS の違いを気にせずにシェルスクリプトを書ける、JavaScript オブジェクトとのやりとりが可能であることが特徴です。

klim0824 2024/01/21

リンク

input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案

input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案 2023.12.23 スイッチは多くのウェブサイトで使われているものの、HTML の標準要素としては存在していませんでした。そのため多くの開発者は、スイッチを実装するために独自の実装を行っていましたが、このような独自の実装はアクセシビリティの問題を引き起こす可能性がありました。この問題を解決するために、WHATWG により `input[type="checkbox"]` 要素に `switch` 属性を追加することが提案されました。この属性を指定することで、チェックボックスをスイッチとして利用できます。 input 要素の switch 属性は 2023 年 12 月現在実験的に実装されている機能です。将来的に仕様が変更される可能性があります。スイッチとは

klim0824 2023/12/24

html

リンク

:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う

:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う 2023.10.13 ユーザーの操作の後にフォームの検証に基づき有効か無効かを示すために使用できる :user-valid、:user-invalid 擬似クラスを紹介します。従来の :valid、:invalid 擬似クラスと異なり、ユーザーがフォームに入力するまではスタイルを適用されません。 :user-valid、:user-invalid 擬似クラスは、ユーザーの操作の後フォームの検証に基づき有効か無効かを示すために使用できます。フォームの検証として、以下のような例があげられます。 required 属性を指定した要素に値が入力されているか pattern 属性を指定した要素に指定した正規表現にマッチしているか min や max 属性を指定した要素に指定した範囲内の値が入力されているか

klim0824 2023/10/14

リンク

アニメーションの無効設定は prefers-reduced-motion に任せるか、アプリケーションの設定で制御するか

アニメーションの無効設定は prefers-reduced-motion に任せるか、アプリケーションの設定で制御するか 2023.08.06 prefers-reduced-motion とは、ユーザーの環境設定によって余計な動きを抑制することを要求したことを検出するメディアクエリです。この設定は各 OS ごとに設定できます。ユーザーがアニメーションを無効にできることは、アクセシビリティの観点で重要です。prefers-reduced-motion によりアニメーションを無効にするのでも十分ですが、アプリケーションの設定として持たせるべきだと考えています。 prefers-reduced-motion とは prefers-reduced-motion とは、ユーザーの環境設定によって余計な動きを抑制することを要求したことを検出するメディアクエリです。この設定は各 OS ごとに以下のよう

klim0824 2023/08/07

リンク

Web フロントエンドの実装において本来の機能を損なってはいけない

Web フロントエンドの実装において本来の機能を損なってはいけない 2022.12.24 データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。昨今の Web フロントエンドの開発においては、React や Vue.js などを利用した SPA を採用することが多くなりました。従来の MPA と比較して、リンククリック時やフォーム送信時にページリロードを挟まないので、高速な画面遷移を実現できるため、快適な操作を実現できます。一方データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で