ウェブのフロントエンドを仕事にしている方で業界のトレンドに敏感な方であれば Houdini を耳にしたことがあるのではないでしょうか。英語の記事を見ると Next Big Thing なんて言われるほ...
Continue reading...1月 2022
【HTML】mark 要素がハイライトは間違い？
HTML5 から新たに導入された mark 要素ですが、ネットでは「ハイライト」「目立たせる」「マーカー」と説明している記事を良く見かけます。見た目の表現としては間違っていませんが、要素の説明としては...
Continue reading...【JavaScript】マウス、タッチ、ペンを包括的に扱う PointerEvent
近年の入力デバイスにはマウスやタッチのほかペンも存在します。JavaScript で入力を扱うために、マウスであれば MouseEvent、タッチであれば TouchEvent を使ってきました。しか...
Continue reading...【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...