counter関数の使い方 [CSS]
cssのcounter変数を利用すると、指定の要素に任意のcounterを設定することができ、設定されたcounterはcontentで利用することができます。 早速具体例を見ていきます。 counter-resetでカ […]
cssのcounter変数を利用すると、指定の要素に任意のcounterを設定することができ、設定されたcounterはcontentで利用することができます。 早速具体例を見ていきます。 counter-resetでカ […]
属性(attribute)を利用したCSSセレクタ。混乱してどれを使うかわからなくなることがあるので備忘録でまとめておきます。 属性セレクタとは 解説サイトなどでは[attr]や [attr = value]のような書き […]
今回は、「兄弟関係にある」 n番目の要素を指定するセレクター「nth-child」のお話です。 初見でかるい気持ちで使用すると、css指定が効かなかったり、全然違う要素に効いたりするnth-childです。 「nth-o […]
htmlとcssしか自由に編集できない環境でLightBox風のイメージギャラリーを作りたい。となったとき、これまでは :target疑似クラスを使用していたのですが、input type=”radio […]
久しぶりにセレクタの話です。 「n番目の要素」や「ホバー時」など、要素を特定するイメージがあるcssセレクタですが、「○○以外」を対象とできる :not というセレクタがあります。 :notの働きはシンプルですが、知って […]
今回はスムーススクロール(よく画面右下に登場するトップに戻るボタン。クリックすると、するするするっと上に戻っていくあれ)をCSSだけで実装してみたいと思います。 基本的にJavaScriptで実装した方が、スピード調節が […]
CSSだけで三角形の吹き出しを作るには2種類の方法があります borderで表現 linear-gradientで表現 borderで三角を表現する まずは古えから伝わるborderで作る方法です。borderをtop・ […]
CSSを学んでいると出てくる「擬似要素」。その名の通り、擬似的につくる要素です。私は雑なので呼び分けしないですが、マウスホバー時を指定する :hover や、n番目を指定するnth-child ・nth-of-type、 […]
次第に見かけなくなりましたが、「+」や「~」などをCSSセレクタを見かけることがあると思います。 たとえば #hoge + div や、#hoge > div のようなものです。 これら、「セレクタ + セレクタ」 […]
枠線(border)にグラデーションをつける cssのborde-imageに linear-gradientをつかってグラデーション枠をつけることができます。 見本で載せるとこんなのです。 詳しい説明するとかなり長くな […]