MENU
  1. ホーム
  2. Gallery
  3. お客様の声

お客様の声

Gallery
目次

カンプ画像（Figma）

実装画面（ブラウザ）

デモページを見る

実装のポイント解説

プロフィールの高精度配置：CSS Gridのライン指定（grid-row / grid-column）によるレイアウト

ポイント: プロフィールエリア（.voice-client）にCSS Gridを採用。アバター画像、会社名、氏名の3つの要素の配置をグリッドのライン（番号）で厳格に制御し、どのような文字量でも崩れない強固な構造を作っています。

.voice-client {
  display: grid;
  grid-template-columns: 55px 1fr;
  gap: 0 12px;
}

.voice-client-img {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.voice-client-company {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: end;
}

.voice-client-name {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

解説: 左側にアイコン画像、右側に上下2段でテキスト（会社名と名前）が並ぶようなレイアウトでは、従来の flexbox を使うと「右側のテキスト2行を囲むための無駄なラッパーディブ（<div>）」が必要になりがちでした。
今回はCSS Gridを活用し、親要素（.voice-client）に「横幅55pxの画像用カラム」と「残りのスペース（1fr）のテキスト用カラム」の2列を定義しています。画像（.voice-client-img）に対して grid-row: 1 / 3;（1行目の線から3行目の線まで）を指定することで、画像単体で縦2行分の高さをブチ抜きで確保させています。さらに、会社名に align-self: end; を適用して下揃えにすることで、名前のテキストと綺麗に寄り添うようにスタイリングしています。

枠線をまたぐ装飾：疑似要素とcalc()関数によるダブルクォーテーション配置

ポイント: レビューカードを印象付ける「引用アイコン」を ::before 疑似要素で実装。カードの枠線をまたいで綺麗に半分だけ外側に飛び出す配置を、calc() 関数を用いて論理的に計算・配置しています。

.voice {
  position: relative;
}

.voice::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background-color: var(--color-nord6);
  border-radius: 50%;
  position: absolute;
  left: 24px;
  top: calc(-50px / 2); /* ✨ アイコンの高さの「半分」だけ上に突き出させる */
  background-image: url("../img/icon-quotation-marks.svg");
  /* 省略（背景画像の配置・サイズ制御など） */
}

解説: デザインカンプ（Figma）でよく見かける「カードの境界線上にぴったり乗るように配置されたアイコン」を再現しています。カード（.voice）を基準（position: relative）とし、アイコンを絶対配置（position: absolute）で制御しています。
上端の配置に top: calc(-50px / 2);（マイナス25px）を指定することで、アイコン自身の高さ（50px）のちょうど半分だけを、カードの外側に美しく飛び出させています。数値を「-25px」と直接記述（マジックナンバー）するのではなく、あえて calc(-50px / 2) と計算式で残すことで、「50pxの円の半分を突き出させたい」という設計意図が明確に伝わります。背景画像（SVG）の呼び出しとサイズ制御（background-size: 17px）も含め、余計なHTMLタグを増やさずCSSだけで装飾を完結させるプロの手法です。

画像の円形維持と歪み防止：border-radiusとobject-fitによるユーザアイコンの保護

ポイント: ユーザーのアバター画像がどのような縦横比でアップロードされても、完全に綺麗な正円を保ち、画像内の人物が上下左右に引き伸ばされて歪まないように防波堤を立てています。

.voice-client-img img {
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

解説: お客様の声（レビュー）で使用される顔写真は、運用フェーズにおいて、クライアントから正方形ではない画像（長方形やスマホの撮影スナップなど）が支給されるケースが多々あります。
このコードでは、Gridによって画像エリアのサイズをあらかじめ「横幅55px、高さはテキスト2行分（height: 100%）」と固定した上で、object-fit: cover; を適用しています。これにより、どのような比率の画像が挿入されても、縦横比を崩さずに領域内を中央ベースでトリミングし、border-radius: 50%; で滑らかな正円に切り抜きます。

Gallery
目次