見出し改行文字装飾リストタスク ・ リスト定義リストリンク画像水平線テーブル引用コード ・ ブロックルビ脚注 HTML 属性ボタン付箋ツリーメニューカード段落

Markdown早見表

このページでは、 Catalpa で使用できる Markdown 記法を紹介します。Catalpa は Markdown プロセッサーとして flexmark を採用していますので、 flexmark のサポートしている Markdown 記法を使用できます。flexmark は CommonMark Spec 0.28 に準拠するように設計されています。

見出し

行頭を # で始めると見出しになります。出力されるタグは # の数に応じて、 <h1> ～ <h6> となります。見出しの外観は CSS によって装飾されます。

# 見出しレベル 1

## 見出しレベル 2

### 見出しレベル 3

#### 見出しレベル 4

##### 見出しレベル 5

###### 見出しレベル 6

行末に # を追加することもできます。行頭の # の数で <h1> ～ <h6> が決まるため、 行頭と行末の # の数は一致していなくても問題ありません。

# 見出しレベル 1 #

## 見出しレベル 2 ##

### 見出しレベル 3 ###

#### 見出しレベル 4 ####

##### 見出しレベル 5 ######

###### 見出しレベル 6 ######

見出しレベル 1 と見出しレベル 2 には、 タイトルの下部に = または - で線を引く記法も使えます。

見出しレベル 1
==============

見出しレベル 2
--------------

改行

行末に半角スペースを 2 つ置くと強制改行できます。（下記では半角スペースを水色のアンダースコア␣で表示しています。）

1行目の文章␣␣
2行目の文章

ブランク文字 （半角スペース ・ 全角スペース ・ タブ） のみを含む行は垂直スペースになります。ブランク文字のみを含む行が 1 つの場合、 高さ 0 の垂直スペースになります。高さは 0 ですが、 前のマージンと後のマージンの相殺が無効になるため、 垂直スペースとして働きます。ブランク文字はいくつ入力しても同じです。（垂直スペースが増えることはありません。）

1行目の文章
␣␣␣␣
2行目の文章

ブランク文字のみを含む行が連続で 2 つ以上になると振る舞いが変わります。最初のブランク行は高さ 0 で前後のマージン相殺を無効化する効果があります。2 つ目以降のブランク行は、 半角スペース 1 つあたり 0.25em の高さを持つ余白として働きます。半角スペース 4 つなら 0.25em × 4 = 1em の垂直スペースになります。

1行目の文章
␣␣␣␣
␣␣␣␣
␣␣␣␣
2行目の文章

文字装飾

文字を 1 つのアスタリスク * （もしくは 1 つのアンダースコア _） で囲むとイタリック表示になります。出力されるタグは <i> ではなく、 <em> です。また、 メイリオなどイタリック書体を持たないフォントでは効果がありません。

*イタリック*

文字を 2 つのアスタリスク * （もしくは 2 つのアンダースコア _） で囲むとボールド表示になります。出力されるタグは <b> ではなく、 <strong> です。

**ボールド**

文字を 3 つのアスタリスク * （もしくは 3 つのアンダースコア _） で囲むとイタリック ・ ボールド表示になります。出力されるタグは <em><strong> です。

***イタリック・ボールド***

文字を 2 つのチルダ ~ で囲むと打消し線が表示されます。出力されるタグは <del> です。

~~打消し線~~

