技術記事一覧
ツールを支えているHTML・CSS・JavaScript・ブラウザAPIの技術を、専門的に解説しています。
JavaScript
- 0.1+0.2が0.3にならない理由と、計算での対処JavaScriptの数値計算で誤差が出る仕組みと、表示・金額計算での扱い方です。
- Intl.NumberFormatで数値を読みやすく表示する桁区切り、小数桁、通貨、割合を、ブラウザ標準の機能で整える方法です。
- evalとnew Function: 文字列をコードとして実行するリスク設定データの式を実行する仕組みで、気を付けるべき安全面の話です。
- Math.randomとcrypto.getRandomValues乱数の質と、範囲に収めるときの偏りについてです。
- JavaScriptの日付とタイムゾーンずれやすい日付計算の落とし穴をまとめます。
- 文字数の数え方: UTF-16・コードポイント・書記素見た目の1文字と、プログラム上の数え方の違いです。
HTML
- input type="number" を安全に使う数値入力欄の属性と、値を受け取るときの注意点です。
- detailsとsummaryで作る開閉UIJavaScriptなしで作れる、開閉式のよくある質問の仕組みです。
- 静的サイトのhead要素を整えるタイトル、説明文、viewportなどを正しく設定する方法です。
- アクセシブルなフォーム: label・focus・aria-live入力欄を、キーボードや読み上げでも使えるようにする基本です。
CSS
- CSS変数でダークモードに対応する色をCSS変数に集約し、ダークモードを少ない記述で実現する方法です。
- GridとFlexboxの使い分けレイアウトに使う2つの仕組みを、使いどころで整理します。
- 色の変換とコントラスト比の計算HEX・RGBの変換と、読みやすさの基準の計算方法です。
ブラウザAPI
- Clipboard APIでコピーボタンを作るnavigator.clipboardの使い方と、失敗したときの扱いです。
- File APIとBlobで、サーバーに送らずファイルを処理する選んだファイルをブラウザの中だけで読み、書き出す仕組みです。
- Canvas 2Dで画像を処理する基本リサイズ、保存、ドット絵の表示で気を付ける点です。
- Base64とハッシュ: 暗号化との違いよく混同される3つの仕組みを整理します。