HTML 【入門編】Flexboxを用いたリストのレイアウト制御 – HTML実践ガイド
リストを横並びにしたい！Flexboxで「マーカーが消える問題」を華麗に解決する方法こんにちは！Web制作の学習、順調に進んでいますか？HTMLを学び始めると、必ず出会うのが「リスト（`ul`, `ol`）」ですよね。箇条書きを作るのにとっ...
2026-09
HTML HTML 【テクニカル・上級編】list-style一括指定プロパティの構文 – HTML実践ガイド
現代のWeb開発における `list-style` の落とし穴：一行記述の背後に潜む「ブラウザの機微」フロントエンドのアーキテクチャを設計する際、私たちはしばしば「枯れた技術」であるはずのHTML/CSSの仕様に足元をすくわれます。特に `...
HTML 【実務・中級編】list-style一括指定プロパティの構文 – HTML実践ガイド
`list-style` 一括指定の「正解」を知る――ブラウザの挙動と現場の作法フロントエンド開発の現場で、CSSの `list-style` プロパティを「なんとなく」使っていませんか？`ul` や `ol` のリスト装飾を整える際、多く...
HTML 【入門編】list-style一括指定プロパティの構文 – HTML実践ガイド
リストの見た目を「これ一つ」で制御！CSSの`list-style`一括指定をマスターしようWebサイトを作っていると、必ずと言っていいほどお世話になるのが「リスト（`ul`や`ol`）」ですよね。「箇条書きの丸印を消したい」「画像に変えた...
HTML 【テクニカル・上級編】::marker擬似要素による高度なマーカー装飾 – HTML実践ガイド
リストの「装飾」を再定義する：`::marker` がもたらすレンダリングの最適化とアーキテクチャへの影響フロントエンドの現場において、「リストのマーカーなんて `list-style-type: none` にして、`::before` ...
HTML 【実務・中級編】::marker擬似要素による高度なマーカー装飾 – HTML実践ガイド
負債を生まないリスト装飾：::marker擬似要素を使いこなす極意フロントエンドの現場で「リストの装飾」ほど、CSSの歴史と苦闘の跡を感じさせるものはありません。かつては `list-style-image` の貧弱な仕様に泣き、`::be...
HTML 【入門編】::marker擬似要素による高度なマーカー装飾 – HTML実践ガイド
「リストの点々」を自由自在に操る！::marker擬似要素でデザインの質を一段階引き上げようWebサイトを作っていると、必ずと言っていいほどお世話になるのがリスト（`` や ``）ですよね。箇条書きの先頭にある「黒い丸」や「数字」。あれ、な...
JavaScript 【実務・中級編】 String.prototype.substr()の非推奨理由と代替案 – JavaScript実践ガイド
「お疲れ様。コードレビューをしていたら、まだ `substr()` を使っている箇所を見つけたよ。動いてはいるけれど、今の設計思想からすると、これは『負債の種』を植え付けているようなものなんだ。今日は、なぜ僕たちが `substr()` を...
CSS 【実務・中級編】 :picture-in-picture ピクチャーインピクチャー疑似クラス – CSS実践ガイド
やあ、現場でコードと格闘している同志諸君。今日もブラウザのレンダリングエンジンと仲良くやっているかな？ビデオコンテンツがWeb体験の主役になって久しいが、最近のモダンブラウザが標準搭載している「ピクチャーインピクチャー（PiP）」機能、こい...
React 【実務・中級編】 useEffectによる無限ループの発生原因と回避策 – React実践ガイド
やあ、調子はどうだい？現場でReactを書いていれば、誰もが一度は「ブラウザが固まった……」「コンソールが`Maximum update depth exceeded`のエラーで埋め尽くされた……」という、あの背筋が凍る瞬間を経験するものだ...