HTML/CSS

テーブル内に長い文字列やコード、URLなどを表示した際に、「意図せず改行される」「列幅が不自然に広がる」「レイアウトが崩れる」といった問題が発生することがあります。表は情報密度が高くなりやすいため、文字の改行ルールを適切に制御しないと、可読...

HTMLのテーブルでは thead・tbody・tfoot という3つのセクション要素が用意されていますが、「とりあえず tbody だけ使っている」「見た目が変わらないので省略している」というケースも少なくありません。しかし、これらは単な...

HTMLのテーブルレイアウトでは、table-layout プロパティによって列幅の決まり方が大きく変わります。特に table-layout: auto と table-layout: fixed の違いを理解していないと、「列幅が安定し...

Flexboxを使ったレイアウトでは、align-items と align-content の違いが分からず、「指定しても効かない」「なぜ位置が変わらないのか理解できない」と感じることがよくあります。この2つは似た名前を持っていますが、作...

Flexboxでレイアウトを組んでいると、「画面幅を縮めたら折り返さない」「意図せず横スクロールが発生する」「flex-grow や flex-basis が効いていないように見える」といった現象に遭遇することがあります。これらの原因として...

Flexboxを使ったレイアウトでは、「width を指定しているのに思った通りの幅にならない」「flex-basis を指定すると挙動が変わる」といった疑問を持つことがよくあります。flex-basis は一見すると width と似た役...

UI実装では、アイコンや装飾図形を「SVGで作るべきか」「CSSだけで表現すべきか」で迷う場面が頻繁にあります。どちらも正解になり得る手段ですが、基準が曖昧なまま選択すると、後から修正しづらい構成になったり、保守コストが増えたりします。本記...

CSSの ::before や ::after は、装飾表現をHTML構造から切り離すための非常に強力な仕組みです。アイコンの追加、装飾線、背景表現、UIパーツの補助など、実務の現場ではほぼ必ず使われる一方で、「何でもかんでも before...

CSSで三角形を作る方法としては、border を使ったテクニックがよく知られています。しかし、通常の border 三角形はエッジが鋭く、UIパーツとして使うと少し硬い印象になりがちです。吹き出しの矢印やツールチップ、ボタンのポインタなど...

WebサイトやアプリのUIでは、チェックマークや矢印といったシンプルなアイコンが頻繁に使われます。これらを画像やSVGで用意する方法もありますが、色変更やサイズ調整、ダークモード対応のたびに管理コストが増えるという課題があります。実務では、...

HTMLのリストをネストして使っていると、「階層が深くなるにつれてインデントがズレる」「ブラウザごとに余白の量が違う」「デザイン通りに揃わない」といった問題が起こりがちです。これはCSSの不具合というより、ul・ol が持つデフォルトスタイ...

リストレイアウトを実装していると、「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 は、可読性や...