💗

Slidevで使ったStyleまとめ

2021/10/11に公開

最近？登場したSlidev
私がスライドを装飾する時に使ったStyleの書き方をまとめました

Slidevとは？
エンジニア向けのプレゼンテーションツールです
Markdownをベースにスライドを作成することができます
Vueを埋め込んだりすることもできます
この記事がとても分かりやすくまとまっていたので、
読むことをオススメします

Slidevで見た目を調整する時に使ったstyleを紹介します

文章の修飾

Markdown記法（**　**、＃＃など）で書いた部分を修飾するにはタグで囲む必要があるのですが
挟み方に注意が必要です

<div class="title">
**文章の修飾**
</div

これだと**は効かないので、改行を入れる必要があります

<div class="title">

**文章の修飾**

</div>

特定の文章を修飾したい場合はdivタグで囲ってstyleを使うことで実現できました

<div class="title">

**文章の修飾**

</div>

<div class="content">
ここに記載した文章だけ中央にしたい
</div>

<style>
.content {
  text-align: center;
  font-size: 22pt
}
</style>

文字全てをいじりたい時は、pでcssを書くとできます

liの装飾

ol {
  margin-left: 30%;
  margin-top: 10%;
  font-size: 22pt
}

任意の場所（中央）に持ってくるのに苦労しました
text-align: center;とかも試しましたが、上のやり方が一番綺麗にできました

ulも同じ方法で装飾することができます

ul {
  margin-left: 30%;
  margin-top: 10%;
  font-size: 22pt
}

画像の装飾

画像はかなり苦労しました・・
cssの方からいじろうとすると色々と面倒なことをしないといけないみたいです

<div class="img1"></div>
<div class="img2"></div>

<style>
.img1{
  background-image:url(/img1.png);  /* 画像のURLを指定 */
  background-repeat:  no-repeat;  /* 画像の繰り返しを無しに指定 */
  background-size: 300pt 250px;  /* 画像の大きさを指定 */
  width: 300pt;  /* divの大きさを指定 */
  height: 250pt;  /* divの大きさを指定 */
  margin-left: 0%;
  margin-top: 5%;
}

.img2{
  background-image:url(/img2.png);  /* 画像のURLを指定 */
  background-repeat:  no-repeat;  /* 画像の繰り返しを無しに指定 */
  background-size: 300pt 250px;  /* 画像の大きさを指定 */
  width: 300pt;  /* divの大きさを指定 */
  height: 250pt;  /* divの大きさを指定 */
  margin-left: 50%;
  margin-top: -38.5%;
}
</style>

本当はもっと良い方法があるかもしれません
研究が必要ですね・・・

cssの方からいじるだけではSlidevの良いところが活かせていないので、
Vueやコードの挿入やTwitterの埋め込みなど、Slidevでしかできないことをやってみるのがいいと思います

文章の修飾

liの装飾

画像の装飾

Discussion