← クエスト一覧

クエスト46：ツールチップ

スライド 1 / 2
コーデ
💻 コード例
実行結果
← クエスト一覧
🌐 HTML & CSS / Quest 46 / 50

クエスト46：ツールチップ

基礎 +10 XP
🏠
今回の課題
ボタンにホバーしたとき「クリックしてね！」というツールチップを表示しよう！
📖 解説を見る
💬 CSS だけでツールチップを作ろう！

::after 疑似要素と :hover を使って、ホバー時にツールチップを表示しよう！
ヒントを見る
.tooltip::after で吹き出しを作り、.tooltip:hover::after で表示しよう！
📄 見本
「答えを見る」を押すと、お手本のプレビューとコードが出ます。
💻 コードエディタ
正解！見本と同じになりました。
次へ →
🏠 ホームへ

れんしゅうもんだい

☑ 0 / 3 正解 レッスンに戻る

全問正解でクエストクリア！

未挑戦

問題 1: ツールチップの背景色を変えよう！（自由回答）

🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
未挑戦

問題 2: ツールチップをボタンの下に表示させよう！（自由回答）

🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
未挑戦

問題 3: ツールチップのテキストを変えよう！（自由回答）

🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
コピーしました！