表

カンプ画像（Figma）

実装画面（ブラウザ）

実装のポイント解説

table-wrap：スマートフォン表示を崩さない「ラッパー要素」とスクロール制御

ポイント: 表が画面幅からはみ出た際に、サイト全体が横揺れするのを防ぎ、表の中だけで安全に横スクロールできるようにしています。

.table-wrap {
  overflow: scroll;       /* はみ出た要素をスクロール可能にする */
  scrollbar-width: none;  /* Firefox用のスクロールバー非表示設定 */
}

/* Google Chrome, Safari用のスクロールバー非表示設定 */
.table-wrap::-webkit-scrollbar {
  display: none;
}

.table {
  min-width: 520px;       /* テーブルの最小幅を保証する */
}

解説: スマートフォンなどの画面幅が狭いデバイスでは、表（table）の中身が潰れて文字が縦に1文字ずつ並んでしまうなど、著しく視認性が低下することがあります。ここでは、.table に min-width: 520px を指定して「これ以上は絶対に潰れない幅」を確保しつつ、親要素の .table-wrap で包んで overflow: scroll をかけることで、画面幅が狭くなっても表だけをスワイプして閲覧できる「レスポンシブ・テーブル」を実現しています。また、デザイン性を損なわないよう、ブラウザ固有のスクロールバーを非表示にしています。

table-header / table-data：パーセント（%）指定による列幅の固定

ポイント: 表の各セルの幅をピクセル（px）で固定せず、横幅に対する比率（%）で指定することで、画面サイズが変わっても列の美しさを維持しています。

.table-header {
  background-color: var(--color-nord6);
  width: 30%; /* 見出し列を全体の3割に固定 */
}

.table-data {
  width: 70%; /* データ列を全体の7割に固定 */
}

解説: <table> タグは、デフォルトの挙動として「セルの中に入っている文字の長さ」に合わせてブラウザが自動で列の幅を計算・調整してしまいます。そのため、行ごとに文字量の差が大きいと、列の縦ラインがガタガタに見えてしまう原因になります。見出し（th）に 30%、データ（td）に 70% と明示的に合計100%になるよう比率を指定することで、どの行の文字量が多くても、すべての列が綺麗に一本の縦ラインで揃います。

table-data span：インライン要素のブロック化による改行コントロール

ポイント: 住所などの複数行にわたるテキストを、HTMLのレイアウト構造を汚さずにCSS側で綺麗に上下並び（改行）にしています。

.table-data span {
  display: block; /* インライン要素をブロック要素に変換 */
}

解説: 所在地（住所）の部分では、郵便番号と住所がそれぞれ <span> タグで囲まれています。<span> は本来インライン要素であるため、そのままでは横一列に並んでしまいます。ここで display: block を適用することにより、それぞれの <span> が独立したひとつの「箱」に変化し、自動的に改行されて縦に並ぶようになります。HTML側で <br>（強制改行）を多用するのに比べ、テキストのセマンティクス（意味構造）を保ちつつ、CSS側で柔軟にレイアウトをコントロールできる設計です。