Summary  
This chapter explains the differences between vector graphics—mathematically defined, resolution-independent shapes—and raster graphics—pixel-based, resolution-dependent images that lose quality when scaled.

General domain of usage  
Graphic design and digital media production

デジタルメディアで使用される主なグラフィック形式には、**ベクターグラフィックス**と**ラスターグラフィックス**の2種類がある。

## ベクターグラフィックス
ベクターグラフィックスは、ピクセルではなく線や形状に基づく数式を使用して作成される。このため、ベクターグラフィックスは解像度に依存せず、サイズを拡大・縮小しても画質が劣化しない。標準的なベクターグラフィックのファイル形式には**SVG**が含まれる。次の例を実行し、サイズが異なっても画像の品質に違いがないことを確認する。

PGltZwogIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL3ZlY3RvcitncmFwaGljK2V4YW1wbGUiCiAgYWx0PSJtaWNyb3dhdmUiCiAgd2lkdGg9IjgwIgovPgo8aW1nCiAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvdmVjdG9yK2dyYXBoaWMrZXhhbXBsZSIKICBhbHQ9Im1pY3Jvd2F2ZSIKICB3aWR0aD0iMTYwIgovPgo8aW1nCiAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvdmVjdG9yK2dyYXBoaWMrZXhhbXBsZSIKICBhbHQ9Im1pY3Jvd2F2ZSIKICB3aWR0aD0iMzIwIgovPg==

## ラスターグラフィックス
一方、ラスターグラフィックスはピクセルを使用して作成され、解像度に依存します。つまり、ラスターグラフィックスを拡大するとピクセルがより目立ち、画質が低下します。一般的なラスターグラフィックのファイル形式には、**JPEG**、**PNG**、**GIF** があります。次の例を見てみましょう。幅が広がるにつれてピクセルがより目立ち、画像の品質が低下しています。

PGltZwogIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9jNDY4MDUyZC02ZDQ3LTQ2NzctYjFkMS1mYjExYWNlNzE5YjEvbWVhZGlhLSUyNi10YWJsZXMva2V0dGxlLnBuZyIKICBhbHQ9ImtldHRsZSIKICB3aWR0aD0iNjQiCi8+CjxpbWcKICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvYzQ2ODA1MmQtNmQ0Ny00Njc3LWIxZDEtZmIxMWFjZTcxOWIxL21lYWRpYS0lMjYtdGFibGVzL2tldHRsZS5wbmciCiAgYWx0PSJrZXR0bGUiCiAgd2lkdGg9IjEyOCIKLz4KPGltZwogIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9jNDY4MDUyZC02ZDQ3LTQ2NzctYjFkMS1mYjExYWNlNzE5YjEvbWVhZGlhLSUyNi10YWJsZXMva2V0dGxlLnBuZyIKICBhbHQ9ImtldHRsZSIKICB3aWR0aD0iMzYwIgovPg==

まとめると、**ベクターグラフィックス**はロゴやイラスト、拡大縮小が必要なデザインによく使用されます。一方、**ラスターグラフィックス**は写真や高いディテールが求められるデザインに使用されます。ただし、どちらのグラフィックスにも長所と短所があります。

拡大・縮小しても画質が劣化しないロゴやイラストに最適なグラフィック形式はどれですか？

高いディテールが求められる写真やデザインに最適なグラフィック形式はどれですか？

ラスターグラフィックスは、画質を損なわずに拡大・縮小できますか？

HTMLの基本を学びましょう。HTMLはすべてのウェブサイトの基盤です。タグや属性を使ってコンテンツを構造化し、明確なドキュメントレイアウトを構築し、画像、リンク、テーブルを追加します。入力やインタラクションを取得するためのアクセシブルでユーザーフレンドリーなフォームを作成します。ベストプラクティスに従いながら、構造化され機能的なウェブページの作成を実践します。HTMLを習得してウェブ開発の第一歩を踏み出しましょう。

ウェブの仕組みを探求します。データがネットワークを通じてどのように移動するかを学び、プロトコルの役割を発見し、IPアドレスやドメイン名の謎を解き明かします。ウェブブラウザとサーバーがどのように通信してウェブコンテンツを配信するかについて、高度な理解を得ることができます。

見出しや段落からリストやテーブルまで、タグを使ってコンテンツを構造化する方法を学びます。属性を用いて要素を強化する方法についても理解します。

HTMLドキュメント構造の核心部分。DOCTYPE宣言、head、bodyを含むHTMLドキュメントの構成要素について学びます。各要素の目的と、それらがウェブページ全体の構造にどのように寄与するかを理解します。

画像、音声、動画などのメディアを活用してウェブページをより魅力的にします。表形式の構造化データをテーブルとして扱います。

HTMLフォームの多様性を探求します。主要な概念と技術を活用して、直感的でユーザーフレンドリーなフォームの設計方法を学びます。フォームがウェブサイト上でユーザーの操作やデータ送信を可能にする仕組みを理解します。

ベクターグラフィックスとラスターグラフィックスの理解

ベクターグラフィックス

ラスターグラフィックス

1. 拡大・縮小しても画質が劣化しないロゴやイラストに最適なグラフィック形式はどれですか？

2. 高いディテールが求められる写真やデザインに最適なグラフィック形式はどれですか？

3. ラスターグラフィックスは、画質を損なわずに拡大・縮小できますか？