【n番煎じ】Marpを使ってスライド作成したけど画像の配置が難しかった話【css】
はじめに
Marpを用いてmarkdownでスライドを作成する方法の備忘録です．css完全に理解した気持ちでした．．．
現在，私は画像処理に関連する研究を行っています．当初は進捗報告のスライドをMarpで作る予定でしたが，とある理由により断念しました．画像処理の研究では具体例的な定性評価のために画像を表示することが不可欠です．MarpではCSSを用いて画像レイアウトを決定するためcssを完全に理解することが必要です．画像配置の難しさから，私はMarpによるスライド作成を諦めました．
Marpの利点
テンプレートに従うだけのため，Googleフォームに解答を入力するような感覚でスライド作成ができます．実質文字を打つだけです．
Marpの欠点
GUIでスライドレイアウトを操作しないため画像を配置することが非常に大変です．
Marpを始めよう
まずはVS Codeを用意してください．次に，以下の拡張機能をインストールしてください．
その次にMarpで作成した後に，エクスポートする形式を設定します．Marp for VS Codeの拡張機能の設定より以下の選択肢から選びます．
最後にMarpでスライド作成するための装飾としてcssを設定します．先ほどと同様にMarpの拡張機能設定より変更します．使用したいcssのパスを指定してください．
おすすめのcssは以下で紹介されているものです．Marpとしての使いかたやcssの機能などは以下記事をご参考ください．
css完全に理解した（してない）
私が画像配置のためにcssで奮闘した結果を以下に残します．Marpで使用するcssに以下を追加してください．
img[src*="#right1"] {
position: absolute;
right: 5%;
height: 250px;
aspect-ratio: auto;
width: auto;
top: 30%;
transform: translateY(-50%);
margin: 1em 0;
}
img[src*="#right2"] {
position: absolute;
right: 5%;
height: 250px;
aspect-ratio: auto;
width: auto;
top: 70%;
transform: translateY(-50%);
margin: 1em 0;
}
こちらの記事を参考に作成しました．スライドにおいて右側に縦で2枚画像を配置するためのコードです．
使用方法は以下のように画像を指定する際にフラグを合わせて記述します．
以下のように右寄せ縦二段で画像を配置します．縦方向の長さを絶対値で指定し，それに合わせて比率を保ったまま横方向の長さを調整するため横長の画像は不得手です．
終わりに
Marpは数式や表を綺麗に表現できるためたくさんの画像を使わないようなスライドであれば効率的に発表資料を作成することができます．私の研究分野では不向きでした．cssを完全に理解するには途方もない時間が必要です;;
css難しすぎるンゴ
Discussion