Gallery– category –

カンプ画像（Figma） 実装画面（ブラウザ） デモページを見る 実装のポイント解説 プロポーショナルな画面設計：パーセント指定とCSS Gridによる比率維持レイアウト ポイント: メインビジュアルの左右分割レイアウトにCSS Gridを採用。テキストエリアと画...

カンプ画像（Figma） 実装画面（ブラウザ） デモページを見る 実装のポイント解説 動的な区切り線の実装：flex-wrapと疑似要素（::after）によるメニューレイアウト ポイント: メニュー項目（.footer-item）の間にある区切り線（/）をHTMLに直接書くのでは...

カンプ画像（Figma） 実装画面（ブラウザ） デモページを見る 実装のポイント解説 拡張性の高いコンポーネント設計：BEMによる基本要素（Element）とバリエーション（Modifier）の切り分け ポイント: 通常のテキストリンクと、強調したい2つのボタン（資料...

カンプ画像（Figma） 実装画面（ブラウザ） デモページを見る 実装のポイント解説 二重のコンテナ設計：max-widthの階層化（.ctaと.cta-inner）によるレスポンシブ制御 ポイント: 外側の背景枠（.cta）と、内側のコンテンツ表示領域（.cta-inner）にそれぞ...

カンプ画像（Figma） 実装画面（ブラウザ） デモページを見る 実装のポイント解説 プロフィールの高精度配置：CSS Gridのライン指定（grid-row / grid-column）によるレイアウト ポイント: プロフィールエリア（.voice-client）にCSS Gridを採用。アバター...

カンプ画像（Figma） 実装画面（ブラウザ） デモページを見る 実装のポイント解説 状態管理の最適化：状態を表すクラス（is-inactive）の設計と不透明度による識別表示 ポイント: 非対応の機能リストに対して「最初から薄い色のパーツ」を別個に作るのでは...

カンプ画像（Figma） 実装画面（ブラウザ） デモページを見る 実装のポイント解説 動的なナンバリング：CSSカウンター機能（counter）を用いた自動連番システム ポイント: HTML側に「01, 02...」といった数字を直接記述せず、CSSの counter-increment およ...

カンプ画像（Figma） 実装画面（ブラウザ） デモページを見る 実装のポイント解説 複数行の縦列揃え：モダンCSS「subgrid」を活用した完璧な格子状レイアウト ポイント: 子要素（.news-item）側で grid-template-columns: subgrid; を指定し、親要素（.new...

カンプ画像（Figma） 実装画面（ブラウザ） デモページを見る 実装のポイント解説 画像比率の固定：aspect-ratioとobject-fitによる画像自体の歪み・ボケ防止 ポイント: 異なるサイズ（1200×630等）の画像が設定されても、デザインカンプで指定された360:2...

カンプ画像（Figma） 実装画面（ブラウザ） デモページを見る 実装のポイント解説 FAQセクション：CSS Gridと擬似要素（::before）を組み合わせた強固な２カラムレイアウト ポイント: 「Q」や「A」のアイコンをHTMLに直接記述せず、CSSの擬似要素（::befor...