コンテナクエリ、使ってますか?
メディアクエリがウェブページのビューポート (表示領域) を基準とするのに対し、コンテナクエリはコンテナに設定した祖先要素 (コンテナ要素) の幅を基準として、@container による条件分岐や、cqw, cqh, cqi, cqb といった独自の単位が使えます。
今回は、幅の単位である「vw」や「vi」を「cqw」や「cqi」に置き換えて幸せになれると思ったら、幸せになれなかったという出来事をシェアしたいと思います。
コンテナクエリ、使ってますか?
メディアクエリがウェブページのビューポート (表示領域) を基準とするのに対し、コンテナクエリはコンテナに設定した祖先要素 (コンテナ要素) の幅を基準として、@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値を使用しても、数値を使用した場合と同様の結果を得る方法を紹介します。
CSSプロパティの background、box-shadow、text-decoration の3つから、文字にマーカー風のアンダーラインを引くための3種類のコードと、それぞれのメリット・デメリットを解説しています。
先日、使用しているスマホが壊れてしまい、取り急ぎスマホを購入しなければならないことになりました。
その際の、絶対に後悔したくない人 (自分) のための、スマホの選び方をシェアしたいと思います。
ウェブサイトのあちこちで汎用的に使用する色、例えば、有名なフロントエンドフレームワークの「Bootstrap」であれば、「Primary」「Secondary」「Success」「Danger」「Warning」「Info」「Light」「Dark」といった名称で設定されている色、皆さんはどのように決めていますか?
今回は、汎用的に使用する色を作るためにしたことを紹介していきます。
ウェブページのリンク (a要素) に発信したい電話番号を設定した電話番号リンクは、通話機能があるタブレットやスマホ等の端末から電話を受け付けたい場合に有用です。
しかし、通話機能を持たないパソコン等の端末では、無用なだけでなく、ユーザビリティを低下させる可能性もあります。
今回は、端末に応じて電話番号リンクの有効・無効を切り替えるCSSコードを紹介します。