[2023-12-12 更新] Bootstrap などの CSS フレームワークではおなじみの Collapse (コラプス) ですが、いまでは HTML のマークアップだけでも実現できるのはご存じ...
Continue reading...CSS
【HTML】徹底解説 dialog 要素 – マークアップからスタイリング、JavaScript による操作まで
[2022-07-28 更新] dialog 要素はかなり以前より HTML5 仕様に存在していましたが、Safari がサポートしていなかったことでなかなか現場で使われませんでした。しかし、2022...
Continue reading...【CSS】独自プロパティを作る CSS Properties and Values API (Houdini)
CSS といえばブラウザーが用意したプロパティを使って書くものですが、W3C で策定している「CSS Properties and Values API」を使うことで、独自の CSS プロパティを作る...
Continue reading...【CSS】CSS 変数 (CSS カスタムプロパティ) でサイト制作と運用が楽になる
CSS を書いていると、同じ値を何度も書いていることに気づきます。とりわけ色の値では顕著ではないでしょうか。プログラマーであれば同じ値を何度も使うなら定数として変数に値を格納して利用するのが当たり前で...
Continue reading...【CSS】CSS 界隈で大きな話題になっている Houdini って何?
ウェブのフロントエンドを仕事にしている方で業界のトレンドに敏感な方であれば Houdini を耳にしたことがあるのではないでしょうか。英語の記事を見ると Next Big Thing なんて言われるほ...
Continue reading...【CSS】list-style-type プロパティで Safari 15 に加わった新たなリストマーカー、漢数字も
Safari 15 に、list-style-type プロパティに指定可能なリストマーカーが新たにいくつか追加されました。日本語に関係するマーカーもあり重宝しそうです。今回は追加されたマーカーのいく...
Continue reading...【CSS】aspect-ratio プロパティで縦横比を固定する
HTML 要素の縦横比を CSS だけで固定したいときってありませんか?レスポンシブウェブデザインが主流になった現在ならなおさらです。aspect-ratio プロパティを使えば簡単に実現できます。S...
Continue reading...【CSS】相対的長さの単位:em や rem たち
CSS で、フォントやマージンなど、さまざまな大きさや長さを指定しますが、CSS では様々な単位が定義されています。今回は、それら単位のうち、em や rem などの相対的長さの単位について見ていきま...
Continue reading...【CSS】チェックボックスとラジオボタンの色を変える方法 – accent-color プロパティ
フォーム要素を CSS でデコレーションするのは非常に難しいことは誰もが経験済みでしょう。せめてチェックボックスやラジオボタンなどの色を自由に変更できたらと思うことはよくあるのではないでしょうか。そう...
Continue reading...