CSS

CSS

【CSS】めっちゃ便利なグラデーションジェネレーター

カードUIや背景、画像の上にも、ホントいろんな所で滅茶苦茶使うグラデーションも 自由に使えないと単色でいいかな。と思っちゃう。 でもグラデーションを使った方がひと手間かかってる気がするし、結構な場面でマが埋まる感じがして多用しがち。 今回紹...
CSS

【CSS】特定ブラウザだけに効くCSSの書き方|IE10以下、IE11、Firefox、Chrome、Safari、EDGE、Opera

特定ブラウザだけに適応するCSSの書き方のご紹介です。 「IE11だけ表示がズレる」とか「FireFoxだけフォームが変」とか、「Safari」のみに対応した書き方とか、「Opera」。。。オペラはなんかあるかな。。。 そんな特定ブラウザだ...
javascript

【jQuery】CSS変数をjQueryで利用する方法

CSSで指定したCSS変数をjQueryで利用する方法のご紹介です。 jQueryで変数作っちゃっても良いけど、そうできない時もある。 例えば、、、、ん~あるかなぁ。 jQueryで変数作れない時は、あるっ!としてCSS変数を書き換える方法...
CSS

CSSでダークモードに即対応。OSの画面設定をウェブでも利用しよう!

海外のサイトとか見てると、自分のiphoneの設定をダークモードにしてる時、勝手に暗いデザインで表示されてるのを見てどうやってやってるのか疑問だった。 きっとjsでデバイス情報を取得して、なにかしてるんだろうと思ったけど違った。 CSSだけ...
CSS

CSSで角丸四角の作り方

ボダンや画像など、やんわりと表現したいときや、流行りのデザインっぽさを取り入れたいときに使うのがCSSのborder-radius。 border-radiusには2つの書き方があり「border-radius: 10px;(全部の角を10...
javascript

jQueryでCSSを動的に変更・追加・削除する方法

jQueryでCSSを変更する方法のご紹介です。どうやってCSSを変更したらいいかわからない時などにご覧いただければ嬉しいです。
CSS

【CSS】疑似クラスの指定方法|最初・最後・n番目・奇数・偶数

cssで特定箇所のみにスタイリングしたい場合に効率的にかっこよく書ける疑似クラス特集です。 奇数番目 1,3,5,7,9…番目を装飾する時 li:nth-child(odd) { color: #82fcc9;} リスト(奇数) リスト(偶...
広告