近年の入力デバイスにはマウスやタッチのほかペンも存在します。JavaScript で入力を扱うために、マウスであれば MouseEvent、タッチであれば TouchEvent を使ってきました。しか...
Continue reading...webfrontend.ninja
【HTML】inputmode 属性と enterkeyhint 属性で適切な入力モードとアクションラベルに変更してイラっとさせない仮想キーボードを
スマートフォンでテキストボックスに数字を入力しなければいけないのに、仮想キーボードに数字が無くてイラっとしたことはないでしょうか。このように入力文字に適切でない仮想キーボードが表示されてしまうウェブサ...
Continue reading...【HTML】下線じゃない、u 要素の本当の意味は？
u 要素の u は下線を意味する underline 由来の名前のため、どうしても下線を引くという意味で認知している人が多いのではないでしょうか。もちろん、HTML5 以降、すべての HTML 要素か...
Continue reading...【HTML】b 要素、知名度は高いですが本当に正しく使っていますか？
b 要素は HTML 要素の中で知名度が高い要素の一つですが、正しく使ってますか？HTML4 以前の時代のように、太字にしたいなら何でも b 要素を使えば良いという考え方ではいけません。今回は b 要...
Continue reading...【HTML】time 要素で表現できる日付と時刻
time 要素で日時を表現できますが、そのルールは少し複雑です。今回は time 要素の日付フォーマットの詳細と、JavaScript の Date オブジェクトの関係を解説します。 time 要素の...
Continue reading...【HTML】data 要素や data-* 属性を使ってスクリプト用のデータを埋め込む
よく HTML の中にデータを埋め込んでおきたいことはあります。しかし、そのデータをどのように HTML に埋め込むのが良いのでしょうか。多くのシーンでは、data 要素や data-* 属性はまさに...
Continue reading...【JavaScript】Web Share API でリンクやファイルを共有
スマートフォンのネイティブアプリでは当たり前に用意されているリンクやファイルの共有機能ですが、Web Share API を使えばウェブアプリでも実現可能です。リンクやテキスト情報だけでなく、ファイル...
Continue reading...【JavaScript】const では無理、freeze() や seal() を使ってオブジェクトを変更不可に
近年の JavaScript (ECMAScript) では const を使って定数を定義できます。しかし、オブジェクトの中身までは保護されません。オブジェクトの中身を保護するには保護のレベルに応じ...
Continue reading...【JavaScript】数値のゼロ埋めや文字列の桁数合わせを一発で実現する padStart() と padEnd() メソッド
月や日のように 1 桁の場合は先頭を 0 で埋めて “01” に変換したり、文字列の前か後ろにスペースを入れて表示桁数を合わせたいことは良くあります。今回は、こういったパディン...
Continue reading...【JavaScript】生成データをファイルとして保存（ダウンロード）させる方法
JavaScript で何かしらのデータを生成した後、それをユーザーの PC やスマートフォンにファイルとして保存させたいときがあります。特に、CSV ファイルや JSON ファイルを保存したいケース...
Continue reading...