2023年

[CSS] 全ブラウザでサポートされた:has擬似クラスの使い方

2023年12月19日に行われた FireFox のアップデートにより、すべてのブラウザで:has擬似クラスが使用できるようになりました。これは、CSSの歴史において革命的な出来事です。

今回は、この:has擬似クラスの革命的な理由を解説すると共に、使い方も紹介していきます。

CSSのコンテナクエリでvwが使いにくい問題を解決しようとした話

コンテナクエリ、使ってますか?

メディアクエリがウェブページのビューポート (表示領域) を基準とするのに対し、コンテナクエリはコンテナに設定した祖先要素 (コンテナ要素) の幅を基準として、@container による条件分岐や、cqw, cqh, cqi, cqb といった独自の単位が使えます。

今回は、幅の単位である「vw」や「vi」を「cqw」や「cqi」に置き換えて幸せになれると思ったら、幸せになれなかったという出来事をシェアしたいと思います。

数列を使用して数学的に設定するCSSのfont-size

HTML の見出し (h1, h2, h3, h4, h5, h6) などに設定する font-size の値を、どのように決めていますか?

今回は「なんとなくこれくらい」から卒業するための、フィボナッチ数列、等比数列、等差数列、階差数列、調和数列などを使用し数学的に作られた、フォントサイズの一覧を紹介します。

CSS の focus-within 擬似クラスによるドロップダウンメニュー

hover 擬似クラスを使用して、ドロップダウンメニュー (プルダウンメニュー) の表示・非表示を制御する方法はよく知られていますが、hover 擬似クラスはスマホやタブレットなどのタッチデバイスとの相性は良くありません。

そこで、今回は hover 擬似クラスではなく、focus-within 擬似クラスでドロップダウンメニューを制御する方法をご紹介します。

[WordPress] 特定のユーザーだけが編集できるカスタム投稿タイプ

WordPress で、カスタム投稿タイプを追加してページを作成し、そのページの編集のみを特定のユーザーに任せるという運用方法のウェブサイトを作ることがあったので、その備忘録を残します。

例えば企業サイトで、ページの作成・更新・削除は Web 部門が統括するけど、特定のページの編集は各部門に任せる、といったウェブサイトを作る際の参考になるかもしれません。

line-heightプロパティで単位のある値を使用する際の小技

ウェブページの文章の行の高さは、CSSのline-heightプロパティで設定しますが、emなどの単位がある値 (parcentageやlength) と、単位のない数値 (number) とでは、子孫要素に継承させた結果が異なります。一般的には、数値での設定が好ましいとされています。

今回は、em値を使用しても、数値を使用した場合と同様の結果を得る方法を紹介します。

CSSで白と黒のどちらの背景色でも見やすい色を作る方法

ウェブサイトのあちこちで汎用的に使用する色、例えば、有名なフロントエンドフレームワークの「Bootstrap」であれば、「Primary」「Secondary」「Success」「Danger」「Warning」「Info」「Light」「Dark」といった名称で設定されている色、皆さんはどのように決めていますか?

今回は、汎用的に使用する色を作るためにしたことを紹介していきます。