請求書データをサーバーに保存せず、URLハッシュだけで共有する実装(Cloudflare Pages)

請求書データをサーバーに保存せず、URLハッシュだけで共有する実装(Cloudflare Pages)
[JP] AIエージェント開発を劇的スリム化!統一ツールチェーン「Vite+」登場
[EN] Dramatically Streamlining AI Agent Development! Introducing the Unified Toolchain "Vite+"
reCAPTCHA v3対応のPHPメールフォーム一式を生成できるツールです✉️ 確認画面や自動返信など、実務向けのフォーム構築の土台としてご活用ください。
webtoolgen.com/markup/php-m...
#Web制作 #PHP #フロントエンド
ReactよりSvelteのほうが好きかもしれない。
#フロントエンド
PNG画像から、現在のWeb標準で必要となる各種favicon画像(.ico、apple-touch-icon等)を一括生成できるツールです📌 素材準備の時短になれば幸いです。
webtoolgen.com/convert/favi...
#Web制作 #フロントエンド
form の中に置いた <button> は、type を書かないと送信ボタンになります。
「パスワードを表示」のような補助のボタンを押したら、フォームが送信されてしまった。type="button" と書いておけば防げます。
見出しのタグは、見た目の大きさではなく、文書の構造で選びます。
小さく見せたいからと h2 の次に h5 を使うと、見出しをたどって読む人には階層が飛んで見えます。大きさはCSSで調整します。
音声ファイル(BGMなど)の音質を保ちながらファイルサイズを圧縮できるツールです🗜️ Webサイト読み込み時の遅延防止などにお役立てください。
webtoolgen.com/convert/audi...
#Web制作 #フロントエンド
placeholder をラベル代わりにすると、入力を始めた瞬間に何の欄だったかが消えます。
入力し終えて見直すときにも困ります。ラベルは欄の外に常に出しておき、placeholder は入力例に留めます。
入力欄のラベルは、<label for> で結びつけます。
読み上げソフトが欄の名前を読めるようになり、ラベルの文字を押しても入力欄にフォーカスが移ります。チェックボックスでは、押せる範囲が広がるのがありがたいです。
画面の崩れを Claude Code に直してもらうとき、前は「右上のボタンが少し下にずれてる」みたいに言葉で説明してて、だいたい3往復くらいかかってたんだけど、スクショを1枚貼って崩れてるところに赤丸を付けて渡すようにしたら、ほぼ1回目で狙った場所を直してくれるようになった。見た目の話って、言葉にした時点で思ってた以上に情報が抜けてたんだなと思う。 #ClaudeCode #AI開発 #フロントエンド #個人開発
画像とCSS/JSで異なるキャッシュ期間を設定した.htaccessを生成できるツールです⚡ PageSpeed Insightsの最適化にご活用ください。
webtoolgen.com/server/htacc...
#Web制作 #SEO対策 #フロントエンド
容量の大きいWAV音声を、Web用に軽量なMP3形式に圧縮・変換できるツールです🗜️ サイト読み込みへの影響を抑えて音声を実装したい時にお使いください。
webtoolgen.com/convert/wav-...
#Web制作 #フロントエンド
検索結果の件数やエラーなど、画面の一部が書き換わったことは、見えない人には伝わりません。
変化する領域に aria-live="polite" を付けておくと、読み上げソフトが区切りのいいところで内容を読んでくれます。
外部のフォントやAPIを使うなら、<link rel="preconnect"> で接続だけ先に始めておけます。
名前解決や暗号化の準備が前倒しになるので、実際のリクエストが早く返ります。使わない相手に張ると、かえって無駄になります。
ページの先頭に「本文へスキップ」のリンクを置いておくと、キーボードで操作する人が毎回メニューを Tab で通り抜けずに済みます。
ふだんは隠しておき、フォーカスが来たときだけ表示する形が一般的です。
Windows のハイコントラストモードでは、背景画像や box-shadow が消え、色がシステムの色に置き換わります。
影だけで区切っていたボタンは、枠が見えなくなります。透明な border を1本足しておくと、このモードでも枠が出ます。