Web技術 縦の余白はもう迷わない stackパターン実務入門.stack > * + *で均一スペース ただしh2直後は詰めるテクまで
兄弟要素がずらーっと並ぶレイアウト。記事ページ、LPの説明文、FAQ、仕様書、採用ページの本文。 こういう場面で毎回やりがちなのが「各要素にmargin-bottomを付けて、最後だけ消す」やつです。やってはいけないわけではありません。でも...
takec23com
Web技術 
Web技術 レスポンシブCSS 2026 実務で崩れない設計と書き方まとめ メディアクエリだけに頼らない最新の考え方
レスポンシブ対応と聞くと、まずメディアクエリを思い浮かべる人が多いはずです。もちろん間違いではありません。ですが実務で本当に効くのは、メディアクエリを増やすことではなく、そもそも崩れにくいCSSの土台を作ることです。この記事は、レスポンシブ...
Web技術 2026年版 JavaScript頼みをやめる CSS新機能4選 :has スクロール駆動 View Transitions Anchor を実務で使い切る
Web制作あるあるです。「これCSSだけで行けそうだけど、結局JSを書いた方が早いよね」で、気付けばイベントリスナーが増殖し、状態管理が絡まり、保守で胃が痛くなる。でも2025年以降のCSSは、ただの見た目担当ではなくなってきました。UIの...
Web技術 CSSの新常識@scope入門 HTMLとCSSだけでスコープ化して保守地獄を抜ける
CSSは自由だ。自由すぎて事故る。コーポレートの改修で、たった1行の追記が別ページのレイアウトを壊す。あの瞬間の血の気の引き方、覚えていますか。原因はだいたい同じです。グローバルに効くセレクタ、長生きしすぎたユーティリティ、名前の衝突。BE...
Web技術 UnoCSSとは何か 2026年の実務で失敗しない導入ガイド出来ること 出来ないこと 使いどころとやめどきまで全部まとめ
Tailwind系のユーティリティCSSに慣れてくると、ある日ふと思います。「もっと速くならないのか」「設定の自由度がもう少し欲しい」「使うクラスだけ生成してくれればいいのに」。 この欲が出てきたタイミングで候補に上がるのがUnoCSSです...
Web技術 HTMLのスペース入れ方 完全ガイド 目的別7選と実務の正解 2026年版
Web制作をしていると、地味に何度も踏む地雷があります。そう、スペース問題です。「半角スペースを3個入れたのに 1個に見える」「全角スペースで整えたら後で崩壊」「 を並べてたら修正が地獄」など、あるあるが多すぎる。でも安心してくだ...
Web技術 WordPress高速化 完全ガイド 体感が変わる現場の手順と地雷回避
WordPressの表示が遅い。地味にストレスです。記事を開くたびにローディング。画像が出るまで真っ白。スクロールするとガクガク。読者は待ってくれません。あなたが頑張って書いた渾身の記事も、読み込まれる前に閉じられる。悲しいが現実。速度は気...
PC周辺 ブラウザ上でJavaScriptを止める方法まとめデバッグ 検証 セキュリティのために 今日から使える実務テク
フロントエンドを触っていると、たまにこういう瞬間が来ます。「何かが動き過ぎて原因が追えない」 「ページが真っ白で、どこが悪いのか分からない」 「拡張機能や計測タグが暴れて、検証が進まない」このとき役に立つのが、ブラウザ上でJavaScrip...
Web技術 CSSカスタムプロパティとSassの違い 完全整理 どっちを使うか迷う時間を終わらせる
CSSの変数って結局どれを使えばいいのか。現場で一回は迷います。CSSカスタムプロパティ(var)が出てきてから、Sassの変数やmixinの立場が変わった。変わったのに、昔の成功体験もまだ強い。結果として、プロジェクトごとに流派が分かれる...
Web技術 ぐるっと円で画像が現れる！mask: conic-gradient()で作る気持ちいいCSSアニメーション完全ガイド
「画像の上に円がぐるっと一周して、スッと表示されるアニメーションをCSSだけで作りたい。」そんな時にめちゃくちゃ頼れるのが、mask: conic-gradient(from 150deg, black 100%, transparent ...