css 否定擬似クラス、:not()の詳細度
まれに疑似クラス:not()が予想とちがう振る舞い（効いてほしくないところに効く）をすることがあったので、cssの詳細度についてきちんと調べ直しました。 素直な...
css
css 
css 兄弟要素をもたない要素を指定する疑似クラス、:only-child
タイトルの通りです。 :only-child疑似クラスを使用すると、兄弟要素を持たない要素を指定することができます。 個人的にはリスト（ul, ol, dl）の...
css Firefoxブラウザで:hasセレクタを試す方法
「画期的な発明、hasセレクタ」でご紹介した新しいCSSセレクタである「:has()」ですが、今のところFirefoxが対応していません。 その為、実際のサイト...
css input[type=number]の矢印を消したい時のCSS
input要素の入力値を数値に指定する type=number に設定すると、既定で上下の矢印が表示されます。 これを消したいときに設定するCSSをメモ。 ch...
css 画期的な発明、:hasセレクタ
これまでのcssは、先にある要素 → 後にある要素 の順番(親→子、兄→弟、隣)で詳細度を高めるしかありませんでした。 それを逆向きに指定できるようになったのが...
css counter関数の使い方 [CSS]
cssのcounter変数を利用すると、指定の要素に任意のcounterを設定することができ、設定されたcounterはcontentで利用することができます。...
css CSS 属性セレクターの備忘録
属性（attribute）を利用したCSSセレクタ。混乱してどれを使うかわからなくなることがあるので備忘録でまとめておきます。 属性セレクタとは 解説サイトなど...
css 段組みレイアウトに関係するcssプロパティ
つづいて、columnsプロパティに関係してくるcssプロパティの話です。前記事は「columnsで作る段組みレイアウト」 まずは、段組みレイアウトにおいて全幅...
css columnsで作る段組みレイアウト
columnsで作る段組みレイアウト 最近のWEBサイトレイアウトはgridあるいはflexで設計するのが一般的ですが、もう少しするとそれも古い話となるのかも知...
css 画像やiframeのサイズ(アスペクト比)を指定できるcssプロパティ、「aspect-ratio」
.noratio .wp-block-column, .ratio .wp-block-column { flex-basis:33%!important; m...
css モダンブラウザのconic-gradient対応が完了していた
円錐状のグラデーションを描写するconic-gradient。conicはconicalのことだそうです。コーヒーミルの種類にコニカルカッターってありますけど、...
css font-sizeはclamp()関数で指定するのが良さそう
これまでcssのサイズ指定はスクリーンサイズ別に指定していましたが、clamp関数を使うことで一行にすべてが収まります。たとえばwidth:50vw;min-width:300px;max-width:1000px というcss指定は、width:clamp(300px,50vw,1000px); の一行に収まります。