naopoyo.com
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About

目次

© naopoyo

🛌

番号が固定幅で右寄せされ、横に項目名が並ぶリストをGridで作る

公開日
22日前
2025-10-06
更新日
14日前
2025-10-15
更新履歴
GitHubで見る
  • Tailwind
  • CSS

概要

  • 番号は一番桁数の多い数字の幅で固定されている
  • 番号は右寄せされている
  • 番号の横に表する項目部分は可変幅

という参考画像のようなリストをCSS Grid Layoutで作った。テーブルでも順序付きリストでもないんだよなという時にこれで。参考コードではTailwind CSSを使っている。

今回の参考画像のようなものであればテーブルで作るのが一番素直だと思う。

参考画像

参考画像

参考コード

numbered-list.tsx
const items = [
  'apple',
  'orange',
  'banana',
  'grape',
  'lemon',
  'melon',
  'strawberry',
  'peach',
  'pear',
  'cherry',
  'watermelon',
  'pineapple',
];

export default function NumberedList() {
  return (
    <div className="grid gap-0 border w-1/2 m-4">
      {items.map((item, i) => (
        <div
          key={i}
          className="col-span-500 grid grid-cols-subgrid gap-2 border-b py-1 px-2 last:border-b-0"
        >
          <div className="tabular-nums text-right">{i + 1}</div>
          <div>{item}</div>
        </div>
      ))}
    </div>
  );
}

目次

最近更新された記事

🛷
開発日記-2025-10-29 / tocbot のオプション
39分前 - 2025年10月29日
  • 開発日記
  • tocbot
🚩
Next.js 16にアップグレードする
1日前 - 2025年10月27日
  • Next.js
✒️
エンジニア個人ブログまとめ
2日前 - 2025年10月27日
  • デザイン
  • Next.js
  • Markdown