☰

reveal.js で左揃えの段落を取得するにはどうすればいいですか? 質問する

tag-icon • tag-icon reveal.js
reveal.js で左揃えの段落を取得するにはどうすればいいですか? 質問する

標準の HTML 段落は、reveal.js によって中央に表示されます。これを通常の Web ページのように左揃えに変更したいと思います。これを実行する reveal.js プレゼンテーションを見たことがありますが、これはどのように機能するのでしょうか?

ベストアンサー1

解決

プレゼンテーションにカスタムCSSを追加することで、スライドの表示方法を変更できます。たとえば、

<style type="text/css">
p { text-align: left; }
</style>

すべての段落を左揃えにします。

その他の例

左揃えの段落についてのみ質問されましたが、役に立つと思われる方のために、より複雑な例をいくつか示します。

  • タイトル以外のスライドのタイトル部分のスタイルを変更します。

    <style type="text/css">
.reveal .slide h1 { font-size: 200%; text-decoration: underline; }
</style>

  • タイトル スライドのタイトル部分のスタイルを変更します。

    <style type="text/css">
.reveal .slides .title {
  /* Ugly ... */
  text-shadow: 0px 0px 25px rgb(100,256,0); 
  font-size: 300%;
}
</style>

reveal.jsのデフォルトのCSSファイルは複雑です。例えば表示.cssしかし、生成された HTML を見て、CSS が何をターゲットにすべきかを判断するだけでうまくいきました。

パンドック

これらはすべて、reveal.jsスライドを生成する場合でも機能します。マークダウン使用してパンドックを強くお勧めします。その場合、<style>ブロックをファイルに入れて、Pandoc に で挿入するように指示しますpandoc --include-in-header=<file with <style> block> ...。

おすすめ記事