web-dev-qa-db-ja.com

Reveal.jsで左揃えの段落を取得するにはどうすればよいですか？

標準のHTML段落は、reveal.jsによって中央に表示されます。通常のウェブページのように、これを左揃えに変更したいと思います。私はこれを行う明らかに.jsのプレゼンテーションを見ましたが、これはどのように機能しますか？

reveal.js
26
khinsen

解決

プレゼンテーションにカスタム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ファイルは複雑です。 reveal.css ですが、生成されたHTMLを見て、CSSがターゲットとする対象を特定することで、幸運を祈っています。

パンドック

これは、 markdown から Pandoc を使用してReveal.jsスライドを生成している場合でも機能します。その場合は、<style>ブロックをファイルに入れて、pandoc --include-in-header=<file with <style> block> ...で挿入するようPandocに指示します。

32
ntc2

CSSオプションの変更を開始する場合は、テーマのCSSファイルで行うこともできます。これらのほとんどはとにかく定義されています。

たとえば、これはthemesフォルダーの「sky.css」ファイルにあります。

.reveal p {
  margin: 20px 0;
  line-height: 1.3; }

CSSスニペット「text-align：left;」を追加するだけです。これに、あなたの段落は必要に応じて配置されます：

.reveal p {
  margin: 20px 0;
  line-height: 1.3;
  text-align: left; }

そのCSSの名前を「mysky.css」のような名前に変更し、スライドのヘッダーの新しいテーマにリンクすることはおそらく意味があります。そうすれば、問題が発生した場合でも、いつでも元のテーマに戻すことができます。私の経験では、これは非常にうまく機能します。

4
Christof

セクションでこのコードを使用します。

<section style="text-align: left;">
4
Daniel

私は外部のマークダウンを使用しており、追加した承認された回答に従って

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

<head>の下部（他のすべてのCSS <link>sの後）。

これはうまくいきますが、私の<p>テキストはすべて左揃えになっています。そこで、中央揃えにしたいすべての「太字でない」テキストに<h6>タグ（あまり使われません）を再採用しました。

<style type="text/css">
    p { text-align: left; }
    .reveal h6 {
        text-transform: none;
        font-weight: 400;
    }
</style>

マークダウンで6ハッシュのプレフィックスを付けて使用します。

######Some non-capitalized, normal weight, centered text

最後に、私の画像はすべて<p>タグで囲まれていたため、左揃えにもなりましたが、中央揃えのままにして、ブロックテキストのみを左揃えにしたいと思いました。画像のマークダウンの前に同じ行の<h>タグを付けてハッキングしました。 <h1>単一ハッシュプレフィックスを使用：

#![alt text][path/to/my/image.png]
3
William Myers