---
title: ウェブのグラフィック
slug: Web/Guide/Graphics
tags:
  - 2D
  - 3D
  - Canvas
  - Graphics
  - HTML5
  - SVG
  - Web
  - WebGL
  - WebRTC
  - ウェブ
  - グラフィック
translation_of: Web/Guide/Graphics
---
<p><span class="seoSummary">ウェブサイトやアプリケーションは、画像などのグラフィックを表現する必要がある場合がよくあります。</span>静的な画像であれば、 {{HTMLElement("img")}} 要素を使ったり、 {{cssxref("background-image")}} プロパティで HTML 要素の背景を設定したりすることで、簡単に表示することができます。その場でグラフィックを構築したり、事後に画像を操作したりすることもできます。<span class="seoSummary">これらの記事は、このような操作を行う方法についての詳しい情報を提供しています。</span></p>

<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="2D_Graphics" name="2D_Graphics">2D グラフィック</h2>

<dl>
 <dt><a href="/ja/docs/HTML/Canvas">Canvas</a></dt>
 <dd>{{HTMLElement("canvas")}} 要素は、 JavaScript を使用して 2D グラフィックを描画する API を提供します。</dd>
 <dt><a href="/ja/docs/Web/SVG">SVG</a></dt>
 <dd>SVG (Scalable Vector Graphics) を使うと、直線や曲線、他の幾何学図形を使用してグラフィックを描画できます。ビットマップの使用を避けることにより、どのようなサイズにもすっきりと変更可能な画像を生成できます。</dd>
</dl>

<p><span class="alllinks"><a href="/ja/docs/tag/Graphics">すべて見る...</a></span></p>
</div>

<div class="section">
<h2 class="Documentation" id="3D_Graphics" name="3D_Graphics">3D グラフィック</h2>

<dl>
 <dt><a href="/ja/docs/Web/WebGL">WebGL</a></dt>
 <dd>ウェブ用の 3D グラフィック API である WebGL をはじめて使う方向けのガイドです。この技術は、標準の OpenGL ES 仕様をウェブコンテンツ内で使用できます。</dd>
</dl>

<h2 id="Video" name="Video">動画</h2>

<dl>
 <dt><a href="/ja/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">HTML5 の audio と video を使用する</a></dt>
 <dd>HTML 文書内に動画や音声を埋め込み、再生を制御をします。</dd>
 <dt><a href="/ja/docs/WebRTC">WebRTC</a></dt>
 <dd>WebRTC の「RTC」は、Real-Time Communications の頭文字です。これは、ブラウザークライアント間 (P2P) で音声/動画ストリーミングとデータ共有を可能にする技術です。</dd>
</dl>
</div>
</div>