印刷するときだけ使うスタイルは、@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 ...

段落の1文字目は ::first-letter で選び、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 構文での直し方や、マウスを乗せた行の色が付かないときの直し方も、検証環境で確かめました。

選んだ画像を canvas に描いて画素を取り出し、jsQR に渡して QR コードを読む React のコンポーネントです。背景が透明な PNG、白黒が反対の QR コード、大きな画像、Shift_JIS の文字、QR コードが2つ ...