Gallery– category –

カンプ画像（Figma） 実装画面（ブラウザ） デモページを見る 実装のポイント解説 select-wrap：擬似要素と pointer-events: none によるカスタム矢印の実装 ポイント: ブラウザ標準のセレクトボックスの矢印を消去し、::after 擬似要素を用いてカンプ通り...

カンプ画像（Figma） 実装画面（ブラウザ） デモページを見る 実装のポイント解説 table-wrap：スマートフォン表示を崩さない「ラッパー要素」とスクロール制御 ポイント: 表が画面幅からはみ出た際に、サイト全体が横揺れするのを防ぎ、表の中だけで安全...

カンプ画像（Figma） 実装画面（ブラウザ） デモページを見る 実装のポイント解説 toast：inline-grid による3カラムレイアウトの構築 ポイント: トースト全体の幅をコンテンツに合わせつつ、内部の「アイコン・テキスト・閉じるボタン」を grid プロパテ...

カンプ画像（Figma） 実装画面（ブラウザ） デモページを見る 実装のポイント解説 list01：擬似要素（::before）によるカスタムアイコンの実装 ポイント: デフォルトのリスト記号（黒丸など）を使わず、::before 擬似要素でデザインカンプ通りのオリジナル...

カンプ画像（Figma） 実装画面（ブラウザ） デモページを見る 実装のポイント解説 button01・02：displayプロパティによる挙動の違い ポイント: 同じ見た目のボタンでも、用途に合わせて inline-block と block を適切に使い分けています。 .button01 { di...

カンプ画像（Figma） 実装画面（ブラウザ） デモページを見る 実装のポイント解説 title04：背景機能で作る「縦線」の装飾 ポイント: 疑似要素や新しいタグを使わず、背景の設定だけで左側にアクセントラインを入れています。 .title04 { background-image...