Web制作 :has()疑似クラスを使いこなす！次世代CSSの実用例集
CSSの疑似クラス:has()の使い方を豊富な例と共に徹底解説。子要素や兄弟要素の有無でスタイルを動的に変更する方法や、チェック状態・レイアウトの応用テクニックまで、実用的な活用術を幅広く紹介します。
CSS
Web制作 Web制作 【CSS】display: table系のプロパティをまとめておさらい
display: table 系のプロパティはテーブルレイアウトを実現するために使われますが、よく忘れるのでそれぞれのプロパティの役割を簡単にまとめました。
Web制作 【WordPress】img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px; }を削除する
WordPress 6.7 では、新しいsizes="auto"の仕組みを導入し、それに伴うレイアウトシフトを防ぐため、以下のようなコードが出力されるようになりました。これが原因で表示が崩れてしまう場合など、この記述を削除したい場合はfunctions.php に以下の一文を追記します。
Web制作 CSSでtableの空のセルに斜線を引く
空のセルに対して斜線を引きたい場合、table td:emptyセレクタとCSSのグラデーション機能（linear-gradient）を利用すると便利です。
Web制作 CSSでスクロールバーのデザインをカスタムする
.scroll-areaをスクロールバーが出る要素とした場合の例です。基本的には::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumbで設定できますが、Firefoxは対応していないためFirefox用のみ別で指定しています。
Web制作 【jQuery】slick.jsに一時停止機能をつける
slick.jsを一時停止できるようにします。最低限しか書いていないのでお好みで変更してください。
Web制作 【HTML・CSS・JavaScript】aタグのリンクを無効にする
aタグのリンクを無効にしたい場合の、HTML・CSS・JavaScriptそれぞれの方法です。単にリンクを無効にしたいだけであれば、href属性を外してtabindex="-1"を付けるのが最もシンプルで、デメリットもありません。
Web制作 【CSS】flexboxでflexコンテナからflexアイテムがはみ出る場合の対策
display; flex;を指定した際、flexコンテナ（親要素）からflexアイテム（子要素）がはみ出てしまうときは、flexアイテムに対してそれぞれ下記の指定をしてあげます。
Web制作 【CSS】クラス名やid名を前方一致・後方一致・部分一致で指定する
CSSのセレクタの指定方法で、前方一致・後方一致・部分一致を使用したい場合の書き方です。クラス名やid名、hrefなどの属性セレクタ―に使用できます。
Web制作 Yu Gothic UIで一部の記号が重なって見える
ウェブサイトのフォントにYu Gothic UIが適用されてしまっている場合、Microsoft Edge環境では「」、【】、『』などの記号同士や、・と「」が組み合わさった場合に文字同士が重なって見えることがあります。