【Marp】コピペで簡単！多段組みシンプルレイアウト

Markdown記法でスライドを作成できる、VS Codeの拡張機能の「Marp」。Markdown記法だけでスライドを作成できるため、簡単なスライドであればレイアウトや書式を細かく指定することなく勝手に統一して適用してくれるのがすごいですね。
しかし、少し複雑なスライドを作ろうとすると、たちまちレイアウトの指定が難しくなるのが難点です。

そこで、本記事ではほぼコピペだけで使いやすくレイアウトを組めるよう、フォーマットを作成してみました！

本記事で作れるレイアウトの一例

前提

Marpとは？

そもそもMarpとは何ぞや？という方向けに、↓の記事で紹介しています。

briboo-pc.hatenablog.jp

CSSを適用しよう！

本記事で紹介する方法は、MarkdownファイルにCSSファイルを適用させる必要があります。またレイアウト以外にも様々なカスタマイズが可能となるので、連携していない場合は過去記事を参照してぜひ適用してみてください。

briboo-pc.hatenablog.jp

Marpのレイアウトの仕組み

カンタンに説明します！
デフォルトでは、書いたものが上から順に積み重なるだけです。横並びにはなりません。文章も画像も、すべて縦に並びます。

要素が縦に積み上がる

それだけでは、例えば、

• 画像を横並びに２枚配置して比較したい
• スライドを縦に２つのブロックに分けて、内容を対比させたい
• 大見出しは縦に分割したくないが、段落の横に画像を小さく表示したい

といった、PPTなんかではよく用いれるような様々なレイアウトを実現できません。そこで、CSSでレイアウトを自由に変えてみよう！というのが本記事の主旨です。

方法

Marpを記述したMarkdownファイルにHTMLタグを追記し、HTMLタグに対してCSSを使ってスタイルを指示します。

レイアウトの種類

• FlexBox
  • 横並びを実現することの多い機能
• Grid
  • タイル状のスタイルを実現しやすい機能
• float
  • 文や画像を回り込ませる機能
  • 横並びのためには、今は一般的に使われていない

Marpは別にSEOを意識する必要もないので自由度は高いですが、今回は実際に使うときにより使いやすくシンプルで列を作れるように、「FlexBox」を用いたいと思います！

実装

CSSファイルの編集

まずはCSSファイル内に以下を追記してください。（上と下のゾーンには色を付けていません。）

:root {
  --fw: 1;
}
/* ----- レイアウト ----- */
.flex{
  display: flex;
  gap: 1em;
}
.sa {
  justify-content: space-around;
  /* border: 8px dashed rgb(15, 166, 226);
  background-color: rgb(222, 244, 255); */
}
.sb {
  justify-content: space-between;
  /* border: 8px dashed rgb(21, 17, 255);
  background-color: rgb(222, 244, 255); */
}
.sa div,.sb div{
  margin: 0.1em;
  /* border: 8px dashed rgb(80, 177, 109);
  background-color: rgb(227, 250, 237); */
}
.fw div{
  flex: var(--fw);
  /* background-color: rgb(244, 238, 255);
  border: 8px dashed rgb(93, 0, 255); */
}/* ---------- */

mdファイルの編集

Markdownファイルも追記します。次のコードは、３種類の指定方法をまとめて書いたテンプレです。（このまま適用すると、後述の「flex sa」になります。）

Marpスライドの中で、レイアウトスタイルを変更したいページ内に次のコードをコピペしてください。

# 上側のゾーン
ここはレイアウトの中で**上側**に位置します！ヘッダーとして使ったり、タイトルなどをつけられます。
<div class="flex sa">
<div style="--fw: 3;">

# 左の子要素
ここは、レイアウトの中で**左側**に位置します！
ここは、レイアウトの中で**左側**に位置します！
ここは、レイアウトの中で**左側**に位置します！
</div>
<div style="--fw: 2;">

