Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Marpでスライドを左右に分割する方法

Last updated at Posted at 2021-12-06

Marpとは

マークダウン形式でプレゼン資料を作成できるツール。
日本人の方が開発しているらしい。[1](応援したい)

スライドの左右分割

現状Marpに標準搭載されている機能のみでは実現できないため、CSSを設定し、HTMLを直接記述することで対応します。
CSSの内容については末尾に記載した引用元をご確認ください。[2]

CSS

.split {
  display: table;
  width: 100%;
}
.split-item {
  display: table-cell;
  padding: 0px;
  width: 60%;
}
.split-left {
  position: relative;
}
.split-left__inner {
  height: 100%;
  position: fixed;
  width: 50%;
}
.split-right {
  position: relative;
}
.split-right__inner {
  height: 420px;
}

HTML


<div class="split">
  <div class="split-item split-left">
    <div class="split-left__inner">

- 以下のQUBO形式のベイズ線形回帰モデルを獲得関数としたBBO手法
  $$ \tilde{f}(\vec{\bm{x}}\mid\vec{\bm{\alpha}}) = a_0 + \Sigma_{i}a_i x_i + \Sigma_{i < j} a_{ij} x_i x_j$$
- 離散変数を含むBBOに対するベイズ最適化手法として提案されている

    </div>
  </div>
  <div class="split-item split-right">
    <div class="split-right__inner">
      <img src="../latex/BOCS.jpg">
    </div>
  </div>
</div>

結果

結果.png

注意

  • inner要素としてマークダウンやkatexを利用したい場合は、<div>および</div>の前後は必ず空行を挿入しなければいけないようです。

参考

[1] https://github.com/yhatt
[2] https://webdesignday.jp/inspiration/technique/css/3962/

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Qiita Conference 2025 will be held!: 4/23(wed) - 4/25(Fri)

Qiita Conference is the largest tech conference in Qiita!

Keynote Speaker

ymrl、Masanobu Naruse, Takeshi Kano, Junichi Ito, uhyo, Hiroshi Tokumaru, MinoDriven, Minorun, Hiroyuki Sakuraba, tenntenn, drken, konifar

View event details
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?