画期的な発明、:hasセレクタ
これまでのcssは、先にある要素 → 後にある要素 の順番(親→子、兄→弟、隣)で詳細度を高めるしかありませんでした。 それを逆向きに指定できるようになったのがhasセレクタです。 chrome、safariではすでに対 […]
css
WEBサイトのスタイリングに使われるCSS。初学者が陥りやすいミスなど、CSSについて解説した記事をまとめています。
counter関数の使い方 [CSS]
cssのcounter変数を利用すると、指定の要素に任意のcounterを設定することができ、設定されたcounterはcontentで利用することができます。 早速具体例を見ていきます。 counter-resetでカ […]
CSS 属性セレクターの備忘録
属性（attribute）を利用したCSSセレクタ。混乱してどれを使うかわからなくなることがあるので備忘録でまとめておきます。 属性セレクタとは 解説サイトなどでは[attr]や [attr = value]のような書き […]
段組みレイアウトに関係するcssプロパティ
つづいて、columnsプロパティに関係してくるcssプロパティの話です。前記事は「columnsで作る段組みレイアウト」 まずは、段組みレイアウトにおいて全幅表示させたいボックスに使用するcolumn-spanプロパテ […]
columnsで作る段組みレイアウト
最近のWEBサイトレイアウトはgridあるいはflexで設計するのが一般的ですが、もう少しするとそれも古い話となるのかも知れません。 今記事と次記事で段組みレイアウト（multi column layout）をまとめてお […]
画像やiframeのサイズ(アスペクト比)を指定できるcssプロパティ、「aspect-ratio」
レスポンシブデザインにおいて、画像のサイズ（アスペクト比）は、width height属性をきちんと記述しておけば問題ありません。 たとえば、100px × 100pxの画像を表示させるとしたら、 としておけば、スクリー […]
モダンブラウザのconic-gradient対応が完了していた
円錐状のグラデーションを描写するconic-gradient。conicはconicalのことだそうです。コーヒーミルの種類にコニカルカッターってありますけど、あのコニカルですね。 何気なくCan I Useで確認したら […]
font-sizeはclamp()関数で指定するのが良さそう
調べてみると、当サイトの全アクセスの約1%がInternet Explorerユーザーなのですが、Office365のIE 11サポートが本年8月17日に切れることを受け、Internet Explorerをサポート外と […]
CSS:text-decorationでできること
これまであまり意識したことがなかったのですが、text-decorationプロパティはどこまでの装飾が可能なのか気になったので調べてみました。 一番よく使われているtext-decorationは、aリンクの下線を消す […]
サイトをダークモードに対応させる
長引く自粛につれてディスプレイを眺めている時間が増え、ダークモードを利用する人が急に増えたような気がします。 身近になったダークモードですが、ブラウザやOSが自動で色反転してくれるわけではなくて、ダークモード対応ができて […]
疑似クラス nth-child の使い方いろいろ
今回は、「兄弟関係にある」 n番目の要素を指定するセレクター「nth-child」のお話です。 初見でかるい気持ちで使用すると、css指定が効かなかったり、全然違う要素に効いたりするnth-childです。 「nth-o […]
cssで作るイメージギャラリー
htmlとcssしか自由に編集できない環境でLightBox風のイメージギャラリーを作りたい。となったとき、これまでは :target疑似クラスを使用していたのですが、input type=”radio […]