Marpでロゴ挿入

Note用記事として、Marpを使用してロゴを挿入

Transcript

1. Marp スライドのロゴ表示 ロゴ配置方法 ヘッダー右上にロゴを配置するには、 ::after 疑似要素とCSS を利用 します。
2. 実装コードとイメージ 実装イメージ: ヘッダーにロゴが表示されます。 （通常、ヘッダーにテキストがある場合はそれと共に表示されます） /* ヘッダー右上にロゴを配置 */ header::after { content: ""; display: block; position: absolute; right: 25px; top: 10px; width: 250px; height: 80px; background: url("https://raw.githubusercontent.com/marp-team/marp/master/marp.png") no-repeat center; background-size: contain; }
3. CSS 解説とまとめ header::after : ロゴ表示用のコンテナを生成。 position: absolute; right: 25px; top: 10px; : 右上に配置。 width: 250px; height: 80px; : ロゴサイズを指定。 background : ロゴ画像を指定し、表示方法を調整。 url(...) : 画像パス（今回はMarp チームのロゴURL ） 。 no-repeat center : 画像を中央に1 つだけ表示。 background-size: contain; : アスペクト比を保ちつつフィット。