第6章用語集：学んだ言葉をまとめてチェック！

第6章-1節: 用語集 - 学んだ言葉をまとめてチェック！

ついに最終章「用語集と確認クイズ」へようこそ！このサイトを通じて、ツールチップやモーダルウィンドウをはじめ、ウェブサイトで補足情報を表示するための様々なテクニックや考え方、そしてたくさんの新しい言葉に触れてきたね。

このページは、いわば君だけの「補足情報マスター辞書」だ！これまでに登場した重要な日本語の専門用語や、英語のキーワードをまとめて一覧にしたよ。分からない言葉が出てきたときや、知識を再確認したいときに、いつでもここに戻ってきて活用してね。

用語をしっかり理解することは、これから君がもっと複雑なウェブ技術を学んだり、実際にウェブサイトを作ったりするときに、きっと大きな力になるはずだ！

🇯🇵 日本語の重要用語

アクセシビリティ: ウェブサイトや情報が、年齢や身体的な条件、利用環境に関わらず、様々な人にとって利用しやすい度合いのこと。キーボード操作への対応やスクリーンリーダーへの配慮などが含まれる。
イベント: ウェブページ上でユーザーが行う操作（クリック、マウスオーバーなど）や、ブラウザが検知する出来事（ページの読み込み完了など）のこと。JavaScriptでは、これらのイベントをきっかけに処理を実行する。
イベントリスナー: 特定のイベントが発生するのを「待ち受け」、イベントが発生したら指定された処理（関数）を実行する仕組み。JavaScriptでインタラクティブな機能を作る基本。
イベント委譲 (Event Delegation): 多数の子要素のイベントを、親要素に設定した単一のイベントリスナーでまとめて処理するテクニック。パフォーマンス向上に繋がる。
入れ子モーダル (ネストされたモーダル): モーダルウィンドウの中から、さらに別のモーダルウィンドウを開く仕組み。段階的な情報提示や複雑な設定フローに使われる。
オーバーレイ: モーダルウィンドウが表示される際に、背景のページ全体を覆う半透明の層。モーダルを目立たせ、背景の操作を一時的に無効にする役割がある。
オフセット: 基準となる位置からの「ずれ」や「差分」のこと。ドラッグ操作では、マウスカーソルの位置とドラッグ対象要素の角との相対的な位置関係を指すことが多い。
座標系: 画面上の位置を表すための基準となるシステム。ウェブブラウザでは通常、左上隅を原点(0,0)とし、右方向がX軸の正、下方向がY軸の正となる。
疑似クラス (Pseudo-class): CSSで、特定の状態にある要素にスタイルを適用するためのキーワード。例：:hover（マウスが乗った時）、:focus（フォーカスが当たった時）。
疑似要素 (Pseudo-element): CSSで、要素の特定の部分にスタイルを適用したり、実際にはHTMLに存在しない要素を装飾目的で追加したりするためのキーワード。例：::before（要素の直前に内容を挿入）、::after（要素の直後に内容を挿入）。ツールチップの矢印作成などに使われる。
DOM (Document Object Model): HTMLやXML文書をプログラムから操作するためのインターフェース（仕組み）。JavaScriptを使ってDOMを操作することで、ウェブページの内容や構造、スタイルを動的に変更できる。
DOM操作: JavaScriptを使って、HTML要素を追加したり、削除したり、属性を変えたり、テキストを書き換えたりすること。ウェブページをインタラクティブにするための基本的な技術。
ツールチップ: マウスカーソルを特定の要素の上に乗せたとき（ホバー）に、フワッと表示される短い補足説明やヒントのこと。
ドラッグ＆ドロップ: マウスで要素を掴んで（ドラッグ）、別の場所に移動させて離す（ドロップ）操作。mousedown, mousemove, mouseupの各マウスイベントを組み合わせて実現する。
トランジション (CSS Transition): CSSプロパティの値が変化する際に、時間をかけて滑らかに変化させるアニメーション効果。ツールチップやモーダルのフェードイン/アウトなどに使われる。
パフォーマンス: ウェブサイトの表示速度や動作の軽快さ、応答性などの「性能」のこと。ユーザー体験に大きく影響する。
プログレッシブ・ディスクロージャー (Progressive Disclosure): 情報を段階的に開示していくデザイン手法。最初は最小限の情報を見せ、ユーザーが必要に応じて詳細情報にアクセスできるようにすることで、複雑さを軽減する。ツールチップからモーダルへの連携などが一例。
フォーカス: キーボード操作の対象となっている要素の状態。入力欄やボタンなどがフォーカスを受け取ると、入力や実行が可能になる。
フォーカストラップ: モーダルウィンドウが表示されている間、キーボードのTabキーによるフォーカス移動をモーダル内の要素に限定し、背景のページにフォーカスが漏れ出ないようにするアクセシビリティ技術。
フレームワーク: ウェブアプリケーション開発のための骨組みや規約を提供するもの。ライブラリよりも広範囲で、開発の進め方に影響を与えることが多い。
ホバー (マウスオーバー): マウスカーソルを要素の上に重ねること。ツールチップの表示トリガーとしてよく使われる。
モーダルウィンドウ (ダイアログ): ウェブページの上に重なって表示される別の小さなウィンドウ。表示中は背景のページ操作が一時的にできなくなる（モーダル性）。
ユーザーエクスペリエンス (UX): ユーザーが製品やサービスを通じて得る体験全体のこと。使いやすさ、分かりやすさ、満足度などが含まれる。
ライブラリ: 特定の機能を実現するための再利用可能なコードの集まり。必要なものを選んで自分のプログラムに組み込んで使う。
ライトボックス効果: 画像や動画をクリックした際に、モーダルウィンドウを使って画面中央に拡大表示し、背景を暗くする視覚効果。
遅延読み込み (Lazy Loading): ウェブページの表示速度を向上させるため、画像や動画などの重いコンテンツを、実際に画面に表示されるタイミング（またはその直前）まで読み込みを遅らせるテクニック。
z-index: CSSのプロパティで、要素の重ね合わせの順番（スタッキングオーダー）を指定する。値が大きいほど手前に表示される。モーダルや入れ子モーダルの表示順制御に不可欠。

