神野さんに言われました。

読者です 読者をやめる 読者になる 読者になる

神野さんに言われました。

AIの勉強をしています @sesenosannko

スライド作成ツールMarpで僕が使っているCSS

こんにちは。さんこです。

なんとなくスマートだなと思ったので、最近はMarpというmarkdownのスライド作成ツールを使っています。 開発コンセプトにもある通り、環境構築がほぼ全く必要ないのも良いところです。

technica-blog.jp

Marpに限らずmarkdown自体が気軽に書けるということをテーマとして持っていると思うので、少なくともデフォルトでは表現出来ることが乏しいと感じることもあります。 markdownにはhtmlを埋め込むことができるので、僕はCSSをかなり追加して使っています。 markdownのコンセプトからは外れていそうですが。 そこで、僕がMarpで使っているCSSを少しまとめておきます。 CSS自体も普段あまり使わないので、もっと良い書き方があれば教えてください。


基本

markdownにはhtmlタグを書けますが、htmlタグ内にはmarkdown記法が使えないので少し不便です。 そこで、弟要素を指定するという方法が使われるようです。

下の例は中央揃えをする例です。 このように「.centerize + *」と指定すると、pillarクラスの直後にある全要素にcssを適用することができます。 htmlタグの後は1行空けないといけないようなので注意してください。

markdownの記法がhtmlでどのように表現されるかは以下のサイトが参考になります。

md2pdf.higty.xyz

markdown

<div class="centerize"></div>

中央に揃えたい文章

css

.centerize + * {
  text-align: center;
  }


右上の見出し

スライドの右上に見出しがあると便利なことが多いです。 Marpではスライドの内容ごとに親要素のサイズが決定されており、スライド領域内で絶対指定をする方法が僕はわかりませんでした。 ということで、cssのcals関数を用いて無理矢理右上に配置されるように指定しています。

markdown

<div class="pillar"></div>

見出し

CSS

.pillar + p {
  color: #1A3353;
  position: absolute;
  top: calc(50% - 360px);
  right: -40px;
  float: right;
  }


画像のフロート

スライドで縦長の画像を右に寄せて、その左に文章を書きたいということが良くあります。 その際にはfloatを使うことで文章を回り込ませることができます。

markdown

<div class="img-left"></div>

![サンプル画像](image/image1.png)

CSS

.img-left + p img {
  padding-right: 50px;
  float: left;
  }

.img-right + p img {
  padding-left: 50px;
  float: right;
  }


表のスタイル

表のスタイルは非常に悩ましい問題の一つです。 正直、他のサービスで使った表を画像で貼り付けるのが最善手だと思います。 表のボーダーを消したかったんですが、なぜか色々と試してもできませんでした。 方法を知っている方は教えてください。

今回は格好悪い1行ごとの色分けを無くしたのと、一番上の見出しの行を無くしただけです。

CSS

table, th, td {
  background-color: #ffffff;
  }

th {
  display: none;
  }


おわり

その他にもセンタリングや、画像のサイズ変更などに同様の手法を使っています。 正直面倒なので、Marpは僕に向いていないかなと思います。 他のスライド作成アプリも試してみる予定です。