figure要素とfigcaption要素をいい感じに表示させるために、先人たちは苦労してきました。
WordPress の場合、キャプション付き画像 (wp-caption) では、figure要素のstyle属性にwidthプロパティを設定しています。画像ブロック (wp-block-image) では、figure要素をtable要素として、figcaption要素をcaption要素として扱うという、裏技的なテクニックを使用しています。
今回は、figcaption要素を中央に配置して、その最大幅を兄弟要素に揃える、正攻法で汎用的な方法を紹介します。
色を決めるって大変ですよね？直感的に色を決められる人にとっては、さほど難しくないのかもしれませんが、個人的にはとても苦手です。
今回は、CSS変数 (カスタムプロパティ) とhsl関数とcolor-mix関数を使用した、手軽なカラーパレット作成法を紹介します。
CSS には要素の背後を覆い隠す::backdrop擬似要素というものがあります。::backdrop を使用することで、要素の背後にあるものを隠し、見せたい場所や操作できる箇所を強調させることができます。
しかし、現時点ではdialog要素によるモーダルウィンドウやポップアップウィンドウ、動画のフルスクリーンモードなどの一部の状態でしか使用できません。
今回は、dialog要素やフルスクリーンモード以外でも ::backdrop する方法を紹介します。
2023年12月19日に行われた FireFox のアップデートにより、すべてのブラウザで:has擬似クラスが使用できるようになりました。これは、CSSの歴史において革命的な出来事です。
今回は、この:has擬似クラスの革命的な理由を解説すると共に、使い方も紹介していきます。
コンテナクエリ、使ってますか？
メディアクエリがウェブページのビューポート (表示領域) を基準とするのに対し、コンテナクエリはコンテナに設定した祖先要素 (コンテナ要素) の幅を基準として、@container による条件分岐や、cqw, cqh, cqi, cqb といった独自の単位が使えます。
今回は、幅の単位である「vw」や「vi」を「cqw」や「cqi」に置き換えて幸せになれると思ったら、幸せになれなかったという出来事をシェアしたいと思います。
HTML の見出し (h1, h2, h3, h4, h5, h6) などに設定する font-size の値を、どのように決めていますか？
今回は「なんとなくこれくらい」から卒業するための、フィボナッチ数列、等比数列、等差数列、階差数列、調和数列などを使用し数学的に作られた、フォントサイズの一覧を紹介します。
hover 擬似クラスを使用して、ドロップダウンメニュー (プルダウンメニュー) の表示・非表示を制御する方法はよく知られていますが、hover 擬似クラスはスマホやタブレットなどのタッチデバイスとの相性は良くありません。
そこで、今回は hover 擬似クラスではなく、focus-within 擬似クラスでドロップダウンメニューを制御する方法をご紹介します。
WordPress で、カスタム投稿タイプを追加してページを作成し、そのページの編集のみを特定のユーザーに任せるという運用方法のウェブサイトを作ることがあったので、その備忘録を残します。
例えば企業サイトで、ページの作成・更新・削除は Web 部門が統括するけど、特定のページの編集は各部門に任せる、といったウェブサイトを作る際の参考になるかもしれません。
ソフトウェアのUIによくある、複数のコンテンツをコンパクトに表示できるタブ切り替えを、JavaScriptは使わず、HTMLとCSSだけで作る方法を紹介します。
ウェブページの文章の行の高さは、CSSのline-heightプロパティで設定しますが、emなどの単位がある値 (parcentageやlength) と、単位のない数値 (number) とでは、子孫要素に継承させた結果が異なります。一般的には、数値での設定が好ましいとされています。
今回は、em値を使用しても、数値を使用した場合と同様の結果を得る方法を紹介します。