プレゼンテーションのサイズ

すべてのプレゼンテーションには、作成された解像度である「通常」のサイズがあります。reveal.js は、通常のサイズに基づいてプレゼンテーションを均一にスケーリングし、コンテンツのアスペクト比やレイアウトを変更することなく、あらゆるディスプレイやビューポートにすべてが収まるようにします。

サイズ設定に関連する 設定オプション のリストとそのデフォルト値については、以下を参照してください。

Reveal.initialize({
  // The "normal" size of the presentation, aspect ratio will
  // be preserved when the presentation is scaled to fit different
  // resolutions. Can be specified using percentage units.
  width: 960,
  height: 700,

  // Factor of the display size that should remain empty around
  // the content
  margin: 0.04,

  // Bounds for smallest/largest possible scale to apply to content
  minScale: 0.2,
  maxScale: 2.0,
});

中央揃え

スライドは、含まれるコンテンツの量に基づいて画面の中央に垂直に配置されます。これを無効にして、構成された高さでスライドを固定したままにするには、center を false に設定します。

Reveal.initialize({ center: false });

埋め込み

デフォルトでは、reveal.js はブラウザのビューポート全体をカバーする必要があると想定します。Web ページの一部にプレゼンテーションを埋め込んだり、同じページに 複数のプレゼンテーション を表示したりする場合は、embedded 設定オプションを使用できます。

Reveal.initialize({ embedded: false });

埋め込みプレゼンテーションは、.reveal ルートの寸法に基づいてサイズを決定します。その要素のサイズが、ウィンドウの resize イベント以外のソースから変更された場合は、Reveal.layout() を呼び出して、手動でレイアウトの更新をトリガーできます。

// Change the size of our presentation
document.querySelector('.reveal').style.width = '50vw';

// Make reveal.js aware of the size change
Reveal.layout();

BYOL

組み込みのスケーリングと中央揃えを無効にして、独自のレイアウトを使用する場合は、disableLayout: true を設定します。これにより、スライドは利用可能なページの幅と高さの 100% をカバーし、レスポンシブスタイルの設定はユーザーに任されます。

Reveal.initialize({
  disableLayout: false,
});