</>CodingLSコーディングライフスタイル

Flexboxでレイアウトを組んでいると、「画面幅を縮めたら折り返さない」「意図せず横スクロールが発生する」「flex-grow

CSSのflex-basisとwidthの違いを優先順位の仕組みから解説。flex-basis: autoの挙動、flex: 1でbasisが0になる罠、flex-direction: columnでの挙動、min-width: 0によるテキスト溢れ対策、サイドバー+メイン等の実践パターンまで網羅。

UI実装では、アイコンや装飾図形を「SVGで作るべきか」「CSSだけで表現すべきか」で迷う場面が頻繁にあります。どちらも正解になり得

CSSの ::before や ::after は、装飾表現をHTML構造から切り離すための非常に強力な仕組みです。アイコンの追加、装飾線、背景表現

CSSで三角形を作る方法としては、border を使ったテクニックがよく知られています。しかし、通常の border 三角形はエッジが鋭く

WebサイトやアプリのUIでは、チェックマークや矢印といったシンプルなアイコンが頻繁に使われます。これらを画像やSVGで用意する方法も

HTMLのリストをネストして使っていると、「階層が深くなるにつれてインデントがズレる」「ブラウザごとに余白の量が違う」「デ

リストレイアウトを実装していると、「liごとに高さが揃わない」「同じデザインなのに一部の行だけズレて見える」といった違和感に

リストのマーカーを画像で用意すると、デザインの自由度は上がる一方で、画像の管理コストや読み込み負荷が増え、ダークモード対応や色変

番号付きリストは、手順説明やランキング、注意事項の整理などで頻繁に使われるHTML要素です。しかし、標準の ol はブラウザ依存の数字デ

Webフォントを使ったサイト制作では、font-weight を指定しているにもかかわらず、文字の太さが思ったように変わらないという問題が

CSSで font-weight を指定しているにもかかわらず、文字の太さが変わらないという問題は、Web制作の現場で非常によく遭遇します。bold

日本語コンテンツを扱うWebサイトでは、縦書きレイアウトを求められる場面が少なからずあります

text-overflow: ellipsis は、テキストが要素の幅を超えたときに末尾を「…」で省略できる便利なCSSプロパティです。しかし実際の

Webページで文章を読みやすく整える際、段落の字下げは古くから使われてきた基本的な表現手法です。CSSでは text-indent を使うことで

Webサイトの文字組みを調整する際に、line-height や font-size は意識していても、letter-spacing は感覚的に指定してしまって