線対称・点対称と敷き詰め模様

Q: 線対称・点対称と敷き詰め模様は社会やプログラミングでどのように使われていますか？

画像処理の反転（フリップ）と CSS の transform: 線対称・点対称の考え方は、画像編集ソフトの「左右反転」「上下反転」「180度回転」やWebページのCSSアニメーションでそのまま使われている。ピクセル座標を軸や中心に対して折り返す計算は、鏡に映す操作の数式そのものである。

図形を鏡に映すと、もう半分はどう決まる？

この単元の発見をシェア

3行要約（Key Takeaways / AIOサマリー）

1: 線対称・点対称と敷き詰め模様の本質的な定義と直感的ビジュアルをシミュレーターで体験できる。
2: 公式や証明の背景にある数学的意味と、厳密な導出ステップを解説。
3: 実社会における工学応用（画像処理の反転（フリップ）と CSS の transform）のTypeScript実装コードを収録。

なぜこれを学ぶのか？ — 現実社会とテクノロジーでの価値

Purpose & Motivation

なぜ生まれたのか？

線対称・点対称と敷き詰め模様の基礎原理を体系化し、抽象的な計算を直感的に扱うために誕生した。

身につく武器・思考力

図形を鏡に映すと、もう半分はどう決まる？。この考え方を身につけることで、複雑な課題を単純化して数理モデルとして解く力が養われる。

実社会・ITでの活躍現場

•画像処理の反転（フリップ）と CSS の transform
•ITシステム・アルゴリズム実装における論理設計
•データ分析やシミュレーションにおける数理モデリング

Layer 1 — 直感・シミュレーター

左側のマス目をクリックして色をぬろう。「線対称」か「点対称」かを切りかえて、対称の軸（または中心の点）に合わせて右側（またはもう半分）に自動で映る様子を観察しよう。

↑ 線対称: 赤い点線（対称の軸）で紙を2つ折りにしたとき、左右の図形がぴったり重なり合います。対応する点を結ぶ線分は、対称の軸と垂直に交わり、軸によって2等分されます。

Layer 2 — 定義・受験・証明

定義

1本の直線を折り目にして折ったとき、両側がぴったり重なる図形を「線対称な図形」といい、その直線を「対称の軸」という。また、ある点を中心に $180°$ 回転させるともとの図形にぴったり重なる図形を「点対称な図形」といい、その点を「対称の中心」という。

公式・数理モデル

P'(x, y) \rightarrow P(-x, -y)

証明・導出

線対称では、対応する2つの点を結ぶ線分は対称の軸と垂直に交わり、軸によって長さが半分ずつに分けられる。つまり対称の軸は対応点を結ぶ線分の垂直二等分線になっている。

点対称では、対応する2つの点と対称の中心はいつも一直線上にあり、対称の中心から対応する2点までの長さは等しい。座標で考えると、対称の中心が原点のとき、点 $(x, y)$ に対応する点は $(-x, -y)$ となる。

押さえておきたいポイント

線対称：対応する点を結ぶと対称の軸と垂直に交わり、軸で長さが2等分される
点対称：対応する点と対称の中心はいつも一直線上に並び、中心からの長さが等しい
正方形や正六角形などの正多角形は、線対称であり点対称でもある図形が多い
タイル張り（敷き詰め模様）は同じ図形の線対称・点対称な繰り返しでできている

参照基準・学習指導要領との対応

本トピックの内容・数理モデルは、文部科学省学習指導要領（算数・数学・情報）および国際標準カリキュラムに準拠し、エンジニアリング現場の実装事例と照らし合わせてMath World Lab編集部により検証・作成されています。

Layer 3 — 工学応用・現場実装

画像処理の反転（フリップ）と CSS の transform

線対称・点対称の考え方は、画像編集ソフトの「左右反転」「上下反転」「180度回転」やWebページのCSSアニメーションでそのまま使われている。ピクセル座標を軸や中心に対して折り返す計算は、鏡に映す操作の数式そのものである。

1// 画像の左右反転（線対称）: x座標を軸に対して折り返す
2function flipHorizontal(x: number, width: number): number {
3  return width - 1 - x; // x = width/2 を対称の軸とする
4}
5
6// 画像の180度回転（点対称）: 中心点に対して折り返す
7function rotate180(x: number, y: number, cx: number, cy: number) {
8  return { x: 2 * cx - x, y: 2 * cy - y };
9}
10
11// CSSでも同じ考え方が使われる
12// .mirrored { transform: scaleX(-1); }      /* 線対称（左右反転） */
13// .rotated  { transform: rotate(180deg); }  /* 点対称（180度回転） */
14
15console.log(flipHorizontal(2, 10)); // 7
16console.log(rotate180(2, 3, 5, 5)); // { x: 8, y: 7 }