-
CSS
【CSS革命】ついに親要素を操作可能に！疑似クラス「:has()」の実務的な使い方
Web制作をしていると、こんな壁にぶつかったことはありませんか？ 「カードの中に『重要』というラベルがある時だけ、カード全体の背景色を赤くしたい」 「チェックボックスにチェックが入った時だけ、親の行（枠）の色を変えたい」 […]
2026.10.31
-
CSS
【CSS】メディアクエリ不要！Gridの「auto-fit」で作る最強のレスポンシブカード配列
ブログの記事一覧や、サービスの「特徴3選」などをカード型で並べるレイアウトは、Webデザインの定番です。 これまでは「Flexbox」を使い、スマホなら1列（100%）、タブレットなら2列（50%）、PCなら3列（33. […]
2026.10.30
-
CSS
【CSSたった2行】スクロールに追従するサイドバーを作る「position: sticky」
ブログの長文記事を読んでいる時、サイドバーにある「目次」や「バナー広告」が画面外に消えてしまって、もったいないと思ったことはありませんか？ これらを画面のスクロールに合わせてピタッと追従（固定）させると、読者がいつでも他 […]
2026.10.29
-
CSS
【CSS】たった3行！テキストを選択した時の色（ハイライト）をおしゃれに変える方法
パソコンやスマホでブログの文章をコピーしようと選択した時、テキストの背景が「標準の青色」になるのを見たことがあると思います。 もちろんそのままでも機能上は全く問題ありませんが、サイトのイメージカラーが「緑」や「オレンジ」 […]
2026.10.28
-
CSS
【CSS】clamp()で文字サイズを自動可変にする魔法の1行
Webサイトを作っていて、「PCだとちょうどいい文字サイズなのに、スマホで見ると文字が大きすぎて改行が不自然になる…」という経験はありませんか？ これまでは、スマホ用・タブレット用・PC用に合わせて「メディアクエリ（@m […]
2026.10.27
-
CSS
【コピペで1分】WordPressの画像に自動で「枠線（ボーダー）」をつける超カンタンな方法
ブログ記事にスクリーンショットや、背景が白いイラスト・図解を載せたとき、「画像の境界線が分からなくなって、どこからどこまでが画像なのか見づらい…」と困ったことはありませんか？ 特に記事の背景色（白）と、画像の背景色（白） […]
2026.10.26
-
JavaScript
【jQuery不要】CSSたった1行！ページ内リンクをフワッと「スムーススクロール」にする方法
記事の「目次」や、画面右下の「トップへ戻る」ボタンをクリックした時、画面が一瞬で切り替わるのではなく、フワッと滑らかに移動する「スムーススクロール」。 少し前までのWeb制作では、jQuery（JavaScript）を使 […]
2026.10.25
-
CSS
モダンなHTMLで実装！コピペで使える「Q&A（アコーディオン）
ブログの「よくある質問」や「補足説明」などでよく使われる、クリックするとビヨーンと開く「アコーディオン（Q&A）」。 少し前までは、専用の重いプラグインを入れたり、JavaScript（jQuery）を記述しな […]
2026.10.24