🇬🇧 英語の重要用語・フレーズ

Accessibility (a11y): アクセシビリティ、利用のしやすさ。ウェブサイトが様々な人々にとって利用しやすい度合い。

Original: Web accessibility means that websites are designed so that all people can use them.

意訳：ウェブアクセシビリティとは、全ての人がウェブサイトを利用できるように設計されていることを意味します。
Absolute Positioning: 絶対配置。CSSで、最も近い位置指定された祖先要素を基準に要素を配置する方法。

Original: Absolute positioning takes the element out of the normal document flow.

意訳：絶対配置は、要素を通常のドキュメントフローから外します。
ARIA (Accessible Rich Internet Applications): アクセシブルなリッチインターネットアプリケーション。動的なウェブコンテンツを支援技術にとってよりアクセシブルにするための仕様。

Original: ARIA attributes help make dynamic web content more accessible.

意訳：ARIA属性は、動的なウェブコンテンツをよりアクセシブルにするのに役立ちます。
Asynchronous (Ajax): 非同期の。処理の完了を待たずに次の処理に進むこと。AjaxはAsynchronous JavaScript and XMLの略。

Original: Ajax allows web pages to update content asynchronously.

意訳：Ajaxを使うと、ウェブページを非同期に更新できます。
Assistive Technology (AT): 支援技術。障害を持つ人々を助けるための技術やツール（例: スクリーンリーダー）。

Original: Test your sites with various assistive technologies.

意訳：様々な支援技術であなたのサイトをテストすべきです。
Centering: 中央揃え、センタリング。

Original: Centering elements vertically and horizontally can be tricky in CSS.

意訳：要素を垂直方向および水平方向に中央揃えするのは、CSSでは扱いにくいことがあります。
Clarity: 明瞭さ、明確さ。

Original: Good design improves the clarity of the instructions.

意訳：良いデザインは、指示の分かりやすさを向上させます。
CDN (Content Delivery Network): コンテンツデリバリーネットワーク。ウェブコンテンツを効率的に配信するための分散サーバー網。

Original: You can include popular libraries using a CDN link.

意訳：人気のあるライブラリをCDNリンクを使って含めることができます。
Component: コンポーネント。UIを構成する独立した再利用可能な部品。

Original: Many UI libraries provide pre-built components.

意訳：多くのUIライブラリは事前に構築されたコンポーネントを提供しています。
Content Type: コンテンツタイプ、内容の種類（テキスト、画像、動画など）。

Original: The modal can display various content types.

意訳：モーダルは様々なコンテンツタイプを表示できます。
Contextual help: 文脈に応じたヘルプ、状況に応じたヘルプ。

Original: Tooltips provide contextual help without cluttering the interface.

意訳：ツールチップは、インターフェースを乱雑にすることなく、状況に応じたヘルプを提供します。
Coordinate System: 座標系。位置を表すための基準となるシステム。

Original: Web browsers use a coordinate system where the top-left corner is (0,0).

意訳：ウェブブラウザは、左上隅が(0,0)となる座標系を使用します。
Cursor Property: カーソルプロパティ。マウスカーソルの形状を指定するCSSのプロパティ。

