2024年

figcaptionを中央に配置し最大幅を兄弟要素に揃える方法

figure要素とfigcaption要素をいい感じに表示させるために、先人たちは苦労してきました。

WordPress の場合、キャプション付き画像 (wp-caption) では、figure要素のstyle属性にwidthプロパティを設定しています。画像ブロック (wp-block-image) では、figure要素をtable要素として、figcaption要素をcaption要素として扱うという、裏技的なテクニックを使用しています。

今回は、figcaption要素を中央に配置して、その最大幅を兄弟要素に揃える、正攻法で汎用的な方法を紹介します。

[CSS] 1色決めるだけで出来る手軽なカラーパレット作成法

色を決めるって大変ですよね?直感的に色を決められる人にとっては、さほど難しくないのかもしれませんが、個人的にはとても苦手です。

今回は、CSS変数 (カスタムプロパティ) とhsl関数とcolor-mix関数を使用した、手軽なカラーパレット作成法を紹介します。

CSSで任意の要素に::backdropする方法

CSS には要素の背後を覆い隠す::backdrop擬似要素というものがあります。::backdrop を使用することで、要素の背後にあるものを隠し、見せたい場所や操作できる箇所を強調させることができます。

しかし、現時点ではdialog要素によるモーダルウィンドウやポップアップウィンドウ、動画のフルスクリーンモードなどの一部の状態でしか使用できません。

今回は、dialog要素やフルスクリーンモード以外でも ::backdrop する方法を紹介します。