記事一覧

入力画像のコントラストを調整 filter: contrast(0) /* 完全な灰色 */ filter: contrast(65%) /* 65% のコントラスト */ filter: contrast(1) /* 効果なし */ filter: contrast(200%) /* 2 倍のコントラスト */ 入力画像にガウシアンぼかしを適用 filter: blur(0) /* 効果なし */ filter: blur(8px) /* 半径 8px でぼかす */ filter: blur(1.17rem) /* 半径

入力に応じて大きさが変わるtextareaを作る時に便利なCSS ※注意※ このCSSは今現在、chromeとedgeでしか対応していない safariとfirefoxでは、まだ非対応

・セキュリティヘッダ "HTTP Strict Transport Security (HSTS)" の設定 HSTSは、サイトがHTTPではなくHTTPSでしかアクセスできないようにブラウザに強制するヘッダーです。 ・セキュリティヘッダ "X-Frame-Options" の設定 外部サイトからフレーム呼び出しできないようにする ・X-Content-Type-Options: nosniff の設定 ブラウザが MIMEタイプを推測せず、サーバーから送信された Content-Type ヘッダーに厳密に従います。 ・バージョン情報の(x-powered-by)削除

transitionで設定できるプロパティ <-- transition-property --> アニメーションを適用する対象のプロパティを定義 全てに適用する場合と指定を省略した場合「all」が適用 例） colorの色を白から黒に変えたい text { color: #fff; transition-property: color;/*アニメーションをcolorのプロパティのみ適用*/ transition-duration: 0.5s;/*0.5秒で変化させる*/ } .button a:hover { color: #000; } <--

clamp() 関数を使うと、最小幅と最大幅の間で画像サイズを設定し、動的に幅を調整できます。 img { width: clamp(200px, 50%, 500px); height: auto; } clamp(200px, 50%, 500px); では、画像の幅が200pxから500pxの間で動的に変化し、画面幅の50%に基づいてサイズが調整されます。

コーディングでよく使うコードスニペット

子を持たない要素にCSSをつけるとき使う コメント、処理指示、 CSS の content は要素が空であるかどうかの判断には影響しない 動的に要素を入れる時に使うかも 例 子を持たない要素のdivに枠線をつける div:empty { border: 2px solid #000; } //CSSが効く <div></div> //CSSが効く <div><!-- Simple Comment --></div> //CSSが効かない <div><p></p></div>

コンテンツ幅で、cssの条件分岐を設定できる。 メディアクエリーのような使い方

特定のクラスを持つ子要素を含む親要素だけにスタイルを適用することができる 下の書き方だと商品リストがあり、その中にセール中の商品が含まれている場合に、そのリスト全体に特別なスタイルを適用したいときに使用する [CSS] .product-list:has(.product.on-sale) { background-color: yellow; } [HTML] <div class="product-list"> <div class="product"> <p>商品A</p> <p>価格: ¥1,000</p> </div>

子と孫を指定する(空白区切り) 「セレクタ1 セレクタ2」 ・セレクタを空白区切りで並べた場合、子孫セレクタになります。 ・セレクタ1を親として、子と孫のセレクタ2の要素が対象になります。 子を指定する(>) 「セレクタ1 > セレクタ2」 ・セレクタを>で区切って並べた場合、子セレクタになります。 ・セレクタ1を親として、子のセレクタ2の要素が対象になります。 兄弟で弟を指定する(+) 「セレクタ1 + セレクタ2」 ・セレクタを+で区切って並べた場合、隣接セレクタになります。 ・セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の直後にあるセレク

cssグラデーションジェネレーター ボタンジェネレーター ボックスシャドウジェネレーター テキストシャドウジェネレーター 枠線・境界線ジェネレーター css Filterジェネレーター 三角形ジェネレーター css Backdrop-filterジェネレーター css Transform（変形） 2D / 3D ジェネレーター css Transition（アニメーション） ジェネレーター

CSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされました。これらの機能がSassに代わるものなのかの紹介

https://webtan.impress.co.jp/e/2009/06/16/5880 ErrorDocument 503 /maintenance.html <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{REQUEST_URI} !=/maintenance.html RewriteCond %{REMOTE_ADDR} !=192.168.0.4 RewriteCond %{REMOTE_ADDR} !=192.168.0.5 RewriteRule ^.*$ - [R=5