Summary  
This chapter explains the difference between vector graphics—which use mathematical equations to define scalable shapes without quality loss—and raster graphics, which use fixed pixels and lose quality when scaled.  

General domain of usage  
Graphic design  

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

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

PGltZwogIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL3ZlY3RvcitncmFwaGljK2V4YW1wbGUiCiAgYWx0PSJtaWNyb3dhdmUiCiAgd2lkdGg9IjgwIgovPgo8aW1nCiAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvdmVjdG9yK2dyYXBoaWMrZXhhbXBsZSIKICBhbHQ9Im1pY3Jvd2F2ZSIKICB3aWR0aD0iMTYwIgovPgo8aW1nCiAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvdmVjdG9yK2dyYXBoaWMrZXhhbXBsZSIKICBhbHQ9Im1pY3Jvd2F2ZSIKICB3aWR0aD0iMzIwIgovPg==

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

PGltZwogIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9jNDY4MDUyZC02ZDQ3LTQ2NzctYjFkMS1mYjExYWNlNzE5YjEvbWVhZGlhLSUyNi10YWJsZXMva2V0dGxlLnBuZyIKICBhbHQ9ImtldHRsZSIKICB3aWR0aD0iNjQiCi8+CjxpbWcKICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvYzQ2ODA1MmQtNmQ0Ny00Njc3LWIxZDEtZmIxMWFjZTcxOWIxL21lYWRpYS0lMjYtdGFibGVzL2tldHRsZS5wbmciCiAgYWx0PSJrZXR0bGUiCiAgd2lkdGg9IjEyOCIKLz4KPGltZwogIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9jNDY4MDUyZC02ZDQ3LTQ2NzctYjFkMS1mYjExYWNlNzE5YjEvbWVhZGlhLSUyNi10YWJsZXMva2V0dGxlLnBuZyIKICBhbHQ9ImtldHRsZSIKICB3aWR0aD0iMzYwIgovPg==

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

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

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

ラスターグラフィックスは、品質を損なうことなく拡大や縮小が可能ですか？

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

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

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

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

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

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

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

ベクターグラフィックス

ラスターグラフィックス

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

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

3. ラスターグラフィックスは、品質を損なうことなく拡大や縮小が可能ですか？