表のレスポンシブデザインテスト
表の横スクロール機能とレスポンシブデザインのテスト記事です。
この記事では、様々なサイズの表を使って横スクロール機能をテストします。
シンプルな表
| 名前 | 年齢 | 職業 |
|---|---|---|
| 田中太郎 | 25 | エンジニア |
| 佐藤花子 | 30 | デザイナー |
| 鈴木一郎 | 28 | プロダクトマネージャー |
幅の広い表（横スクロールテスト用）
| ID | 名前 | メールアドレス | 電話番号 | 住所 | 職業 | 会社名 | 部署 | 役職 | 入社日 | 給与 | 備考 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 001 | 田中太郎 | tanaka@example.com | 090-1234-5678 | 東京都渋谷区1-2-3 | エンジニア | ABC株式会社 | 開発部 | 主任 | 2020-04-01 | ¥500,000 | React専門 |
| 002 | 佐藤花子 | sato@example.com | 090-2345-6789 | 大阪府大阪市北区4-5-6 | デザイナー | XYZ株式会社 | デザイン部 | リーダー | 2019-06-15 | ¥450,000 | UI/UX専門 |
| 003 | 鈴木一郎 | suzuki@example.com | 090-3456-7890 | 愛知県名古屋市中区7-8-9 | プロダクトマネージャー | DEF株式会社 | 企画部 | マネージャー | 2018-10-01 | ¥600,000 | SaaS経験豊富 |
| 004 | 高橋美咲 | takahashi@example.com | 090-4567-8901 | 福岡県福岡市博多区10-11-12 | マーケティング | GHI株式会社 | 営業部 | 課長 | 2021-02-01 | ¥550,000 | デジタルマーケティング |
| 005 | 伊藤健太 | ito@example.com | 090-5678-9012 | 北海道札幌市中央区13-14-15 | データサイエンティスト | JKL株式会社 | データ部 | スペシャリスト | 2022-08-01 | ¥650,000 | 機械学習専門 |
数値データの表
| 年度 | 売上高（億円） | 営業利益（億円） | 純利益（億円） | 従業員数（人） | 売上高利益率（%） |
|---|---|---|---|---|---|
| 2020 | 1,200 | 150 | 100 | 5,000 | 12.5 |
| 2021 | 1,350 | 180 | 125 | 5,200 | 13.3 |
| 2022 | 1,500 | 210 | 150 | 5,500 | 14.0 |
| 2023 | 1,680 | 250 | 180 | 5,800 | 14.9 |
| 2024 | 1,850 | 290 | 210 | 6,100 | 15.7 |
技術仕様の表
| 項目 | 仕様 | 対応ブラウザ | 説明 |
|---|---|---|---|
| フレームワーク | Next.js 15.5.3 | Chrome, Firefox, Safari, Edge | React ベースのフルスタックフレームワーク |
| スタイリング | Tailwind CSS 4.0 | 全ての現代的ブラウザ | ユーティリティファーストのCSSフレームワーク |
| アイコン | React Icons 5.5.0 | 全ての現代的ブラウザ | SVGアイコンライブラリ |
| 言語 | TypeScript 5.0 | TypeScript対応エディタ | 型安全な JavaScript |
| パッケージマネージャー | npm | Node.js 環境 | JavaScript パッケージマネージャー |
チェックボックス付きタスクリスト
- 基本的な表のマークアップを実装
- レスポンシブ対応の横スクロールを追加
- ヘッダー行の背景色をカスタマイズ
- 枠線の色をコードブロックと統一
- カード形式のレスポンシブ表示を実装
- 表のソート機能を追加
- 表のフィルタリング機能を追加
使用方法
画面幅を狭くすると、幅の広い表は横スクロール可能になります：
- デスクトップ: 通常の表表示
- タブレット: 必要に応じて横スクロール
- スマートフォン: 横スクロールで全データを確認可能
表の下部に薄いスクロールバーが表示され、スワイプまたはドラッグで横スクロールできます。