ぶりぶーです。今回は、スライドをMarkdown記法で作成することができるVS Codoの拡張機能「Marp for VS Code」にて、文字のサイズをカスタマイズする方法について解説したいと思います！
想定環境
- VS Code
- Marp for VS Code
準備
文字の大きさをカスタマイズするには、大きく分けて次の２パターンがあります。
- Markdownファイルのみの方法
- CSSファイルも併せて用いて変更する方法
どちらの方法が適するか、ケースを考えてみました。
1. Markdownファイルのみの方法
向いているケース
- CSSファイルを使わずお手軽に実現したい
- 変更箇所が少ない見通しである
2. CSSファイルも併せて用いて変更する方法
向いているケース
- 既にMarkdownファイルにCSSファイルを適用させている
- 変更箇所が多く、記述を楽にしたい
- 文字の大きさを後から一括で変更する可能性がある
- 文字サイズ以外にも様々なカスタマイズをしたい
参考記事
CSSファイルを適用するとカンタンにできるようになることの例
方法
1. Markdownファイルのみの方法
まずは、スライド作成中のmdファイルのみでフォントサイズを変更してみます。
次のコードをmdファイル中にコピペしてみてください。
デフォルトの大きさだよ
<div style="font-size: 2em">
２倍の大きさだよ
</div>
デフォルトより２倍大きくなりました。
解説とカスタマイズについては、次のCSSファイルの方法の下にあります（こちらからも飛べます）。
2. CSSファイルも併せて用いて変更する方法
CSSファイルに以下のコードをコピペします。
fontsize_up {
font-size: 2em;
}
保存した後、Markdownファイルに次のように追記してください。
デフォルトの大きさだよ
<div class="fontsize_up">
２倍の大きさだよ
</div>
これでデフォルトより２倍大きくなったはずです。
仕組み
どちらの方法も、font-sizeを2emに指定しています。
Markdownファイルのみの方はdivタグ内を直接指定しています。
CSSファイルも併用する方はfontsize_upクラスを指定しています。
カスタマイズ
文字の大きさを変更してみましょう。
どちらの方法でも、コードfont-size: X;のXを変更すればOKです。
単位
画面に表示させるための様々な単位が使えます。
ここではよく使うものを載せておきます*1。
| 単位 | 意味 | 基本的な依存関係 |
| px | モニター画面上のピクセルの個数 | デバイス画面の解像度に依存 |
| em | 親要素（サイズ変更前）の文字サイズの何倍か | 親要素の文字の大きさ |
| %(半角) | 100% = 1em |
例
まわりの文字より1.5倍の大きさにしたい
font-size: 1.5em;
どうせなら色も変えたい
同じようにcolor: red;などとすれば適用できます。
強調のために装飾をしたい場合は、次の記事で詳しく解説しています。
ちなみに大きさはそのままで、色を変える場合は次の記事を見てみてください。
*1:簡単な説明にしています。複雑にdivタグを使っていたりすると異なることがあるかもです。
