CSS には要素の背後を覆い隠す::backdrop擬似要素というものがあります。::backdrop を使用することで、要素の背後にあるものを隠し、見せたい場所や操作できる箇所を強調させることができます。
しかし、現時点ではdialog要素によるモーダルウィンドウやポップアップウィンドウ、動画のフルスクリーンモードなどの一部の状態でしか使用できません。
今回は、dialog要素やフルスクリーンモード以外でも ::backdrop する方法を紹介します。
CSS
[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 擬似クラスでドロップダウンメニューを制御する方法をご紹介します。
HTMLとCSSで切り替えられるタブの作り方
ソフトウェアのUIによくある、複数のコンテンツをコンパクトに表示できるタブ切り替えを、JavaScriptは使わず、HTMLとCSSだけで作る方法を紹介します。
line-heightプロパティで単位のある値を使用する際の小技
ウェブページの文章の行の高さは、CSSのline-heightプロパティで設定しますが、emなどの単位がある値 (parcentageやlength) と、単位のない数値 (number) とでは、子孫要素に継承させた結果が異なります。一般的には、数値での設定が好ましいとされています。
今回は、em値を使用しても、数値を使用した場合と同様の結果を得る方法を紹介します。
CSSで文字にマーカー風のアンダーラインを引く3つの方法
CSSプロパティの background、box-shadow、text-decoration の3つから、文字にマーカー風のアンダーラインを引くための3種類のコードと、それぞれのメリット・デメリットを解説しています。
CSSで白と黒のどちらの背景色でも見やすい色を作る方法
ウェブサイトのあちこちで汎用的に使用する色、例えば、有名なフロントエンドフレームワークの「Bootstrap」であれば、「Primary」「Secondary」「Success」「Danger」「Warning」「Info」「Light」「Dark」といった名称で設定されている色、皆さんはどのように決めていますか?
今回は、汎用的に使用する色を作るためにしたことを紹介していきます。
HTMLの電話番号リンクをタブレットやスマホのみ有効にするCSS
ウェブページのリンク (a要素) に発信したい電話番号を設定した電話番号リンクは、通話機能があるタブレットやスマホ等の端末から電話を受け付けたい場合に有用です。
しかし、通話機能を持たないパソコン等の端末では、無用なだけでなく、ユーザビリティを低下させる可能性もあります。
今回は、端末に応じて電話番号リンクの有効・無効を切り替えるCSSコードを紹介します。