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