長いURLや英単語は、overflow-wrap: anywhere を付けると枠の中で折り返せます。break-word や word-break: break-all との違い、flex や表の中で効かない場合の直し方、pre の ...

合計金額と人数を入れると、1人あたりの額を出す割り勘の部品を React で作りました。100円単位で切り上げて全員同じ額にする場合と、端数を幹事が払う場合の2通りを並べ、全角の数字や IME で打ったときの扱いも確かめています。

見出しに text-wrap: balance を付けると、行の長さがそろい、最後の行に数文字だけ残る折り返しを防げます。日本語向けの word-break: auto-phrase との組み合わせや、br・行数で効かない場合も確かめ ...

記事の見出しに「1.」「1.1」のような番号を、HTML に書かずに CSS のカウンターで振ります。h3 の番号を節ごとに 1 に戻す書き方、よくある間違い、読み上げ用の名前に番号を入れる方法、目次の番号、長い見出しの折り返しまで確 ...

サイドバーの上の部品はスクロールで流し、下の目次だけを途中から画面に残すには、目次に position: sticky と top を付け、サイドバーの列を本文と同じ高さまで伸ばしておきます。追従しないときに見直す列の高さと、画面より ...

モーダルダイアログの後ろのページを暗くぼかすには、dialog を showModal() で開き、::backdrop に半透明の背景色と backdrop-filter の blur() を指定します。効き方を画素の明るさで測り、 ...

kbd 要素に枠線と角丸、下だけ太い枠線を付けると、キーボードのキーのような見た目になります。使い方の説明やヘルプのページで、文章の中のショートカットキーをキーの形で見せたいときに使えます。行の間が広がらない line-height ...

料金プランのカードは、CSS Grid の subgrid を使うと、説明文の長さが違っても、機能の一覧とボタンの位置がとなりのカードとそろいます。flex との違い、おすすめのバッジの置き方、狭い画面で縦に並べる書き方を、位置を測っ ...

入力欄のまとまりを fieldset で囲むと、legend の見出しが枠線の上に載った枠になります。枠を角丸にする CSS、disabled でまとめて無効にする書き方、細い画面ではみ出すときの直し方を Chromium で確かめま ...

セクションの下端を斜めにするには、clip-path の polygon() で右下の角を上げます。切った部分に次のセクションの色を出す重ね方、斜めの辺で文字が切れないための余白、画面の幅が変わっても角度を保つ tan() の使い方も ...