ウェブサイトの「ちょっとした補足」を極めよう!

マウスを合わせると説明が出たり、クリックすると詳しい情報が見れたり…。
そんな便利な機能を、一緒に楽しく学んでいきましょう!

さっそく学習をはじめる!

このサイトで学べること

このサイトでは、ウェブページでユーザーに追加情報を見せるための様々なテクニックを、基本から応用まで丁寧に解説します。中学生のみなさんにも分かるように、図やアニメーション、そして実際に触って試せるサンプルプログラムをたくさん用意しています。

ツールチップアイコン

ツールチップ

マウスを乗せたときに短い説明文を表示するテクニックです。

モーダルアイコン

モーダルウィンドウ

クリックすると画面上にパッと現れて、より詳しい情報を見せたり、入力を促したりするウィンドウです。

ドラッグアイコン

インタラクティブ機能

表示された情報をドラッグで動かしたり、さらに別の情報を開いたりする、動きのある機能も学びます。

英語学習アイコン

英語豆知識

関連する英単語やフレーズも紹介!クリックで発音も聞けます。

サイトマップ(学習の進め方)

まずは「はじめに」から順番に読み進めていくのがおすすめです。各章の最後には、学んだことの確認や関連する英単語のコーナーがあります。

  1. 第1章: はじめに - 補足情報ってなんだろう?
  2. 第2章: ツールチップ - マウスを乗せると現れる小さなヒント
  3. 第3章: モーダルウィンドウ - クリックで開く情報ボックス
  4. 第4章: 応用編 - もっと便利に、もっと見やすく
  5. 第5章: 実践トレーニング
  6. 第6章: 用語集と確認クイズ