レイアウト

コンテンツのレイアウトとスタイルを制御するための、いくつかの異なるヘルパークラスを提供しています。今後のバージョンでこれらをさらに追加することを目指しているので、ご期待ください。

プレゼンテーションのサイズ変更、スケーリング、センタリングを変更する場合は、プレゼンテーションサイズを参照してください。

スタック

r-stack レイアウトヘルパーを使用すると、複数の要素を中央に配置し、重ねることができます。これは、フラグメントと一緒に使用して、要素を段階的に表示することを目的としています。

<div class="r-stack">
  <img
    class="fragment"
    src="https://picsum.photos/450/300"
    width="450"
    height="300"
  />
  <img
    class="fragment"
    src="https://picsum.photos/300/450"
    width="300"
    height="450"
  />
  <img
    class="fragment"
    src="https://picsum.photos/400/400"
    width="400"
    height="400"
  />
</div>

スタックされた各要素を個別に表示する場合は、フラグメント設定を調整できます

<div class="r-stack">
  <img
    class="fragment fade-out"
    data-fragment-index="0"
    src="https://picsum.photos/450/300"
    width="450"
    height="300"
  />
  <img
    class="fragment current-visible"
    data-fragment-index="0"
    src="https://picsum.photos/300/450"
    width="300"
    height="450"
  />
  <img
    class="fragment"
    src="https://picsum.photos/400/400"
    width="400"
    height="400"
  />
</div>

テキストの自動調整

r-fit-text クラスは、スライドから溢れることなく、テキストを可能な限り大きくします。適切なフォントサイズを手動で見つける必要がない場合に、大きなテキストを表示するのに最適です。fitty ❤️ によって実現されています。

<h2 class="r-fit-text">BIG</h2>

<h2 class="r-fit-text">FIT TEXT</h2>
<h2 class="r-fit-text">CAN BE USED FOR MULTIPLE HEADLINES</h2>

ストレッチ

r-stretch レイアウトヘルパーを使用すると、画像やビデオなどの要素のサイズを変更して、スライドの残りの垂直方向のスペースを覆うことができます。たとえば、以下の例では、スライドに**タイトル**、**画像**、**キャプション**が含まれています。**画像**に .r-stretch クラスがあるため、高さはスライドの高さから**タイトル**と**キャプション**の合計の高さを引いた値に設定されます。

<h2>Stretch Example</h2>
<img class="r-stretch" src="/images/slides-symbol-512x512.png" />
<p>Image byline</p>

ストレッチの例

画像のキャプション

ストレッチの制限

• スライドセクションの直接の子孫のみをストレッチできます
• スライドセクションごとに1つの子孫のみをストレッチできます

フレーム

任意の要素を r-frame で装飾して、背景に対して目立たせることができます。フレーム要素がアンカー内に配置されている場合、境界線にホバー効果が適用されます。

<img src="logo.svg" width="200" />
<a href="#">
  <img class="r-frame" src="logo.svg" width="200" />
</a>