[2023-12-12 更新] Bootstrap などの CSS フレームワークではおなじみの Collapse (コラプス) ですが、いまでは HTML のマークアップだけでも実現できるのはご存じ...
Continue reading...HTML
【HTML】inert 属性でコンテンツをまとめて不活性にする
[2024-05-19 更新] 特定のコンテンツに注目させたいときや、何かしらの処理を実行中の場合など、それ以外のコンテンツをユーザーが操作できないようにしたいと考えたことはないでしょうか。 たとえば...
Continue reading...【HTML】徹底解説 dialog 要素 – マークアップからスタイリング、JavaScript による操作まで
[2022-07-28 更新] dialog 要素はかなり以前より HTML5 仕様に存在していましたが、Safari がサポートしていなかったことでなかなか現場で使われませんでした。しかし、2022...
Continue reading...【HTML】mark 要素がハイライトは間違い?
HTML5 から新たに導入された mark 要素ですが、ネットでは「ハイライト」「目立たせる」「マーカー」と説明している記事を良く見かけます。見た目の表現としては間違っていませんが、要素の説明としては...
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...【HTML】ping 属性でリンクがどれだけ踏まれたかを計測する
ページにはさまざまなリンクが張られていますが、そのリンクがどれだけ踏まれたかを計測するには、リダイレクトが良く使われてきました。しかし、いまは a 要素と area 要素で ping 属性を使うことが...
Continue reading...