# ウェブキャンバスサイズの設定 > Configure the visible size of the Web canvas element. ウェブアプリケーションでは、キャンバス要素は、ゲームをレンダリングするときにブラウザーがグラフィックスを描画する場所です。このセクションでは、ウェブのキャンバス要素の表示サイズと、ゲームがレンダリングする解像度を設定する方法について説明します。 ウェブのキャンバスサイズを設定するには、以下のタイプのキャンバスサイズを考慮する必要があります。 | **キャンバスサイズ要素** | **説明** | | ------------------------ | ------------------------------------------------------------------------------------------------------------ | | **キャンバス要素の CSS サイズ** | このドキュメントオブジェクトモデル (DOM) は、キャンバスが占めるウェブページ上の表示領域を指定します。キャンバスサイズは HTML または JavaScript を使用して設定できます。 | | **WebGL のレンダーターゲットのサイズ** | このサイズは、GPU がゲームをレンダリングするピクセル解像度を指定します。このサイズは、CSS サイズと同期して管理してピクセルパーフェクトなレンダリングを提供することも、CSS サイズから分離することもできます。 | 上記の 2 つのキャンバスサイズ要素が一致しない場合、ブラウザーはレンダリングされた WebGL 出力を、ウェブページの表示キャンバス領域に合わせて伸縮します。 ## レンダリング解像度の分離##decouple-the-render-resolution レンダリング解像度を分離すると、高 DPI (1 インチあたりのドット数) ディスプレイで低 DPI のダウンスケールされたレンダリングを実装する場合に便利です。これは、GPU フィルレートのパワーを節約するだけでなく、アプリケーションがレンダリング解像度に敏感な場合にも役立ちます。例えば、アプリケーションロジックでスクリーンスペースピクセル単位が使用されているが、アプリケーション自体が正しく動作するためには、特定の解像度が必要な場合などです。 デフォルトでは、Unity はキャンバス要素の CSS サイズと WebGL のレンダーターゲットのサイズの同期を維持し、1:1 ピクセルパーフェクトレンダリングを実現します。JavaScript のウェブページがキャンバスの CSS サイズを変更すると、Unity はそれに一致するように WebGL のレンダーターゲットのサイズを自動的に調整します。デフォルトでは、この一致は高 DPI レンダリングを実装するために行われます。 ### DPI スケールのオーバーライド##override-dpi-scale DPI スケールをオーバーライドする場合は、`index.html` ファイルを開き、Unity Instance 設定変数 `devicePixelRatio=` を追加します。例えば、ウェブサイトテンプレートページで `devicePixelRatio=1` を設定すると、Unity は常に低 DPI レンダリングを適用します。例については、[ウェブテンプレートビルド設定とインタラクション](/engine/6000.0/manual/platform-specific/webgl/building-distribution/templates/web-templates-build-configuration.md) を参照してください。 ### ウェブキャンバスのレンダリングサイズの手動変更##manually-change-the-web-canvas-render-size キャンバスサイズを手動で設定するには、まず自動サイズ同期を無効にする必要があります。これを行うには、ウェブテンプレートの `index.html` ファイルで、Unity Instance 設定変数を false に設定します (`matchWebGLToCanvasSize=false`)。これを設定すると、Unity はキャンバスのレンダーターゲットのサイズをそのまま維持しますが、必要に応じていつでもサイズを設定できます。 例えば、キャンバスの CSS サイズを変更するには、`index.html` ファイルの以下のテキストを編集します。 ```
```