Original: Set the 'cursor' property to 'move' for draggable elements.

意訳：ドラッグ可能な要素には、「cursor」プロパティを「move」に設定します。
CSS Animations (@keyframes): CSSアニメーション。@keyframesルールを使ってより複雑なアニメーションを定義するCSSの機能。

Original: With CSS Animations and @keyframes, you can define multiple stages of an animation.

意訳：CSSアニメーションと@keyframesを使用すると、アニメーションの複数の段階を定義できます。
CSS Transitions: CSSトランジション。プロパティ値の変化を滑らかにアニメーションさせるCSSの機能。

Original: CSS transitions allow you to create smooth animations.

意訳：CSSトランジションを使用すると、スムーズなアニメーションを作成できます。
Debounce / Throttle: デバウンス / スロットル。頻繁に発生するイベントの実行回数を制御するテクニック。

Original: Debounce or throttle scroll event handlers to improve performance.

意訳：パフォーマンスを向上させるために、スクロールイベントハンドラをデバウンスまたはスロットルします。
Dependency: 依存関係。あるプログラムが他のプログラムやライブラリを必要とすること。

Original: Manage your project's dependencies carefully.

意訳：プロジェクトの依存関係を注意深く管理してください。
Dialog: ダイアログ。ユーザーとシステムが対話するためのウィンドウ。

Original: A confirmation dialog popped up asking to save the changes.

意訳：変更を保存するか尋ねる確認ダイアログがポップアップしました。
DOM Manipulation: DOM操作。Document Object Model をプログラムで変更すること。

Original: JavaScript is often used for DOM manipulation.

意訳：JavaScriptはDOM操作によく使われます。
Draggable: ドラッグ可能な、引きずることができる。

Original: We are implementing a draggable interface element.

意訳：ドラッグ可能なインターフェース要素を実装しています。
Drag Handle: ドラッグハンドル。要素をドラッグするために掴む特定の部分。

Original: The modal's header often serves as its drag handle.

意訳：モーダルのヘッダーは、しばしばそのドラッグハンドルとして機能します。
Dynamic Content: 動的コンテンツ。状況に応じて内容が変化するコンテンツ。

Original: The news feed displays dynamic content.

意訳：ニュースフィードには動的コンテンツが表示されます。
Embedded Content: 埋め込みコンテンツ。iframeなどで他のソースから取り込まれたコンテンツ。

Original: You can use an iframe to show embedded content.

意訳：iframeを使用して埋め込みコンテンツを表示できます。
Event Flow: イベントフロー。イベントが発生してから処理されるまでの流れ。

Original: Debugging requires tracing the event flow.

意訳：デバッグにはイベントフローを追跡する必要があります。
Event Handling Priority: イベント処理の優先順位。

Original: Understanding event handling priority is important.

意訳：イベント処理の優先順位を理解することが重要です。
Event Listener: イベントリスナー。特定のイベントの発生を待ち受け、処理を実行する仕組み。

Original: We added an event listener to the button.

意訳：ボタンにイベントリスナーを追加しました。
Event Listener Scope: イベントリスナーのスコープ。イベントリスナーがどの要素や範囲で有効か。

Original: For dragging, listeners are often attached to the document.

意訳：ドラッグ操作では、リスナーはしばしばドキュメントにアタッチされます。
Fixed Positioning: 固定配置。スクロールしても位置が変わらないCSSの配置方法。

Original: A common use for fixed positioning is a sticky navigation bar.

意訳：固定配置の一般的な用途は、追従するナビゲーションバーを作成することです。
Focus / Blur: フォーカス / ブラー。要素がアクティブになること / フォーカスが外れること。

Original: When an input field receives focus, its border changes.

意訳：入力フィールドがフォーカスを受け取ると、枠線の色が変わります。
Focus Management: フォーカス管理。ウェブアクセシビリティにおいて、キーボードフォーカスを適切に制御すること。

Original: Good focus management is crucial for keyboard users.

意訳：優れたフォーカス管理はキーボードユーザーにとって非常に重要です。
Focus Trap: フォーカストラップ。キーボードフォーカスを特定の領域内に閉じ込める技術。

Original: Implementing a focus trap is essential for modal accessibility.

意訳：フォーカストラップを実装することは、モーダルのアクセシビリティにとって不可欠です。
Framework: フレームワーク。アプリケーション開発のための骨組みや規約。

Original: React, Angular, and Vue are front-end JavaScript frameworks.

意訳：React、Angular、VueはフロントエンドJavaScriptフレームワークです。
Guidance: 案内、指導、手引き。

