スクロールバーが出ると、中央寄せの中身がその幅の分だけ左へずれます。html に scrollbar-gutter: stable を指定して幅を空けておく方法と、overflow-y: scroll や both-edges との違 ...

印刷するときだけ使うスタイルは、@media print か、media=”print” を付けた link で読み込む CSS に書きます。メニューを消し、カードを2列にし、日ごとに改ページする例を、Chro ...

CSS の column-count や column-width で、文章を新聞のように複数の段に流す方法です。スマホで段が細くなりすぎない指定、段の間の線、段にまたがる見出し、引用を段の境目で割らない指定を Chromium で確 ...

スクロールバーの色は scrollbar-color、太さは scrollbar-width で変えられます。つまみを丸くするなら ::-webkit-scrollbar を使いますが、標準の2つのプロパティを指定した要素では無視され ...

日本語の段落の右端をそろえるには、text-align: justify を指定します。英数字が混ざった行で間隔がどう広がるか、text-justify の値による違い、最後の行や項目名の均等割り付けに使う text-align-la ...

記事や章の最初の段落をドロップキャップで飾るには、::first-letter で1文字目を選び、float か initial-letter で大きくします。日本語の段落で initial-letter の字下げが指定より1行多くな ...

「※」で始まる注釈の2行目以降を、記号のあとの本文の頭にそろえるには、padding-left と負の text-indent を組み合わせます。新しいブラウザーで使える hanging の書き方や、「注1：」のように幅の違う見出しの ...

画像ギャラリーや記事の一覧で、縦長や横長の画像を同じ形のサムネイルにそろえるには、img に aspect-ratio と object-fit: cover を付けます。切り取る位置の決め方や、height: auto を忘れたとき ...

「サーバー」と「サーバ」のような表記ゆれを、文章の中から見つけて一覧にし、ボタンで1つの書き方にそろえるコンポーネントを React で作りました。カタカナ語は比べるための形にそろえて探し、それ以外は辞書で探します。見逃す例と、誤って ...

表を1行おきに色分けするには、tbody tr:nth-child(even) に背景色を付けます。行を隠すと縞がずれるときの of 構文での直し方や、マウスを乗せた行の色が付かないときの直し方も、検証環境で確かめました。