HTML/CSS
CSS には多くの長さの単位があり、同じ見た目を実現するにも複数の書き方が存在します。チーム開発で「ここは px なのか rem...
z-index は CSS の中でも特にカオスになりやすいプロパティです。「重なりが崩れたからとりあえず 9999 にしよう」と...
CSS が壊れる原因の大半は、詳細度（specificity）の衝突にある。あるスタイルを上書きしようとして !importan...
`display: none` から `display: block` に切り替えたとき、要素がパッと表示されるだけでアニメーシ...
フォームの `<input>` や `<textarea>` は、デフォルトではブラウザが決めた固定サイズで表示されます。ユーザ...
CSS で値を管理する手段として、Sass 変数、CSS カスタムプロパティ（`var()`）、`calc()` の 3 つがあ...
CSS の中に `top: -3px` や `width: 347px` のような数値が唐突に現れることがあります。この数値がな...
CSS のコメントはコードの意図を伝える手段ですが、書きすぎると可読性を下げ、書かなさすぎると後から読む人が困ります。何にコメン...
Web アプリでページを切り替えるとき、画面がパッと切り替わるだけだと唐突な印象を受けます。ネイティブアプリでは画面遷移にスライ...
見出しやカードのタイトルなど、短めのテキストブロックで最終行だけ極端に短くなってしまうことがあります。たとえば 3 行の見出しで...
ブラウザにはデフォルトのスタイルシート（User Agent Stylesheet）が組み込まれていて、CSS を何も書かなくて...
レスポンシブ対応のコードでは、メディアクエリのブレイクポイントがプロジェクト全体に散らばりがちです。`768px` や `102...
CSS のセレクタが深くネストされると、詳細度が上がり、スタイルの上書きが困難になります。さらにリファクタリング時に HTML ...
URL に日本語やスペース、記号を含めると文字化けやリンク切れが起きることがある。JavaScript には encodeURI...
テキストファイルを開いたとき、先頭に見覚えのない文字化けが現れた経験はないだろうか。その正体は BOM（Byte Order M...
モーダルを開いた状態で背景がスクロールしてしまう、ページの端まで来たのにゴムのように引っ張られる――こうした挙動に悩まされた経験...
モーダルを開いた状態で背景がスクロールしてしまう、ページの端まで来たのにゴムのように引っ張られる――こうした挙動に悩まされた経験...
CSS アニメーションのパフォーマンスを改善する手段として will-change がよく紹介されます。ブラウザに「この要素はこ...
HTML には画面上に表示されないけれど、テキストの振る舞いを制御する「見えない文字」がいくつか存在します。改行位置のヒントを与...
HTML には画面上に表示されないけれど、テキストの振る舞いを制御する「見えない文字」がいくつか存在します。改行位置のヒントを与...
フォントには、文字同士の間隔を自動調整するカーニングや、複数の文字を 1 つにまとめる合字（リガチャ）といった高度な組版機能が埋...
HTML で特殊文字を表示するには、&amp; のようなエンティティ名と、&38; のような番号参照の 2 つの...
カード UI やニュース一覧で、長いテキストを 2〜3 行だけ表示して末尾を「…」で省略する処理はよく使われます。1 行の省略な...
スクロールに連動して要素がフェードインしたり、プログレスバーが伸びたりする演出は、これまで JavaScript の Inter...