文字を 1 つのバッククォート ` で囲むとインライン ・ コードとして表示されます。出力されるタグは <code> です。

`コード`

文字を [" と "] で囲むとメニューボタンの外観で表示されます。出力されるタグは button クラス属性の付いた <samp> です。

["ファイル"]

文字を [' と '] で囲むとキーボタンの外観で表示されます。出力されるタグは <kbd> です。

['Ctrl']

文字をシングルクォート ' で囲むと、 開始が ‘ に、 終了が ’ に変換されます。

'シングルクォート'

文字をダブルクォート " で囲むと、 開始が “ に、 終了が ” に変換されます。

"ダブルクォート"

文字を << と >> で囲むと、 開始が « に、 終了が » に変換されます。

<<アングルクォート>>

3 つのピリオド ... が … に変換されます。

続く...

2 つのハイフン -- が – に変換されます。

--

リスト

行頭にアスタリスク * を付けると箇条書きリストになります。* の代わりに + や - を使うこともできます。

* 箇条書きリストアイテム 1
* 箇条書きリストアイテム 2
* 箇条書きリストアイテム 3

行頭に数字と . を付けると番号付きリストになります。先頭行の番号は指定した数値になります。2 行目以降の番号は指定した数値ではなく自動的に連番となります。（たとえば、 先頭行を 4. とした場合、 番号は必ず 4, 5, 6, …と振られていきます。）

1. 番号付きリストアイテム 1
2. 番号付きリストアイテム 2
3. 番号付きリストアイテム 3

2 つ以上の半角スペース （またはタブ） で字下げすることにより、 リストを入れ子にすることができます。入れ子にするリストの行頭の記号を変えても大丈夫です。

* 大分類1
    + 中分類A
        - 小分類w
        - 小分類x
    + 中分類B
        - 小分類y
* 大分類2
    + 中分類C
        - 小分類z

タスク・リスト

リストに [x] または [ ] を加えるとタスク ・ リストになります。[x] にはタスクが完了したチェックマークが表示されます。[ ] にはタスクが完了していない未完了マークが表示されます。表示されるマークは CSS でカスタマイズ可能です。

* [x] 完了したタスク1
* [ ] 未完了のタスク
* [x] 完了したタスク2

定義リスト

2 行目の行頭をコロン : にして 1 つ以上の半角スペース （またはタブ） を続けると、 定義リストになります。出力されるタグは <dl>、 <dt>、 <dd> です。: の直前の行が定義語 <dt>、 : 以降が定義内容 <dd> になります。複数の定義を並べる場合は空行を挟みます。

イチゴ
:   バラ科の多年草。食用として供されている部分は花托であり
    果実ではない。イチゴにとっての果実は一見して種子に見える
    一粒一粒であり、正確には痩果《そうか》という。

ブドウ
:   ブドウ科のつる性落葉低木である。また、その果実のこと。
    葉は両側に切れ込みのある15-20cmほどの大きさで、
    穂状の花をつける。

リンク

以下の例のように [ ] と ( ) を組み合わせてリンクを作成できます。[ ] にリンク ・ テキストを、 ( ) 内にリンク URL を記述します。URL に続けて文字列を指定するとマウスカーソルを合わせたときにホバー表示されます。外部サイト¹へのリンクには target="_blank" 属性が自動的に付加されます。

[Link Text](relative/path/other.html)
[Click Here](/root/path/other.html)
[Google](http://www.google.co.jp/)
[Google](http://www.google.co.jp/ "Hover Text")

[ ]: ではじまる行はリンク定義になります。リンク定義は同じリンク URL を繰り返し使う場合に便利です。同じファイル内の任意の場所で定義できます。リンク定義自体は表示されません。[ ] の中のテキストがリンク ID になります。

[YAHOO_LINK_ID]: http://www.yahoo.co.jp/
[Amazon]: http://www.amazon.co.jp/ "hover text"

リンクが定義されている場合、 以下のように URL の代わりにリンク ID を指定してリンクを作成することができます。1 つめの [ ] にリンクテキスト、 2 つめの [ ] に定義したリンク ID を指定します。リンク ID を省略して [] とした場合 （または 2 つめの [] を省略した場合） リンク ID としてリンクテキストが使用されます。

[Yahoo][YAHOO_LINK_ID]
[Amazon][]
[Amazon]

外部サイトへのリンクを同じタブで表示する場合には {target="_self"} を追加します。

[Google](http://www.google.co.jp/){target="_self"}
[Google](http://www.google.co.jp/ "Hover Text"){target="_self"}

リンクテキストとしてリンク URL をそのまま使う場合は URL を < と > で囲みます。

<http://www.example.com/>

メールアドレスを < と > で囲むと、 メーラーを起動するための mailto スキームのリンクになります。

<nobody@example.com>

画像

リンク書式の先頭に ! を付けると画像になります。

![](relative/path/image.png)
![](/root/path/image.png)
![](http://www.example.com/image.png)
![](http://www.example.com/image.png "Hover Text")
![Alt Text](http://www.example.com/image.png "hover text")

Cumulative Layout Shift² によってページ表示速度が低下しないように、 Catalpa は画像ファイルのメタ情報を参照して img タグに width 属性と height 属性を自動的に付加します。

<img width="64" height="64" src="relative/path/image.png" alt="">

画像ファイル拡張子の手前に識別子 @2x、 @3x、 @4x のいずれかがあると倍率指定された高解像度画像として扱われます。@2x の場合は自動的に付加される width 属性と height 属性の値が 1/2 になります。同様に @3x は 1/3、 @4x は 1/4 になります。

![](relative/path/image.png)
![](relative/path/image@2x.png)
![](relative/path/image@3x.png)
![](relative/path/image@4x.png)

リンクのテキストに画像を指定すると画像リンクになります。

[![](img/sample.png)](http://www.example.com/)

段落に画像のみが含まれている場合、 画像は中央寄せで表示されます。

![](img/sample.png)

同じ段落内の画像は横に並べて表示されます。

![](img/sample.png)
![](img/sample.png)

空行を入れて段落を分けると画像は横に並ばなくなります。

![](img/sample.png)

![](img/sample.png)

{.left} や {.right} を付加することで、 画像を左寄せまたは右寄せで表示できます。間に必ず 1 つ以上の半角スペースを入れる必要があります。

![](img/sample.png) {.right}

{.border} を付加することで、 画像にボーダー ・ ラインを付けることができます。間に半角スペースを入れずに詰めて記述する必要があります。

![](img/sample.png){.border}

{.shadow} を付加することで、 画像にシャドウを付けることができます。（box-shadow プロパティによって矩形に影が付きます。）

![](img/sample.png){.shadow}

{.drop-shadow} を付加すると、 PNG など非矩形の透過画像にドロップ ・ シャドウを付けることができます。（drop-shadow 関数によって画像のアルファチャネルを考慮した非矩形の影が付きます。）

![](img/sample.png){.drop-shadow}

水平線

3 つ以上の - （または *） と任意の数の半角スペースで構成される行は水平線になります。出力されるタグは <hr> です。

---

- - -

-- -- -- -- --

****

** ** **

*************

テーブル

以下の記述でテーブルを表示することができます。2 行目の罫線にコロン : を含めることで、 左寄せ、 右寄せ、 中央寄せを制御できます。左側に : を配置すると左寄せ、 右側に : を配置すると右寄せ、 左側と右側の両方に : を配置すると中央寄せになります。: を省略すると左寄せになります。列ごとに 3 桁以上の幅が必要です。幅 2 桁以下の列が含まれているとテーブルとして認識されません。

| 列 1 | 列 2 (左寄せ) | 列 3 (中央) | 列 4 (右寄せ) |
|------|:--------------|:-----------:|--------------:|
| 1    | Apple         | US          |      $604.30B |
| 2    | Google        | US          |      $518.92B |
| 3    | Microsoft     | US          |      $436.83B |

ヘッダー行のないテーブルを作成することもできます。

|------|:--------------|:-----------:|--------------:|
| 1    | Apple         | US          |      $604.30B |
| 2    | Google        | US          |      $518.92B |
| 3    | Microsoft     | US          |      $436.83B |

行を区別しやすくするために奇数行の背景は薄い灰色になっています。{.no-stripe} を付加することで、 奇数行の背景色を無効にできます。

| 列 1 | 列 2 (左寄せ) | 列 3 (中央) | 列 4 (右寄せ) |
|------|:--------------|:-----------:|--------------:|
| 1    | Apple         | US          |      $604.30B |
| 2    | Google        | US          |      $518.92B |
| 3    | Microsoft     | US          |      $436.83B |
{.no-stripe}

テーブルは既定で中央に表示されますが、 {.left} または {.right} を付加することでテーブルの表示を左または右に寄せることができます。

| 列 1 | 列 2 (左寄せ) | 列 3 (中央) | 列 4 (右寄せ) |
|------|:--------------|:-----------:|--------------:|
| 1    | Apple         | US          |      $604.30B |
| 2    | Google        | US          |      $518.92B |
| 3    | Microsoft     | US          |      $436.83B |
{.left}

以下のように改行を入れて記述することもできます。セルの中に長い文章を書く時に便利です。各行は | または複数の半角スペースで始まる必要があります。

| 列 1 | 列 2 (左寄せ) | 列 3 (中央) | 列 4 (右寄せ) |
|------|:--------------|:-----------:|--------------:|
| 1
| Apple
| US
| $604.30B
|
| 2
| Google
| US
| $518.92B
|
| 3
| Microsoft
| US
| $436.83B
|

引用

行頭を > にすると引用になります。

> 吾輩は猫である。名前はまだ無い。どこで生れたか
> とんと見当がつかぬ。何でも薄暗いじめじめした所で
> ニャーニャー泣いていた事だけは記憶している。
> 吾輩はここで始めて人間というものを見た。

引用は入れ子にすることができます。

> 『吾輩は猫である』は、夏目漱石の長編小説である。1905年1月、
> 『ホトトギス』に発表され、好評を博したため、翌1906年8月まで
> 継続した。冒頭は次の通り。
> 
> > 吾輩は猫である。名前はまだ無い。どこで生れたか
> > とんと見当がつかぬ。何でも薄暗いじめじめした所で
> > ニャーニャー泣いていた事だけは記憶している。

コード・ブロック

行頭に 4 つのスペースもしくはタブを入れるとコードブロックとして認識されます。

    int main(int argc, char* argv[])
    {
        printf("Hello, World!!\n");
        return 0;
    }

3 つのバッククォート ```、 または、 3 つのチルダ ~~~ で囲んだ場合もコードブロックとして認識されます。

