MENU
  1. ホーム
  2. Gallery
  3. 質問

質問

Gallery
目次

カンプ画像（Figma）

実装画面（ブラウザ）

デモページを見る

実装のポイント解説

FAQセクション：CSS Gridと擬似要素（::before）を組み合わせた強固な２カラムレイアウト

ポイント: 「Q」や「A」のアイコンをHTMLに直接記述せず、CSSの擬似要素（::before）で生成。さらに display: grid を活用することで、テキストが複数行にわたってもアイコンが絶対に潰れず、美しく整列する構造を構築しています。

.faq-item-question,
.faq-item-answer {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 12px;
  align-items: baseline;
}

解説: 「Q」や「A」のアイコンとテキストの並びに対して、flexbox ではなく display: grid を採用している点がこの実装のポイントです。grid-template-columns: 45px 1fr; と指定することで、アイコン側の幅を固定（45px）し、残りのすべての余白をテキスト側（1fr）に割り当てています。これにより、画面幅が縮小した際やテキストが長文になった際でも、アイコンが横から押し潰されるリスクを根本から防いでいます。また、align-items: baseline; を適用することで、アイコンの文字（QやA）の下端と、質問・回答文の1行目のフォントの下端がピシッと揃うよう計算されています。テキストの文字サイズや行高（line-height）が変わってもレイアウトが崩れない、実務基準の強固な設計パターンです。

擬似要素アイコン：aspect-ratioとplace-itemsによるパーフェクトな正円デザイン

ポイント: アイコンの正円構築に aspect-ratio を使用し、円内の文字の「上下左右中央寄せ」を display: grid と place-items: center のわずか2行で完結させています。

.faq-item-question::before,
.faq-item-answer::before {
  content: "";
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  place-items: center;
  font-family: "Montserrat", sans-serif;
}

解説: 円形アイコンを作る際、従来の width と height を二重に指定する方法ではなく、width: 100%（親のGridで定義した45pxをそのまま継承）に対して aspect-ratio: 1 / 1; を指定することで、縦横比を完全に等価に保ったまま綺麗な正円（border-radius: 50%）を表現しています。さらに、正円の中にある「Q」や「A」のテキストを寸分のズレもなく中心に配置するため、擬似要素自体を display: grid 化し、place-items: center; を適用しています。要素を極限まで増やさず、CSSの最新プロパティを組み合わせることで、デザインカンプ（Figma）の美しい正円レイアウトを最小限かつ最軽量のコードで忠実に再現しています。

アイテム間隔：:not(:first-child)による効率的な余白（Margin/Padding）管理

ポイント: 1番目のアイテム以外の要素に対してのみスタイルを当てる :not(:first-child) を使い、不要な余白の打ち消し（リセット記述）を発生させない余白設計を行っています。

.faq-item {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-nord4);
}

.faq-item:not(:first-child) {
  padding-top: 40px;
}

解説: すべての .faq-item に共通で下側の余白（padding-bottom: 40px）と区切り線を持たせつつ、2番目以降のアイテムに対してのみ :not(:first-child) を使って上側の余白（padding-top: 40px）を動的に付与しています。このアプローチにより、1番上のアイテムの上に余計なスペースが空いてしまう現象を回避できます。「一度すべての要素にマージンをつけてから、最初（または最後）の要素だけを 0 で上書きして消す」という冗長なコードを書く必要がないスタイリング手法です。

Gallery
目次