css

counter関数の使い方 [CSS]

css / 2022年4月23日 / 、、

cssのcounter変数を利用すると、指定の要素に任意のcounterを設定することができ、設定されたcounterはcontentで利用することができます。 早速具体例を見ていきます。 counter-resetでカ […]

CSS　属性セレクターの備忘録

css / 2022年4月23日 / 、

属性（attribute）を利用したCSSセレクタ。混乱してどれを使うかわからなくなることがあるので備忘録でまとめておきます。 属性セレクタとは 解説サイトなどでは[attr]や [attr = value]のような書き […]

multi column layout

columnsで作る段組みレイアウト

css / 2022年4月23日 / 、

最近のWEBサイトレイアウトはgridあるいはflexで設計するのが一般的ですが、もう少しするとそれも古い話となるのかも知れません。 今記事と次記事で段組みレイアウト（multi column layout）をまとめてお […]

HTML5 CSS

CSS:text-decorationでできること

css / 2022年4月23日 /

これまであまり意識したことがなかったのですが、text-decorationプロパティはどこまでの装飾が可能なのか気になったので調べてみました。 一番よく使われているtext-decorationは、aリンクの下線を消す […]

サイトをダークモードに対応させる

css / 2022年4月23日 / 、

長引く自粛につれてディスプレイを眺めている時間が増え、ダークモードを利用する人が急に増えたような気がします。 身近になったダークモードですが、ブラウザやOSが自動で色反転してくれるわけではなくて、ダークモード対応ができて […]

疑似クラス　nth-child　の使い方いろいろ

css / 2022年4月23日 / 、

今回は、「兄弟関係にある」 n番目の要素を指定するセレクター「nth-child」のお話です。 初見でかるい気持ちで使用すると、css指定が効かなかったり、全然違う要素に効いたりするnth-childです。 「nth-o […]

cssで作るイメージギャラリー

css / 2022年1月6日 / 、、

htmlとcssしか自由に編集できない環境でLightBox風のイメージギャラリーを作りたい。となったとき、これまでは :target疑似クラスを使用していたのですが、input type=”radio&#8 […]