ぶりぶーです。今回は、Markdown記法でプレゼンスライドを作成できるVS Codeの拡張機能「Marp」での、タイトルスライドの作成方法について解説します！
タイトルスライドはよく作る機会が多いと思いますが、Marpには現状、タイトルスライドを作成するコマンドがありません。
そこで、簡単に作れるように解説していこうと思います。
想定環境
- VS Code
- Marp for VS Code
作成方法
タイトルスライドを作成するには、デザインを大きく変更する必要があります。
デザインをカスタマイズする方法は、大きく分けて２種類の方法があります。
- ① オリジナルCSSファイルを適用して編集
- ② Markdownファイルに直接記述
今回は、①のオリジナルCSSを用いる方法を採用します。②の方法より簡潔な記述や容易な使いまわしをすることが可能になります。
なお、オリジナルのCSSを適用すると、次のようなことも楽にできるようになります。
CSSでカンタンにできるようになることの例
準備
まずはオリジナルCSSを適用して、カスタムテーマを使う準備をします。
CSSの適用ができていない場合は、次の記事を参考にして適用してみてください。
既に設定している場合は次に進んでOKです。
方法
目指すスライド
今回は、次のようなタイトルスライドを作成することを目標とします。
デザインは次の節で少し変更できるので、とりあえず作ってみましょう！
CSSファイルの編集
カスタムテーマを設定したCSSファイルの中に、次のコードをコピペして追加してください。
.title h1 { /* タイトル文字のカスタム */
text-align: center; /* 中央揃え */
line-height: 1.6em; /* 文字と余白の１文の高さ */
}
.info { /* 基本情報のカスタム */
text-align: center; /* 中央揃え */
margin-top: 1.6em; /* タイトルとの余白 */
}
Markdownファイルの編集
スライドの最初のページに次の記述をコピペしてください。
<div class="title">
# ほげほげのほげほげに関するタイトル
</div>
<div class="info">
yyyy/mm/dd
ほげほげ学会
ほげ山ほげ太郎
</div>
これで目標としていたスライドができたはずです！
-
タイトルスライド：（非表示），次のスライド：p. 1
タイトルスライドに次のコードを追記
<!-- paginate: true-->
<!-- _paginate: skip --> -
タイトルスライド：p. 1，次のスライド：p. 2
タイトルスライドの次のスライドに次のコードを追記
<!-- paginate: true-->
paginate：ページ番号（true：つける、skip：そのスライドはカウントせず非表示）
接頭辞_：そのスライドのみ
カスタマイズ
もう少し見た目を変えたい場合は、CSSファイルを編集します。
例１．タイトルの色や文字の大きさを変える
.title h1の{}の中に以下を追記します。
font-size: 2em; /* 文字の大きさ */
color: red; /* 文字の色 */
※1em＝１文字の大きさなので、2emは今の文字の２倍の大きさになります。
例２．情報を右揃えにする
.infoの{}の中に以下を書き換えます。
text-align: right; /* 右揃えに変更する */
例３．タイトルの下に直線を引く
.title h1の{}の中に以下を追記します。
border-bottom: 1px solid black; /* 要素の下の線 太さ タイプ 色 */
padding-bottom: 0.8em; /* タイトル文字と線の余白 */
その他
また、次の記事の内容を応用すれば、より自由度の高いスライドを作ることができます！
文字の書式をカスタマイズする
画像を使う
２段組みにする
もっと高度なデザイン
以上のようなカスタマイズを組み合わせればさらに様々な表現できます！
また、ここでは紹介しきれていないCSSの文法を学べばデザインの幅は大きく拡がります。
しかし、CSSやHTMLを学んだことがない場合、しっかり学ぶのには労力がいると思います。
簡潔なスライドを作りたいのではなく、凝ったデザインをしたい、する必要がある場合は、CSSを学習するかPower Pointなどのソフトを使って作成した方がより良いと個人的には感じています。
