Web技術 Noto Sans JPを迷わず使う 2026年版Web制作者のための最新実装メモ
日本語のWebサイトって、結局フォントで八割決まります。言い過ぎに聞こえるかもしれないけど、UIが丁寧でも文字が荒れると一気に安っぽく見える。逆も同じで、文字が落ち着いているだけで「ちゃんとしてる感」が出る。ずるい。だからこそ、Noto S...
css
Web技術 Web技術 最近のCSS 5選 2026年版inset min max clamp is where auto-fit auto-fillで差が付く実務テク
CSSは不思議な世界です。昨日までの正解が、今日も正解とは限らない。 ただし安心してください。全部を追いかける必要はありません。 「よく出るやつ」から順番に覚えると、制作スピードと保守性がちゃんと上がります。この記事は、現場で出番が多い最近...
Web技術 日本語文章を読みやすくするために指定したいオススメのCSS 2026年版text-autospace normal overflow-wrap anywhere word-break normal line-break strict を実務目線で使いこなす
日本語の文章って、読みやすさの大半が「改行」と「間」に支配されています。見出しのキレ、本文の呼吸、URLがはみ出してレイアウトを破壊しない安心感。 このあたりをCSSでちゃんと整えると、同じ文章でも体感の読みやすさが一段上がります。でも現場...
Web技術 スクロールでセクションが切り替わる時に次のコンテンツと重ねる実装まとめposition stickyとVanilla JSで作る 2026年の実務向けレシピ
「スクロールしていくと、次のセクションが前のセクションにぬるっと重なって切り替わる」。 この見せ方、LPやブランドサイトでよく見ます。派手すぎないのに雰囲気が出る。しかも、意外と離脱も減る。ただし実装は、見た目よりも少しだけ気を使います。 ...
Web技術 縦の余白はもう迷わない stackパターン実務入門.stack > * + *で均一スペース ただしh2直後は詰めるテクまで
兄弟要素がずらーっと並ぶレイアウト。記事ページ、LPの説明文、FAQ、仕様書、採用ページの本文。 こういう場面で毎回やりがちなのが「各要素にmargin-bottomを付けて、最後だけ消す」やつです。やってはいけないわけではありません。でも...
Web技術 CSSの新常識@scope入門 HTMLとCSSだけでスコープ化して保守地獄を抜ける
CSSは自由だ。自由すぎて事故る。コーポレートの改修で、たった1行の追記が別ページのレイアウトを壊す。あの瞬間の血の気の引き方、覚えていますか。原因はだいたい同じです。グローバルに効くセレクタ、長生きしすぎたユーティリティ、名前の衝突。BE...
Web技術 UnoCSSとは何か 2026年の実務で失敗しない導入ガイド出来ること 出来ないこと 使いどころとやめどきまで全部まとめ
Tailwind系のユーティリティCSSに慣れてくると、ある日ふと思います。「もっと速くならないのか」「設定の自由度がもう少し欲しい」「使うクラスだけ生成してくれればいいのに」。 この欲が出てきたタイミングで候補に上がるのがUnoCSSです...
Web技術 CSSカスタムプロパティとSassの違い 完全整理 どっちを使うか迷う時間を終わらせる
CSSの変数って結局どれを使えばいいのか。現場で一回は迷います。CSSカスタムプロパティ(var)が出てきてから、Sassの変数やmixinの立場が変わった。変わったのに、昔の成功体験もまだ強い。結果として、プロジェクトごとに流派が分かれる...
Web技術 ぐるっと円で画像が現れる！mask: conic-gradient()で作る気持ちいいCSSアニメーション完全ガイド
「画像の上に円がぐるっと一周して、スッと表示されるアニメーションをCSSだけで作りたい。」そんな時にめちゃくちゃ頼れるのが、mask: conic-gradient(from 150deg, black 100%, transparent ...
Web技術 UIデザインが一段上がる 2025年版「最新CSS」完全ガイド― text-autospace から scroll-state(), dialog の新仕様まで実務目線で解説
はじめに：2025年のCSSは「情報収集」から「実戦投入」の段階へここ数年、CSS は「ちょっとした新機能」どころではなく、UIデザインそのものを組み替えるレベルで進化しています。2025年の MTDDC Meetup Tokyo で公開さ...