JavaScript/jQuery [TH] フォームのチェック状況を配列ではなくカンマ区切りで
とあるWebサイトで、条件を最大5件まで指定して絞り込みができる仕組みがありました。 絞り込み条件を5件まで指定すると、それ以上は指定できないように作られていて、現在指定している条件を一発で解除できるリセットボタンも用意しています。 …と、...
HTML
JavaScript/jQuery WEB [TH] Webサイトの絞り込みで最大件数を超えて選択できてしまう状況？
とあるWebサイトで、条件を最大5件まで指定して絞り込みができる仕組みがありました。 絞り込み条件を5件まで指定すると、それ以上は指定できないように作られていて、現在指定している条件を一発で解除できるリセットボタンも用意しています。 動作テ...
WEB [TH] reCAPTCHAのバッジを非表示にしたい
サイトにフォームを追加して、reCAPTCHAを導入したけど、スマホで表示したときにreCAPTCHAのバッジ（アイコン？）が邪魔！何とかして！…そんな今日のヘルプ。 いや、それくらい自分で調べなさいよ、とも思いましたが、規約的にそれがOK...
WEB サイト上の画像が表示されないことがある、という問題を解決
とあるWebサイトを改修したので動作確認していたところ、特定のセクションの画像が表示されない、という状況に出くわした！という話。 毎回必ず表示されないなら、画像が無い、URLが間違えている、などの原因が考えられますが、表示されたりされなかっ...
WEB 次世代型画像形式と言われるAVIFを使ってみる
「AVIF」というのは「AV1 Image File Format」の略で、映像コーデックのAV1を静止画用にしたもの…だそうです。 この画像形式の利点は、可逆・不可逆圧縮のどちらも使え、アルファチャンネルが使え、アニメーションにも対応し、...
JavaScript/jQuery WebP画像をVegas2でスライド表示する
Vegas2で画像のスライド表示を実装しているサイトのお話。 今回のヘルプ要請は、PageSpeed Insightsで「次世代フォーマットでの画像の配信をせよ」と注意されてるんだけどなんで！？という内容。 WordPressで構築したサイ...
CSS ブラウザによって変わるプレースホルダの色指定を統一する
ホームページでお問い合わせフォームを作っていて気付いたのですが、ブラウザによってプレースホルダの文字色に違いがありました。 プレースホルダというのは、こういうヤツ。 枠の中に文字が入っていない状態では、グレー色で表示されていて、何か文字を入...
CSS [CSS] 動くグラデーションのライン
ちょっと目立たせたい部分に使用したり、さりげなく動かしたいときに便利な、動くグラデーションライン。 GIFアニメなどで作ってもいいのですが、CSSだけでお手軽に再現できましたので、ソースをメモメモ。 サンプルソース HTML <div cl...
CSS [CSS] ブラウザによって縮小画像の画質が違う
Webサイトを作成していたときのこと。 サイズが250×180pxの画像を、画像ファイル側で縮小せずに、CSSで幅180pxに縮小して表示させてみたところ、非常にぼやけた画像になってしまいました。 しかし、別のPCで確認すると、ぼやけずには...
CSS [CSS] 枠線と文字をグラデーションに
とあるサイトで、ボタンのデザインに「枠線も文字もグラデーション」を指定されたのですが、初めての経験だったので手間取ってしまったため、忘れないようにメモメモ。 実現できるものの、ちょっと面倒でした。 まずは出来上がりから ということで、枠線と...