タグ「JavaScript」が付けられているもの
前回・前々回と、ウェブページに設置する「Blueskyでシェア」「Mastodonでシェア」ボタンを作ってみたのだけれど、SNSが乱立する今日この頃、SNSの数だけシェアボタンを設置するのはどうにもこ…
スクロールして、要素が可視領域に入ると次々に表示されるようなページを作りたい。 以前は、 スクロールイベントを常に監視してスクロール値を取得し、要素が可視領域に入ったかどうかをチェック 要素が可視領域…
さて、前々回:ウェブページをダークモード対応にする。 そして 前回:ウェブページのダークモード化。画像が目立ちすぎるので何とかする。 で、OSがダークモード/ダークテーマに設定されている場合に、ダーク…
さて最近は、OS(またはブラウザ)でダークモード/ダークテーマが使用されていると、それに応じでダークな感じのウェブページを表示してくれるサイトが増えています。 個人的には、この挙動はとても好ましいと思…
さて、Twitterの先行きがなかなか信頼し難いので、Mastodonのアカウントを作ってみたのです。 アカウント作成自体は お好みのインスタンスを選ぶ。 アカウントを作成する。 (必要であれば)プロ…
ウェブページに、JavaScriptで独自のキーボード・ショートカットを追加してみましょう。 1から自分で書くのも良いけれど、キーコードを調べたりするのが面倒くさかったりします。以下のページで配布され…
フォームに入力したデータの二重送信を防ぐために、送信ボタンを1回押したらすぐに無効にして2度押しできないようにしたい。 方針としては… フォームの onsubmit イベントを検知したら、送信ボタンの…
さて、「ウェブページで縦書き表示」に取り組み始めてから早、10年。 → h2vR.js - 縦書きを実現するJavaScript - tategaki.info "スタイルシートで強引に縦書き…
以前の記事で、「最新のWordPressで、縦書きレイアウトが正しく表示されない」という事象への対処方法を書きました。 問題を生じさせているWordPressのスタイルシート(id="wp-block…
※ この記事には更新版があります。こちら『【続:縦書き h2vR.js】WordPress 5.x での表示不具合を解消する。』をどうぞ。 ウェブページで縦書きを実現するスクリプト・h2vR.jsで…
テキストエリアの中でタブを入力しようとすると、次の input 要素にフォーカスが移ってしまい、入力できません。これは不便。 JavaScriptでキーボード入力を監視して、tabキーが押されたらカー…
なんだかすごく暇だったので、先日作成した新型コロナウイルスの感染確認者数グラフを、一部 3D 化してみました。 新型コロナウイルス 特定警戒都道府県のグラフ - freefielder.jp 各都道…
PCのモニターを購入する必要にかられていろいろ検討しているのですが、買い換えたときに、新しいモニター上で文字がどれくらいの大きさで表示されるのか、これがいまいちピンとこないので、比較できるスクリプトを…
「スクロールバーをカスタマイズしたい」という需要は結構多い筈なのだけれど、お手軽にちょいちょいとする方法はなかなか無い。そろそろスタイルシートでガシガシできるような仕様にならないのかなぁ…と思いつつ、…
高さと幅が決まっているある領域内に、画像を綺麗に表示したい。 例えば、以下のような正方形の領域があったとして、その中に画像をきっちりはめ込みたいのだけれど、さて、すっきりスマートな方法はあるのかいな、…
ウェブページで縦書きレイアウトを実現する JavaScript・h2vR.js および h2v.js です。 最新版の Google Chrome および、レンダリングエンジンに Blink を採用し…
縦書き表示用JavaScript・h2vR.jsです。 こんな質問をいただきました。 (前略)横書き時にのみ行間を広げたいのですが(後略) つまり、縦書き時と横書き時で、文書に適用するスタイルを変更し…
サイト制作者側が、ユーザがブラウザの広告ブロック機能を有効にしてアクセスしてきているのかどうか、こういう単純な方法でチェックしてはダメなのか。 AdBlock Plus 機能拡張や iOS のコンテン…
例えば、月を表す数字(1, 2, 3, ..., 11, 12)を、先頭にゼロを付けて二桁に揃えたい("01", "02", "03", ..., "11", "12")。JavaScriptでは、ど…
例えば、文字列 "abc" があったとして、これを3回繰り返す "abcabcabc" という文字列をつくりたいとき、新しめのブラウザでは repeat() という関数が利用できます。 var ori…