Web制作 【脱・メディアクエリ依存】CSSのclamp()でレスポンシブをスマートに制御する方法
画面サイズに応じた文字サイズ、面倒じゃありませんか？レスポンシブデザインって、ついメディアクエリだらけになりがちですよね。「スマホでは小さく」「PCでは大きく」と思っても、細かく条件を書き分けるのは骨が折れます。そんなときに使えるのが、cl...
CSS
Web制作 
Web制作 :has()疑似クラスを使いこなす！次世代CSSの実用例集
CSSに新しく加わった強力なセレクター:has()。この関数型疑似クラスは、親要素が特定の子や兄弟要素を持っているかを条件にスタイルを変えることができ、これまでJavaScript頼みだった「条件付きのスタイル変更」をCSS単体で実現できる...
Web制作 【CSS】display: table系のプロパティをまとめておさらい
display: table 系のプロパティはテーブルレイアウトを実現するために使われますが、よく忘れるのでそれぞれのプロパティの役割を簡単にまとめました。display: table;HTMLの<table>要素と同じように動作します。こ...
Web制作 【WordPress】img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px; }を削除する
WordPress 6.7 では、新しいsizes="auto"の仕組みを導入し、それに伴うレイアウトシフトを防ぐため、以下のようなコードが出力されるようになりました。<style>img:is(, ) { contain-intrinsi...
Web制作 CSSでtableの空のセルに斜線を引く
空のセルに斜線を引くためのCSS設定/* 空のセルに斜線を引く 透明ー黒黒ー透明 */table td:empty { background-image: linear-gradient(to top left, transparent, ...
Web制作 CSSでスクロールバーのデザインをカスタムする
デザインを変更する.scroll-areaをスクロールバーが出る要素とした場合の例です。基本的には::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb...
Web制作 【jQuery】slick.jsに一時停止機能をつける
slick.jsを一時停止できるようにします。最低限しか書いていないのでお好みで変更してください。HTML<div class="slider"> <div><img src="image1.jpg" alt=""></div> <div>...
Web制作 【HTML・CSS・JavaScript】aタグのリンクを無効にする
aタグのリンクを無効にしたい場合の、HTML・CSS・JavaScriptそれぞれの方法です。単にリンクを無効にしたいだけであれば、href属性を外してtabindex="-1"を付けるのが最もシンプルで、デメリットもありません。HTMLの...
Web制作 【CSS】flexboxでflexコンテナからflexアイテムがはみ出る場合の対策
display; flex;を指定した際、flexコンテナ（親要素）からflexアイテム（子要素）がはみ出てしまうときは、flexアイテムに対してそれぞれ下記の指定をしてあげます。flex-direction: row; の場合Flexアイ...
Web制作 【CSS】クラス名やid名を前方一致・後方一致・部分一致で指定する
前方一致前方一致の場合はのように指定します。 { display: none;} { display: none;}部分一致部分一致の場合はのように指定します。 { display: none;} { display: none;}後方一致...