Original: The website offers guidance on how to fill out the form.

意訳：そのウェブサイトは、フォームの記入方法に関する手引きを提供しています。
Hover: (マウスカーソルを)～の上に置く、漂う。

Original: When you hover over the image, it will zoom in.

意訳：画像の上にマウスカーソルを置くと、拡大表示されます。
Interactive Tooltip: インタラクティブなツールチップ。クリック可能な要素を含むなど、操作可能なツールチップ。

Original: An interactive tooltip can contain links or buttons.

意訳：インタラクティブなツールチップはリンクやボタンを含むことができます。
Keyboard Navigation: キーボード操作、キーボードナビゲーション。

Original: Ensure all elements are accessible via keyboard navigation.

意訳：全ての要素がキーボード操作でアクセス可能であることを確認してください。
Layout: レイアウト、配置、設計。

Original: CSS is used to control the layout of HTML elements.

意訳：CSSはHTML要素のレイアウトを制御するために使用されます。
Layout Thrashing: レイアウトスラッシング。強制的な再計算が何度も発生しパフォーマンスが低下する現象。

Original: Avoid layout thrashing by batching DOM reads and writes.

意訳：DOMの読み取りと書き込みをバッチ処理することで、レイアウトスラッシングを避けてください。
Lazy Loading: 遅延読み込み。

Original: Lazy loading images can speed up initial page load.

意訳：画像の遅延読み込みは初期ページの読み込みを大幅に短縮できます。
Library: ライブラリ。再利用可能なコードの集まり。

Original: jQuery is a popular JavaScript library.

意訳：jQueryは人気のあるJavaScriptライブラリです。
Lightbox: ライトボックス。画像や動画を拡大表示する際によく使われるモーダル効果の一種。

Original: Click on the thumbnail to view the full image in a lightbox.

意訳：サムネイルをクリックすると、フル画像をライトボックスで表示します。
Live Preview: ライブプレビュー。変更がリアルタイムで反映されて表示されること。

Original: This editor features a live preview.

意訳：このエディタはライブプレビュー機能を備えています。
Modal: モーダル。特定のモードに入り、他の操作を一時的に制限するUI要素。

Original: A modal dialog requires user interaction before they can return.

意訳：モーダルダイアログは、戻る前にユーザーの操作を必要とします。
Mouse Events: マウスイベント（例: mousedown, mousemove, mouseupなど）。

Original: JavaScript allows us to respond to various mouse events.

意訳：JavaScriptを使用すると、さまざまなマウスイベントに応答できます。
Mouse over (Mouseover): マウスオーバー。マウスカーソルが要素の上に乗ること。

Original: The text changes color on mouseover.

意訳：マウスオーバーするとテキストの色が変わります。
Nested: 入れ子になった、ネストされた。

Original: We are creating a nested modal structure.

意訳：入れ子になったモーダル構造を作成しています。
Offset: オフセット、ずれ、差引。

Original: Calculate the mouse offset from the element's corner.

意訳：要素の角からのマウスのオフセットを計算する必要があります。
Optimization: 最適化。

Original: Code optimization involves making the code run faster.

意訳：コードの最適化にはコードをより速く実行できるようにすることが含まれます。
Overlay: オーバーレイ。他の要素の上に重ねて表示される層や効果。

Original: The modal window uses a semi-transparent overlay.

意訳：モーダルウィンドウは半透明のオーバーレイを使用しています。
Performance: パフォーマンス、性能、実行速度。

Original: Improving website performance is crucial for user satisfaction.

意訳：ウェブサイトのパフォーマンスを向上させることはユーザー満足度にとって非常に重要です。
Popup: ポップアップ。自動的に、またはユーザー操作で出現する小さなウィンドウ。

Original: Many users dislike websites with too many aggressive popups.

意訳：多くのユーザーは攻撃的なポップアップが多すぎるウェブサイトを嫌います。
Positioning: 配置、位置決め。

Original: CSS offers various properties for element positioning.

意訳：CSSは要素の配置のための様々なプロパティを提供しています。
Progressive Disclosure: プログレッシブ・ディスクロージャー、段階的開示。情報を徐々に見せていくデザイン手法。

Original: Progressive disclosure helps manage complexity.

意訳：プログレッシブ・ディスクロージャーは複雑さを管理するのに役立ちます。
Pseudo-class: 疑似クラス（例: :hover, :focus など）。

Original: The :hover pseudo-class is used to select elements when you mouse over them.

意訳：:hover 疑似クラスは、要素の上にマウスカーソルを置いたときにその要素を選択するために使用されます。
Pseudo-element: 疑似要素（例: ::before, ::after など）。

