ぶりぶーです。スライドをMarkdown記法でラクラク作成できる、VS Codeの拡張機能の「Marp」。今回は、スライドで使う文字の色を自由に変更する方法を書きます！
↓「Marp」とは？という方に。
環境
- Windows11
- VS Code
- TeX Live 2023
前提
文字色を変えるには、MarkdownファイルだけでなくCSSファイルも併せて使うと便利です。
Markdownファイルでスライドの骨格を、CSSファイルでスライドのデザインをカスタマイズする仕組みです。
CSSファイルを適用していない場合は、次の記事を参考にして適用してみてください。
また、強調したい文章の色やスタイルを変更したい場合は、次の記事を参考にした方が便利です。
方法
CSSファイル
まずはCSSで、HTMLのクラスに対してデザインを変更するコードを書きます。
とりあえず次のコードをコピペしてみてください。
.ok {
color: red;
}
できたら保存します。
mdファイル
次にMarkdownファイルにて次のコードを書きます。今回は例として、スライド内でOKな場所を赤色にすることにしてみました。
<div class="ok">
赤色になっていればOK！
</div>
いかがでしょうか。赤色になっているはずです！
このように、色を変えたい文章をclassを指定したdivタグで囲めばOKです。
もしうまく色が赤色にならない場合は、divタグの前後に空行を入れてみてください。
仕組み
- divタグで囲まれた文章のclass属性が「ok」
- CSSファイルにてclass属性を表す「.」、class属性の名称が「ok」である記述の指示に従う
- 「color: 」：フォントの色、「red」：赤色 に従い、mdファイルの「ok」class属性内のフォントが赤色になる
応用
もっといろんな色を使いたい
CSSファイルで新たなタグを記述し、同じclass名でその都度mdファイル内の文字をdivタグで囲めば適用できます。
colorに適用できる色の書式
- 色名
- 様々なキーワードを指定できます！詳しくはこちらに記載があります。
- 例：「blue」、「yellow」、「mediumspringgreen」、「tomato」
- 16進数表記
- red、green、blueの順に00~ffの範囲で指定します。
- 例：「#123456」、「#00cdef」
- RGB表記
- red、green、blueの順に0~255の範囲で指定します。
- 例：「rgb(0 100 255)」
- HSL表記
- 色相環、彩度、明度の順にそれぞれ0~360、0~100%、0~100%で指定します。
- 例：「hsl(200 100% 50%)」
他にも指定方法があるようですが、以上の表記がよく使われます。
もっと異なる色をたくさん使いたい
たった１か所変えるだけでCSSで定義していては大変なので、Markdownだけで色を変えたい場所のみ指定してみます。
2023/12/8更新
divタグ*1でも書けますが、より簡潔なfontタグを使用する方法に更新しました。
Markdownファイル
<font color="green">
緑色の文字ですね
</font>
このように、fontタグにcolor属性を指定し、文字色を直接変更することができます。
ただし、この方法だと色の使いまわしはできず、個別に色を指定する必要があるのでメンテナンス性は低い方法です。
ここだけはこの色にしたい！という場合に特に適しています。
頻繁に使う場合は、ユーザースニペットに登録しても良いでしょう。
"fontcolor": {
"prefix": "fontcolor",
"body": [
"<font color=\"$1\">",
"$2",
"</font>",
"$3",
]
},
ユーザースニペットについては次の記事を参考にしてみてください。
コマンド操作でコードを呼び出せて、「Tabキー」でコード内を移動できる時短機能です！
*1:<div style="color: green;">文字</div>
