見出しに 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() の使い方も ...

Markdown の入力欄とプレビューのスクロールを、見出しや段落の位置でそろえます。全体の割合で合わせたときのずれ、送り返しで止まるスムーズスクロール、画像の読み込み後のずれを Chromium で確かめました。

方眼紙のようなマス目は、縦線と横線の linear-gradient を2枚重ね、background-size でマスの大きさを決めると描けます。5マスごとの濃い線、端を線で閉じる方法、線がにじむときの直し方、入力欄で線と文字をそろ ...