Original: You can use the ::after pseudo-element to add an arrow.

意訳：::after 疑似要素を使って矢印を追加できます。
Real-time Feedback: リアルタイムフィードバック。ユーザーの操作に対して即座に反応を返すこと。

Original: Displaying coordinates provides real-time feedback.

意訳：座標を表示することはリアルタイムフィードバックを提供します。
Rendering: レンダリング、描画。ブラウザがコードを解釈して画面に表示すること。

Original: Complex CSS can slow down the rendering process.

意訳：複雑なCSSはレンダリングプロセスを遅くすることがあります。
Responsive Image: レスポンシブ画像。様々な画面サイズに合わせて適切に表示される画像。

Original: Using CSS to make images responsive is important.

意訳：画像をレスポンシブにすることは重要です。
Screen Reader: スクリーンリーダー（画面読み上げソフト）。

Original: Blind users often rely on screen readers.

意訳：目の不自由なユーザーはスクリーンリーダーに頼ることがよくあります。
Simulation: シミュレーション、模擬実験。

Original: This app provides a simulation of modal closing.

意訳：このアプリはモーダルを閉じるシミュレーションを提供します。
Stacking Context: スタッキングコンテキスト。要素がどのように重なるかを決定するHTML要素のグループ。

Original: Elements with z-index can create a new stacking context.

意訳：z-indexを持つ要素は新しいスタッキングコンテキストを作成できます。
State (of a modal): 状態（モーダルの場合は、表示されているか/非表示かなど）。

Original: We use a class to toggle the visible state.

意訳：表示状態を切り替えるためにクラスを使用します。
Structure: 構造、構成、骨組み。

Original: The HTML provides the basic structure of the web page.

意訳：HTMLはウェブページの基本的な構造を提供します。
Supplementary Information: 補足情報、追加情報。

Original: Please read the supplementary information carefully.

意訳：補足情報を注意深く読んでください。
Third-party (library/code): サードパーティ。第三者が開発したライブラリやコード。

Original: Using third-party libraries can speed up development.

意訳：サードパーティのライブラリを使用すると開発を高速化できます。
Tooltip: ツールチップ。マウスオーバーで表示される短い説明文。

Original: This icon has a helpful tooltip.

意訳：このアイコンには役立つツールチップが付いています。
Transition: 遷移、移り変わり、トランジション（CSSではアニメーション効果）。

Original: Adding a CSS transition makes the tooltip appear smoothly.

意訳：CSSトランジションを追加すると、ツールチップがスムーズに表示されるようになります。
Trigger: (動) 引き起こす、起動する / (名) 引き金、きっかけ。

Original: Clicking this button will trigger the modal.

意訳：このボタンをクリックするとモーダルが起動します。
User Expectation: ユーザーの期待、利用者が期待すること。

Original: Pressing Escape to close a modal meets user expectations.

意訳：Escapeキーを押してモーダルを閉じることはユーザーの期待に応えます。
User Experience (UX): ユーザー体験。ユーザーが製品やサービスを通じて得る体験のこと。

Original: Helpful tooltips can improve the user experience.

意訳：役立つツールチップはユーザー体験を向上させることができます。
User Interaction: ユーザーインタラクション、利用者との相互作用。

Original: Understanding user interaction patterns is key to good UI.

意訳：ユーザーインタラクションのパターンを理解することは良いUIの鍵です。
WYSIWYG (What You See Is What You Get): ウィジウィグ。見たままが得られる、編集画面と実際の表示が一致する仕組み。

Original: A WYSIWYG editor allows users to format content easily.

意訳：WYSIWYGエディタを使えばユーザーは簡単にコンテンツを整形できます。
z-index: z-index。CSSのプロパティで、要素の重ね合わせの順番を指定する。

Original: A higher z-index value means the element will be in front.

意訳：z-indexの値が大きいほど、その要素は前面に表示されます。

🎯 この用語集の活用法

学習中に分からない言葉が出てきたら、このページで調べてみよう。
時々見返して、忘れてしまった言葉がないかチェックするのもいいね。
次のページにある「用語確認クイズ」に挑戦する前に、この用語集でしっかり準備しよう！

言葉を自分のものにすれば、ウェブ技術の理解はもっともっと深まるよ！

🚀 最終確認へ！

これで、このサイトで学ぶべき主要な用語はほとんど網羅できたはずだ。たくさんの言葉を覚えるのは大変かもしれないけど、一つ一つが君の知識の引き出しを増やしてくれるよ。

さあ、最後の仕上げとして、次のページで「用語確認クイズ」に挑戦して、どれだけ言葉をマスターできたか試してみよう！