リストレイアウトを実装していると、「liごとに高さが揃わない」「同じデザインなのに一部の行だけズレて見える」といった違和感に直面することがあります。この問題は、margin や padding の指定ミスと思われがちですが、実務では lin...

リストのマーカーを画像で用意すると、デザインの自由度は上がる一方で、画像の管理コストや読み込み負荷が増え、ダークモード対応や色変更にも手間がかかります。実務では「画像を使わずにCSSだけでマーカーを作りたい」という要件がよく出ます。CSSだ...

番号付きリストは、手順説明やランキング、注意事項の整理などで頻繁に使われるHTML要素です。しかし、標準の ol はブラウザ依存の数字デザインになるため、デザインに統一感を持たせたい場合や、UIとして見栄えを整えたい場合には物足りなく感じる...

Webフォントを使ったサイト制作では、font-weight を指定しているにもかかわらず、文字の太さが思ったように変わらないという問題が頻繁に発生します。この原因の多くは、CSSの書き方ではなく、Webフォントと font-weight ...

CSSで font-weight を指定しているにもかかわらず、文字の太さが変わらないという問題は、Web制作の現場で非常によく遭遇します。bold を指定しても見た目が変わらなかったり、数値指定をしても同じ太さのまま表示されたりする原因は...

日本語コンテンツを扱うWebサイトでは、縦書きレイアウトを求められる場面が少なからずあります。CSSでは writing-mode と text-orientation を使うことで縦書きを実現できますが、単に指定するだけでは「英数字の向き...

text-overflow: ellipsis は、テキストが要素の幅を超えたときに末尾を「…」で省略できる便利なCSSプロパティです。しかし実際の制作現場では、「指定しているのに効かない」「一部の環境だけ省略されない」といったトラブルが頻...

Webページで文章を読みやすく整える際、段落の字下げは古くから使われてきた基本的な表現手法です。CSSでは text-indent を使うことで、HTML構造を崩さずに段落の先頭だけを下げることができます。しかし、使い方を誤るとレイアウト崩...

Webサイトの文字組みを調整する際に、line-height や font-size は意識していても、letter-spacing は感覚的に指定してしまっているケースが少なくありません。しかし letter-spacing は、可読性や...