今年、button要素 に command属性 と commandfor属性 が追加され、すべてのモダンブラウザで使用可能になりました。これにより dialog要素 を表示するための JavaScript が不要になります。ということで今回は、dialog要素 を制御するためのベストプラクティスを紹介します。
Web制作
CSSでdetails要素に開閉アニメーションを追加する方法
HTML5 で追加された details要素 (詳細折りたたみ要素) に開閉アニメーションを設定するには JavaScript が必要でしたが、現在は CSS のみで設定することができるようになっています。今回は、その方法を紹介します。
JSON-LDをMicrodataから生成するJavaScript「md2ld.js」
ウェブサイトの制作・運営に携わり、JSON-LD で苦労している人も多いかと思います。今回は、そういった方々の救世主になるかもしれない、JSON-LD を Microdata から生成する JavaScript「md2ld.js」を紹介します。
HTMLとCSSだけのアクセシビリティに配慮したドロワーメニュー
ハンバーガーボタンと呼ばれる、三本線のアイコンを押すと出てくるドロワーメニュー (引き出し型メニュー) の実装で困っていませんか？ JavaScript を使って実装するのが一般的ですが、HTML と CSS だけで作れるのであれば、それに越したことはないと思っています。そこで、今回はチェックボックス版とダイアログ版の2種類のドロワーメニューの作り方を紹介します。
table要素をグリッドで再構築する Gridized Table CSS
table要素 が思った通りに表示されず悩んでいませんか？ table要素 は複雑になりがちな情報をまとめるのに最適です。しかし、独特のレンダリングアルゴリズムによって、思った通りに表示されないことが多々あります。そこで今回は、table要素 をスタイリングしやすくするための「Gridized Table CSS (表をグリッド化する CSS)」を紹介します。
AIO/LLMOで差をつける「XHTMLの理念」
今、Web上で、AIO (AI Optimization / AI最適化) や LLMO (Large Language Model Optimization / 大規模言語モデル最適化) が注目されています。今回は、AIO / LLMO でライバルに差をつけるための「XHTMLの理念」について解説します。
HTMLのstyle属性を活用した反ユーティリティファーストなCSS
先日、Tailwind CSS に代表されるユーティリティファーストのようで、実はそれと真逆を行く ユーティリティCSS「Selectorize CSS」を GitHub で公開しました。今回は「Selectorize CSS」を作った経緯などを紹介したいと思います。
定義しておくべき基本的なCSS変数とその命名規則
ウェブデザインに一貫性と統一感を持たすためには、設計段階でCSS変数 (CSSカスタムプロパティ) を定義しておき、イレギュラーな値を極力使用しないというアプローチが良いかと思います。
今回は、個人的に定義しているCSS変数を紹介してみようと思います。
CSSのコンテナクエリで position: fixed の扱い方が変わった件
「最強の剣なのに呪われている」みたいなコンテナクエリの呪縛が、いつの間にか解けていたのでシェアしたいと思います。
[CSS] remを使用したline-heightのベストプラクティス
ウェブページの行の高さ・行間を良い感じに制御したいと考えたとき、難しいと感じるのは私だけでしょうか。そんな私が行き着いた2025年現在の line-height のベストプラクティスを紹介します。