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