MENU
  1. ホーム
  2. Figma
  3. ニュース

ニュース

Figma
目次

カンプ画像（Figma）

実装画面（ブラウザ）

デモページを見る

実装のポイント解説

複数行の縦列揃え：モダンCSS「subgrid」を活用した完璧な格子状レイアウト

ポイント: 子要素（.news-item）側で grid-template-columns: subgrid; を指定し、親要素（.news-list）が持つGrid（格子）の横幅定義をダイレクトに引き継いでいます。これにより、ニュースの日付幅とタイトル開始位置が、すべての行で寸分のズレもなく綺麗に縦整整列します。

.news-list {
  display: grid;
  grid-template-columns: auto 1fr;
}

.news-item {
  display: grid;
  grid-template-columns: subgrid;
  gap: 40px;
  grid-column: 1 / -1;
}

解説: お知らせ一覧（ニュースリスト）のようなレイアウトでは、「日付の文字幅」が文字数によって変わるため、従来の flexbox などでは2行目以降のタイトルの開始位置をピタッと揃えるのが非常に困難でした（これまでは日付側に無理やり固定幅（width）を持たせるなどの妥協が必要でした）。この課題を根本的に解決するのがモダンCSSの subgrid です。親要素の .news-list で「1列目は日付の自動幅（auto）、2列目は残りのスペースすべて（1fr）」と定義し、各ニュースアイテムで subgrid を宣言しています。さらに、grid-column: 1 / -1; を指定することで、各アイテムが親の端から端（1列目から最終列まで）を丸ごと使うように指示しています。これにより、各行の「日付」と「タイトル」が親の共通のグリッド線に固定されるため、日付の文字数が変わっても、すべての行のタイトルの開始位置が自動的に連動して揃います。

一覧の枠線制御：border-topと:last-childによるスマートな区切り線実装

ポイント: アイテム同士の間を区切る水平線を border-top で表現し、一番最後の要素にだけ border-bottom を追加することで、リスト全体を囲むような無駄のない上下線を表現しています。

.news-item {
  padding: 24px 0;
  border-top: 1px solid var(--color-nord4);
}

.news-item:last-child {
  border-bottom: 1px solid var(--color-nord4);
}

解説: リスト表示において、線の引き方はデザイン全体の引き締まり具合を左右します。ここでは、すべての .news-item の上側に線（border-top）を引くことでアイテム間の境界を作りつつ、最下部の要素に対してのみ :last-child 擬似クラスを用いて下線（border-bottom）を動的に付与しています。このアプローチにより、外側に余計な「親要素の枠線」などを別途用意する必要がなく、要素自体のループ処理（WordPressなどの動的出力）に合わせた最も自然で管理しやすいCSS設計を実現しています。上下のパディング（padding: 24px 0）も均等に保たれるため、カンプ（Figma）通りの規則正しいリズムを持ったリストデザインが維持されます。

情報設計（アクセシビリティ）：timeタグの適切なマークアップとデザイン表現

ポイント: 日付部分にマシンリーダブル（機械が認識しやすい）な <time> タグを採用し、デザイン表現としては opacity を用いて、情報の重要度に合わせた視覚的なコントラスト（メリハリ）をつけています。

<time datetime="2024-08-01" class="news-date">2024年8月1日</time>

.news-date {
  font-weight: bold;
  opacity: 0.45;
}

解説: WebアクセシビリティやSEO（検索エンジン最適化）を意識したセマンティックなHTML構造にこだわっています。日付表示には、単なる <span> ではなく <time> タグを使用し、datetime="2024-08-01" のようにコンピューターが正確に日付として処理できる属性値を明記しています。これにより、スクリーンリーダー（音声読み上げブラウザ）や検索ロボットに対して、これが「いつ公開された情報なのか」を正しく伝えることができます。デザイン面では、文字サイズ自体を小さくするのではなく、opacity: 0.45;（不透明度45%）を適用することで、メインのテキスト（タイトル）を視覚的に引き立てるコントラストを生み出しています。

Figma
目次