# 右の子要素
同じくここは**右側**です！
同じくここは**右側**です！
</div>
</div>

# 下側のゾーン
ここはレイアウトで**下側**に位置します！フッターやまとめの文を挿入できます。

使い方

CSSは一度編集して保存してしまえば基本的に追編集する必要はないです。そのままだと背景色はつきませんが、確認したい場合はコメントアウトされている部分を解除してみてください。

CSSができたら、mdファイルのスライドの中でレイアウトを変更したい場所で下に示すそれぞれのコードを記述すればOKです。

classはいくつか用意しました。親要素*1のclassは、次の種類を指定できます。それぞれ詳しく見ていきます。

flex sa

余白がまわりに生じます（中央の余白の半分ずつ）。
子要素の幅は自動でいい感じになります。

• 親要素：<div class="flex sa">
• 子要素はそれぞれdivタグで囲む（styleは属性書いておいても問題ないが関係ない）

flex saレイアウト（カラー付き）

flex saレイアウト

ちなみに、saは水平方向をそろえる「justify-content」の値、「space-around」の略です。

mdファイルのコード

# 上側のゾーン
ここはレイアウトの中で**上側**に位置します！ヘッダーとして使ったり、タイトルなどをつけられます。
<div class="flex sa">
<div>

# 左の子要素
ここは、レイアウトの中で**左側**に位置します！
ここは、レイアウトの中で**左側**に位置します！
ここは、レイアウトの中で**左側**に位置します！
</div>
<div>

# 右の子要素
同じくここは**右側**です！
同じくここは**右側**です！
</div>
</div>

# 下側のゾーン
ここはレイアウトで**下側**に位置します！フッターやまとめの文を挿入できます。

flex sb

子要素が両端揃えになり、余白がまわりに生じません。
子要素の幅は自動でいい感じになります。

• 親要素：<div class="flex sb">
• 子要素はそれぞれdivタグで囲む（style属性は書いておいても問題ないが関係ない）

flex sbレイアウト（カラー付き）

flex sbレイアウト

ちなみに、sbは水平方向をそろえる「justify-content」の値、「space-between」の略です。

mdファイルのコード

# 上側のゾーン
ここはレイアウトの中で**上側**に位置します！ヘッダーとして使ったり、タイトルなどをつけられます。
<div class="flex sb">
<div>

# 左の子要素
ここは、レイアウトの中で**左側**に位置します！
ここは、レイアウトの中で**左側**に位置します！
ここは、レイアウトの中で**左側**に位置します！
</div>
<div>

# 右の子要素
同じくここは**右側**です！
同じくここは**右側**です！
</div>
</div>

# 下側のゾーン
ここはレイアウトで**下側**に位置します！フッターやまとめの文を挿入できます。

flex fw

子要素の幅を自分で指定する。

• 親要素：<div class="flex fw">
• 子要素はそれぞれdivタグで囲み、style属性として変数--fwを整数で指定する
  • この数値が適用する子要素の幅の比率になる
  • 変数--fwを省略する場合は、その子要素の幅の比率は１になる

flex fwレイアウト（カラー付き）

flex fwレイアウト

ちなみに、fwはFlexBoxの子要素の幅（width）の略です。

mdファイルのコード

# 上側のゾーン
ここはレイアウトの中で**上側**に位置します！ヘッダーとして使ったり、タイトルなどをつけられます。
<div class="flex fw">
<div style="--fw: 3;">

# 左の子要素
ここは、レイアウトの中で**左側**に位置します！
ここは、レイアウトの中で**左側**に位置します！
ここは、レイアウトの中で**左側**に位置します！
</div>
<div style="--fw: 2;">

# 右の子要素
同じくここは**右側**です！
同じくここは**右側**です！
</div>
</div>

# 下側のゾーン
ここはレイアウトで**下側**に位置します！フッターやまとめの文を挿入できます。

応用アレンジ例

３段組み

