誇張しない目次型セクション

「堅牢で、使いやすい。それだけです」のような平文の見出しと、下線リンク＋一行説明の縦並びだけで製品を紹介するセクション。装飾を足さず、言葉で信頼を作ります。

ENGLISH

Plain Table-of-Contents Section

CSSのみ

約30行画面のかたち / 実用サンプル: LP・マーケページの一覧 →

プレビュー

ホバー

操作カーソルを乗せると動きます（スマホはタップ）。

デザインの要点

見出しは主張を平文で言い切る。「究極の」「革新的な」は信頼を削る。足すなら形容詞ではなく事実
リンクは下線付きの黒。ボタン化しない。目次は「読む順」を示すものなので、どれも同格に見せる
各リンクに一行の説明。「誰が・いつまでに。それだけ」のように、機能の名前でなく使い方を書く
末尾に生きた数字（いま 3,412 チームが使っています）を1つ。飾りの数字ではなく、更新される事実だけ

プロのサイトでの実例

Basecamp別サイト ↗「rock-solid and easy to use」と平文で言い切り、下線リンク＋一行説明の目次で製品を紹介する

実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。

コード（コピーして使えます）

<section class="pts">
  <h2 class="pts-h">堅牢で、使いやすい。それだけです。</h2>
  <p class="pts-p">Minato は 2014 年から、小さなチームのプロジェクト管理を支えてきました。派手な機能はありません。毎日使うものが、毎日ちゃんと動きます。</p>
  <ul class="pts-toc">
    <li><a href="#">タスクと ToDo</a><span>誰が・いつまでに。それだけを書く一覧。</span></li>
    <li><a href="#">メッセージボード</a><span>チャットで流れてしまう決定を、掲示板に残す。</span></li>
    <li><a href="#">スケジュール</a><span>締切と予定だけのカレンダー。同期はワンクリック。</span></li>
    <li><a href="#">ドキュメントとファイル</a><span>プロジェクトごとにまとまる。探すのに検索は要らない。</span></li>
    <li><a href="#">クライアントとの共有</a><span>見せたいものだけを、見せたい相手に。</span></li>
  </ul>
  <p class="pts-live">いま <b>3,412 チーム</b> が Minato で仕事をしています。</p>
</section>