← クエスト一覧
クエスト39：テーブルのスタイリング
スライド
1
/
2
とばして問題へ
💻 コード例
実行結果
← 戻る
次へ →
クエストを始める
← クエスト一覧
🌐 HTML & CSS
/
Quest 39
/ 50
クエスト39：テーブルのスタイリング
発展
+10 XP
📖 説明を見る
🏠
📖 課題
💻 コード
結果
今回の課題
ストライプ（縞模様）とホバーハイライトのテーブルを作ろう！
📖 解説を見る
🎨 テーブルをおしゃれにしよう！
ストライプ、ホバー効果などを使ってテーブルをスタイリングしよう！
ヒントを見る
tr:nth-child(even) と tr:hover を使おう！
🤖 AIに聞く
📄 見本
答えを見る
「答えを見る」を押すと、お手本のプレビューとコードが出ます。
💻 コードエディタ
index.html
style.css
<table> <thead><tr><th>番号</th><th>名前</th><th>スコア</th></tr></thead> <tbody> <tr><td>1</td><td>たろう</td><td>90</td></tr> <tr><td>2</td><td>はな</td><td>85</td></tr> <tr><td>3</td><td>けんた</td><td>95</td></tr> <tr><td>4</td><td>ゆき</td><td>78</td></tr> </tbody> </table>
table { border-collapse: collapse; width: 100%; font-family: sans-serif; } th { background: #334155; color: white; padding: 12px; text-align: left; } td { padding: 10px; border-bottom: 1px solid #e2e8f0; } /* ストライプとホバーをここに書こう */
コードを実行
さいしょから
あなたの出力
正解！ +10 XP
正解！見本と同じになりました。
練習問題へ進む →
クリアをXでシェア
ヒント
実行する
次へ →
🏠 ホームへ
れんしゅうもんだい
☑ 0 / 3 正解
レッスンに戻る
全問正解でクエストクリア！
未挑戦
問題 1: ホバー色を好きな色に変えよう！（自由回答）
index.html
style.css
実行 / プレビュー更新
🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
未挑戦
問題 2: スコア列を右揃えにしよう！（自由回答）
index.html
style.css
実行 / プレビュー更新
🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
未挑戦
問題 3: 行をもう2行追加しよう！（自由回答）
index.html
style.css
実行 / プレビュー更新
🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
次のクエスト →
コピーしました！
×
先にヒントを見ますか？
ヒントを読むと、自分の力で解けるかもしれません。
ヒントを見る
それでも答えを見る