２段組み以外にもできます。divを増やすのみです。

３段組みのレイアウト例

mdファイルのコード

# 上側のゾーン
ここはレイアウトの中で**上側**に位置します！ヘッダーとして使ったり、タイトルなどをつけられます。
<div class="flex sa">
<div>

# 左の子要素
ここは、レイアウトの中で**左側**に位置します！
ここは、レイアウトの中で**左側**に位置します！
ここは、レイアウトの中で**左側**に位置します！
</div>
<div>

# 中央の子要素
ここは**中央**です！
3段組みなどもできます。
</div>
<div>

# 右の子要素
同じくここは**右側**です！
同じくここは**右側**です！
</div>
</div>

# 下側のゾーン
ここはレイアウトで**下側**に位置します！フッターやまとめの文を挿入できます。

画像の配置

もちろん画像も置けます。この例ではfwを使っています。

画像のレイアウト例

mdファイルのコード

# 上側のゾーン
ここはレイアウトの中で**上側**に位置します！ヘッダーとして使ったり、タイトルなどをつけられます。
<div class="flex sa">
<div style="--fw: 1;">

![h:200](画像のパス)
</div>
<div style="--fw: 3;">

# 右の子要素
同じくここは**右側**です！
同じくここは**右側**です！
</div>
</div>

左揃え

ただ単に左に揃えるには、親要素のclassに「flex」のみを指定します。

左揃えのレイアウト例

# 上側のゾーン
ここはレイアウトの中で**上側**に位置します！ヘッダーとして使ったり、タイトルなどをつけられます。
<div class="flex">
<div>

![h:200](画像のパス)
</div>
<div>

# 右の子要素
同じくここは**右側**です！
同じくここは**右側**です！
</div>
</div>

その他のjustify-content

今回はよく使う例として、FlexBoxの子要素の水平方向の並べ方を指定する「justfy-content」の値を「space-around」と「space-between」にしましたが、そのほかにも指定することができます（center、space-evenlyなど）。それらを適用してみたくなったら、CSSに新しく追加してみてください。

困ったときは？

トラブルシューティングです。上手く適用されない、困ったときは参考にしてみてください。

まずはコピペしたものと同じように設定できているか確認してみてください。

何が何だかわからない場合

まずはコピペして自分の環境で試してみてください。
また、CSSのコメントアウト*2を解除してみると（「Ctrl」+「/」）、色がついて違いがわかりやすくなると思います。

縦揃えになってしまう、何かが変

すべてのHTMLタグのすぐ下の行を空行にしてみてください。そうでないとうまく認識されないようです。（ややこしいですが、HTMLタグのすぐ下の行がHTMLタグの場合は問題ないようです。）

レイアウトが大きく崩れる

divタグを都度適切に閉じているか（</div>があるか）確認してみてください。子要素ごとに閉じ、親要素は最後に閉じます。
また、divタグとdivの閉じタグの数は同じになります。

CSSについて、「{}」や「.」、「,」、「:」、「;」など、紛らわしいものが多いので注意です。

変更しても適用されない、変化がない

CSSファイルの場合は、保存してください。

mdファイルの場合は、何か別の文字を入力してみてください。再読み込みされると思います。

<div>タグなどが文字としてそのまま出力されてしまう

タグがそのまま文字として見えている場合は、次を試してみてください。
うまくいくことがあります。

• タグの前後に空行を挿入する
• タグの前後の空行を削除する
• タグの前に半角スペースを挿入する
• タグの前の半角スペースを削除する

さらに便利に...

ここまで使うと、HTMLタグをつけるのが面倒になってくると思います。
そこで、HTMLをコマンドで一発で指定できるような方法を次はまとめてみます！

briboo-pc.hatenablog.jp

*1:ここでは、一番最初に記述するdivタグのこととしています。ちなみに子要素は親要素の中で記述するdivタグです。

*2:/*と*/で囲まれた部分