CSSで、ダイアログの背景を暗くぼかす方法
モーダルダイアログの後ろのページを暗くぼかすには、dialog を showModal() で開き、::backdrop に半透明の背景色と backdrop-filter の blur() を指定します。効き方を画素の明るさで測り、 ...
CSSで、kbd要素をキーボードのキーのような見た目にする方法
kbd 要素に枠線と角丸、下だけ太い枠線を付けると、キーボードのキーのような見た目になります。使い方の説明やヘルプのページで、文章の中のショートカットキーをキーの形で見せたいときに使えます。行の間が広がらない line-height ...
CSSで、料金プランのカードを横に並べてそろえる方法
料金プランのカードは、CSS Grid の subgrid を使うと、説明文の長さが違っても、機能の一覧とボタンの位置がとなりのカードとそろいます。flex との違い、おすすめのバッジの置き方、狭い画面で縦に並べる書き方を、位置を測っ ...
CSSで、fieldsetとlegendを使って入力欄を枠で囲む方法
入力欄のまとまりを fieldset で囲むと、legend の見出しが枠線の上に載った枠になります。枠を角丸にする CSS、disabled でまとめて無効にする書き方、細い画面ではみ出すときの直し方を Chromium で確かめま ...
CSSで、区切りを斜めに切ったセクションを作る方法
セクションの下端を斜めにするには、clip-path の polygon() で右下の角を上げます。切った部分に次のセクションの色を出す重ね方、斜めの辺で文字が切れないための余白、画面の幅が変わっても角度を保つ tan() の使い方も ...
CSSで、方眼紙のようなマス目の背景を作る方法
方眼紙のようなマス目は、縦線と横線の linear-gradient を2枚重ね、background-size でマスの大きさを決めると描けます。5マスごとの濃い線、端を線で閉じる方法、線がにじむときの直し方、入力欄で線と文字をそろ ...
CSSで、ページを読んだ量を画面の上のバーで示す方法
ページをどこまで読んだかを示す上のバーは、CSS の animation-timeline: scroll() だけで作れます。短いページでバーが伸びきる点の防ぎ方と、枠の中のスクロールに合わせる書き方も確かめました。
CSSで、マウスを乗せた白黒の画像をカラーに戻す方法
画像に filter: grayscale(100%) を付けて白黒にし、:hover のときに grayscale(0%) に戻すと、マウスを乗せた画像だけがカラーになります。transition で色が戻る途中の値、ほかのフィルタ ...
CSSで、文字に縁取りを付ける方法
文字の縁取りは -webkit-text-stroke で付けられます。ただし線は輪郭の内側にも描かれ、太くすると文字が細ります。paint-order: stroke fill で線を文字の後ろに回す書き方と、text-shadow ...
CSSだけで、タブを切り替える方法
タブの数だけラジオボタンを置き、label をタブの見た目にして、:has() と :checked で選ばれたパネルだけを出すと、JavaScript なしでタブが切り替わります。矢印キーでの操作、ラジオボタンの隠し方、:targe ...
CSSで、マウスを乗せると吹き出しの説明を出す方法
ボタンと吹き出しを1つの要素で包み、:hover で visibility と opacity を切り替えると、マウスを乗せたときだけ説明が出ます。出るまでの待ち時間、吹き出しへのマウスの移し方、キーボードと Esc キー、読み上げ用 ...
Reactで、文章を読むのにかかる時間の目安を表示する方法
本文の文字数と「1分に読む文字数」から、「この記事は約3分で読めます」を出すコンポーネントを React で作りました。日本語は見た目の1文字ごと、英語は単語ごとに数える方法、四捨五入の境目、time 要素への入れ方、長い文章で速く数 ...
CSSで、ダークモードに合わせて色を切り替える方法
OS のダークモードに合わせて色を変えるには、色をカスタムプロパティにまとめ、prefers-color-scheme のメディアクエリで値を入れ替えます。color-scheme、light-dark()、テーマを選ぶボタンも確かめ ...
CSSで、表の見出しを固定してスクロールする方法
縦に長い表をスクロールしても見出しの行が上に残るようにするには、表を高さの決まった枠に入れ、見出しのセルに position: sticky と top: 0 を付けます。左の列も固定する書き方と、線が消える・文字が重なるときの直し方 ...
CSSで、入力欄のラベルを上に浮かせる方法
入力欄に重ねたラベルを、フォーカスしたときと文字が入っているときに上へ小さく動かす方法です。入力したあとも何の欄かが分かる「フローティングラベル」を、CSS だけで作りたいときに使えます。placeholder に空白を1つ入れて : ...
CSSで、アコーディオンをなめらかに開閉する方法
details の中身を包む ::details-content の高さを、0 から auto へ transition で動かすと、アコーディオンがなめらかに開閉します。閉じるときの指定や、details を使わない書き方も Chr ...
CSSで、横スクロールのカードをぴたっと止める方法
横に並べたカードを、スクロールしたときにカードの左端でぴたっと止めるには、CSS の scroll-snap を使います。カルーセルやスライダーと呼ばれる、カードを横に送って見せる部品を作るとき、どのカードも同じ位置で止めたい場面で使 ...
CSSで、画像の上に文字を読みやすく重ねる方法
画像の上の白い文字は、文字の下だけをグラデーションで暗くするか、半透明の箱を敷くと読みやすくなります。ページの先頭に大きく置く画像、いわゆるメインビジュアルやヒーロー画像に、見出しと短い説明を重ねたい場面で使えます。text-shad ...
CSSで、手順の進み具合を示すステップ表示を作る方法
購入手続きなどの「今どの手順にいるか」を示すステップ表示を、ol と CSS で作ります。番号はカウンター、つなぐ線は疑似要素で描き、済んだステップは :has() で選ぶので、JavaScript は aria-current を付 ...
CSSで、文字に蛍光ペンのような線を引く方法
文字に蛍光ペンのような線を引くには、上60%を透明にした linear-gradient を背景に置きます。行をまたいでも線は続きます。文章の中で注目してほしい部分を、マーカーで線を引いたように目立たせたいときに使えます。折り返しの端 ...
CSSで、押すと波紋が広がるボタンを作る方法
押すと波紋が広がるボタンは、::after の円をふだんは大きく透明にしておき、:active の間だけ大きさ0にすると CSS で作れます。押した位置から広げる方法と、波紋が途中で消える、外にはみ出すときの直し方も確かめました。
CSSで、マウスを乗せると画像を枠の中で拡大する方法
枠に overflow: hidden を付け、:hover で画像を transform: scale(1.1) にすると、枠の大きさは変わらず、中の画像だけが大きくなります。overflow を付け忘れたときの重なりや、画像の下の ...
Reactで、ふりがな付きの文章を表示する方法
「{紫陽花|あじさい}」のように書いた文字列から、React で ruby 要素を組み立ててふりがなを表示するコードです。1文字ずつ付ける形、表示の切り替え、行間、コピーしたときにふりがなが混ざる問題の避け方も扱います。
CSSで、カードの角に斜めのリボンを付ける方法
カードの角に「NEW」のような斜めのリボンを付けるには、カードに position: relative と overflow: hidden を付け、細長い要素を絶対配置して45度回します。角からの距離とリボンの長さの決め方を、画素を ...
CSSで、パンくずリストを矢印の形で並べる方法
パンくずリストの各リンクを clip-path の polygon() で矢印の形に切り抜き、左へずらして前の矢印の先を次のくぼみに入れます。重なった部分のクリック、切れて見えなくなるフォーカスの枠、折り返したときのはみ出しも確かめま ...
CSSで縦の線と点のタイムラインを作る方法
縦の線と点で出来事を並べるタイムラインを、ol と li の疑似要素だけで作ります。線が最後の点より下に伸びる、点の中に線が透けて見える、文字を大きくすると点がずれるといったつまずきと直し方を、画素を測って確かめました。
CSSで、長い文章を3行で「…」と省略する方法
長い文章を3行で切って「…」を付けるには、-webkit-line-clamp を display: -webkit-box と組み合わせます。max-height では「…」が付かないことと、padding を付けると4行目が見える ...
CSSで波の形の区切り線を作る方法
区画の境目を波の形にするには、波を描いた SVG を横幅いっぱいに置くか、2つの radial-gradient で描きます。波の下にすき間ができる、画面の幅で波が縮むといったつまずきと直し方を、画素の色を測って確かめました。 ...
CSS Gridで、カードを幅に合わせて自動で並べる方法
grid-template-columns に repeat(auto-fill, minmax(220px, 1fr)) と書くと、親の幅に入るだけカードが並び、余った幅はカードに配られます。auto-fit との違い、狭い画面では ...
CSSで、チェックボックスを好きな見た目にする方法
色だけなら accent-color の1行で変えられます。形から変えるなら appearance: none で見た目を消し、枠と ::before のチェックを描きます。未確定の状態と、強制カラーモードでチェックが消える問題の直し ...