```
int main(int argc, char* argv[])
{
    printf("Hello, World!!\n");
    return 0;
}
```

``` または ~~~ を使う形式では言語名を指定することができます。いくつかの言語では自動的にコード ・ ハイライトが適用され色が着きます。

```java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}
```

public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}

言語名の後に半角スペースを置いてタイトルを指定できます。

```java Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}
```

Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}

{.copy} を付加するとコード ・ ブロックの内容をクリップボードにコピーするボタンが表示されます。

```java Hello.java {.copy}
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}
```

Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}

{.line-number} を付加すると行番号が表示されます。

• 行番号は必ず 1 から始まります。開始行番号を指定することはできません。
• 行番号の最大値は 999 です。1,000 行以上のコードに {.line-number} を指定しないでください。

```java Hello.java {.line-number .copy}
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}
```

Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}

{.dark} を付加するとコード ・ ブロックがダークカラーになります。

```java Hello.java {.dark .line-number .copy}
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}
```

Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}

{.light} を付加するとコード ・ ブロックがライトカラーになります。

```java Hello.java {.light .line-number .copy}
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}
```

Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Java!!");
        return;
    }
}

{.dark}、 {.light} いずれも指定しなかった場合は、 ダークカラーになります。

コード ・ ブロックは既定で自動的に行を折り返します。

```java Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("コードブロックの折り返しについて。コードブロックの横幅に収まらない長い行は自動的に右端で折り返されます。");
        return;
    }
}
```

Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("コードブロックの折り返しについて。コードブロックの横幅に収まらない長い行は自動的に右端で折り返されます。");
        return;
    }
}

{.scroll} を付加すると自動折り返しが無効になり、 必要に応じて水平スクロールバーが表示されるようになります。

```java Hello.java {.scroll}
public class Hello {
    public static void main(String[] args) {
        System.out.println("{.scroll}を指定すると折り返しが無効になりコードブロックに水平スクロールバーが表示されるようになります。");
        return;
    }
}
```

Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("{.scroll}を指定すると折り返しが無効になりコードブロックに水平スクロールバーが表示されるようになります。");
        return;
    }
}

コード ・ ハイライティングに対応している言語名は以下の通りです。

• apache / apacheconf
• bash / sh / zsh
• cpp / c / cc / h / c++ / h++ / hpp
• cs / csharp
• css
• diff / patch
• groovy
• http / https
• ini / toml
• java / jsp
• javascript / js / jsx
• json
• makefile / mk / mak
• objectivec / mm / objc / obj-c
• perl / pl / pm
• php / php3 / php4 / php5 / php6
• python / py / gyp
• ruby / rb / gemspec / podspec / thor / irb
• scala
• shell / console
• xml / html / xhtml / rss / atom / xjb / xsd / xsl / plist
• yaml / yml

ルビ

全角の 《 と 》 で囲んだテキストは直前の単語のルビ （ふりがな） になります。

ルビ付けの対象が漢字のみ （または半角英数字のみ） の場合には範囲を自動的に認識します。開始位置を全角の｜で明示することもできます。

本日は晴天《せいてん》なり。

日本語｜組版《くみはん》は奥が深い。

脚注

1. 脚注マークを付ける

[^識別子] を書くことで脚注マークを付けることができます。識別子には任意の文字を使用できますが、 脚注マークは 1 から始まる連番で表示されます。

Catalpa は Markdown を HTML[^html]に変換します。

2. 脚注（説明文）を書く

[^識別子]: 説明文 の形式で任意の段落に脚注を書きます。コロンの後に半角スペースが必要です。脚注は定義した位置にかかわらず、 ページ下部に表示されます。

[^html]: Hyper Text Markup Language の略。

脚注マークをクリックするとページ下部の脚注にスクロールします。ページ下部の脚注に配置されている ⇧ をクリックすると元の位置に戻ってきます。

HTML

Markdown の中に直接 HTML を書くこともできます。

<div style="text-align:center">
  Happy birthday!
</div>

ただし、 HTML タグの中で Markdown 記法を使うことはできません。下記の例では、 Markdown 記法の ** を使っていますが、 ボールド表示にはならず、 そのまま ** が表示されます。

<div style="text-align:center">
  **Happy** birthday!
</div>

空行を入れて HTML タグと Markdown 記述の段落を分けると、 Markdown 記法が有効になります。ただし、 <p> タグが挿入されることに注意してください。既定で <p> タグはブロック要素です。

<div style="text-align:center">

  **Happy** birthday!

</div>

属性

{ } を使って HTML 要素に任意の属性を付加することができます。

[Page2](other.html){target="_blank"}

上記はリンク先を新しいタブで開く例です。{target="_blank"} が付加されていることで、 直前の Markdown を変換した結果の HTML 要素に属性が付加されます。

{target="_blank"} を指定しなかった場合の出力

<a href="other.html">Page2</a>

{target="_blank"} を指定した場合の出力

<a href="other.html" target="_blank">Page2</a>

なお、 外部サイトへのリンクには target="_blank"　が自動的に付加されます。相対リンクを新しいタブで開きたい場合は {target="_blank"} を指定し、 外部サイトへのリンクを同じタブで開きたい場合は {target="_self"} を指定しましょう。

{attr="value"} の形式で属性名 （attr） と属性値 （value） を指定します。

• id 属性を指定する場合は、 {id="myname"} の代わりに {#myname} と短縮して書くこともできます。
• class 属性を指定する場合は、 {class="foobar"} の代わりに {.foobar} と短縮して書くこともできます。
• 複数の属性を指定する場合は半角スペースで区切ります。
  （例） {attr1="valueA" attr2="valueB" #myname .foobar}

HTML 要素に任意の属性を追加して、 CSS と組み合わせることで外観を変えることもできます。以下、 要素ごとの属性 { } の記述位置と CSS 装飾例を紹介していきます。

ボタン

リンク要素にクラス属性 .button を指定すると外観がボタンになります。クラス属性を組み合わせることで外観を変えられます。

[ボタン](index.html){.button}

{.button .hover} で浮き上がるボタンになります。

浮き上がるボタン

{.button .round} で丸いボタンになります。

丸いボタン

{.button .round .hover} で浮き上がる丸いボタンになります。

浮き上がる丸いボタン

{.button .next} で次ページボタンになります。

次ページ次ページ次ページ

{.button .previous} で前ページボタンになります。

前ページ前ページ前ページ

.tiny、 .small、 .large、 .huge でボタンの大きさを変えられます。たとえば、 {.button .large} で大きいボタンになります。

大きいボタン

.primary、 .primary-variant、 .secondary、 .secondary-variant でボタンの色を変えられます。それぞれの色は color.css で定義されています。たとえば、 {.button .primary} でボタンの色が --primary-color で定義された色になります。

ボタン

クラス属性は組み合わせて使うことができます。

付箋

定義リストに {.note}、 {.tip}、 {.info}、 {.warning}、 {.caution} を付加すると、 付箋のような外観で表示されます。長い文章は自動的に折り返されます。任意の位置で折り返したい場合は行末に半角スペースを 2 つ記述します。（下記では半角スペースを水色のアンダースコア␣で表示しています。）

{.note} メモ
:   Markdownはとても便利です。␣␣
    複数行に分けて書くこともできます。

付箋を連続で書くときは、 付箋と付箋の間にコメントタグ <!----> を配置して区切ります。タグで区切らないと連結された 1 つの付箋として表示されてしまいます。定義リストに続けて、 付箋を書くときもコメントタグを配置して区切ってください。

{.info} 情報1
:   複数の付箋を連続で書くと連結されてしまいます。

<!---->
{.info} 情報2
:   連結を防ぐためには付箋と付箋の間にコメントタグを挟みます。

付箋のタイトルを省略することもできます。

{.info}
:   これはタイトルなしの付箋です。__
    コンパクトになります。

.primary、 .primary-variant、 .secondary、 .secondary-variant を指定するとタイトルの背景色が変わります。

タイトル

プライマリーカラーの付箋です。

.round を指定するとタイトルが丸くなります。

タイトル

.round を指定してタイトルを丸くしてみました。

.deg-0 ～ .deg-9 を指定するとタイトルを傾けることができます。

タイトル

.deg-5 を指定してタイトルを 5 度傾けてみました。

.center、 .right を指定すると付箋の表示位置を変えられます。（付箋の横幅が短い場合）

タイトル

.center を指定して中央に表示してみました。

ツリー

箇条書きリストに .tree を指定するとツリー表示になります。属性を指定する位置が特殊なので注意してください。

  - {.tree} C:¥catalpa
      - catalpa.exe
      - index.html
      - LICENSE.txt
      - etc
          - firebase
              - config.json
          - netlify
              - index.html

メニュー

リンクの段落に .nav を指定するとナビゲーション ・ メニューになります。

{.nav}
[メニュー1](page1.html)
[メニュー2](page2.html)
[メニュー3](page3.html)
[メニュー4](page4.html)
[メニュー5](page5.html)

.border を指定すると枠が付きます。

メニュー 1 メニュー 2 メニュー 3 メニュー 4 メニュー 5

.border-top、 .border-right、 .border-bottom、 .border-left を指定して特定の辺のみに枠を付けることもできます。（下記は .border-bottom のみを指定した例です。）

メニュー 1 メニュー 2 メニュー 3 メニュー 4 メニュー 5

カード

リンクの段落に .card を指定するとカード形式のメニューになります。

• タイトルは必ずアスタリスク * で囲んでください。* で囲むことで　CSS 適用に必要な <em> タグが生成されます。
• 画像の縦横比は 1:1 になります。

{.card}
[![](img/sample1.jpg)*タイトル1*](page1.html)
[![](img/sample2.jpg)*タイトル2*](page2.html)
[![](img/sample3.jpg)*タイトル3*](page3.html)
[![](img/sample4.jpg)*タイトル4*](page4.html)
[![](img/sample5.jpg)*タイトル5*](page5.html)
[](){.padding}
[](){.padding}
[](){.padding}

[](){.padding} は空のカードです。末尾に空のカードを 3 つ配置しておくと、 カードが常に左寄せで表示されます。

.landscape を指定すると画像が横長 （16:10） になります。.landscape を指定するときは、 末尾に [](){.padding} を 5 つ配置してください。

タイトル 1タイトル 2タイトル 3タイトル 4タイトル 5

段落

段落 （パラグラフ） に属性を付与する方法は 2 つあります。

1. 段落の前の行に属性を書く方法

{.center}
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

2. 段落の末尾に半角スペースを配置して属性を書く方法

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。␣{.right}

段落 （パラグラフ） には様々な属性を付けることができます。

プリフィックス .m- の部分を .mt- にするとトップ ・ マージンのみを指定できます。同様に .mr- でライト ・ マージン、 .mb- でボトム ・ マージン、 .ml- でレフト ・ マージンを指定できます。.mx- でレフト ・ マージンとライト ・ マージン、 .my- でトップ ・ マージンとボトム ・ マージンを指定できます。

プリフィックス .p- の部分を .pt- にするとトップ ・ パディングのみを指定できます。同様に .pr- でライト ・ パディング、 .pb- でボトム ・ パディング、 .pl- でレフト ・ パディングを指定できます。.px- でレフト ・ パディングとライト ・ パディング、 .py- でトップ ・ パディングとボトム ・ パディングを指定できます。

たとえば、 段落に {.mt-3} を指定すると通常よりも間隔を広くとることができます。他にも、 画像とテキストの間隔を広げたいときや狭めたいときにマージン指定は便利です。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

{.mt-3}
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

トップページに戻る