Slide 1

Slide 1 text

Marp スライドのロゴ表示 ロゴ配置方法 ヘッダー右上にロゴを配置するには、 ::after 疑似要素とCSS を利用します。

Slide 2

Slide 2 text

実装コードとイメージ 実装イメージ: ヘッダーにロゴが表示されます。 (通常、ヘッダーにテキストがある場合はそれと共に表示されます) /* ヘッダー右上にロゴを配置 */ 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; }

Slide 3

Slide 3 text

CSS 解説とまとめ header::after : ロゴ表示用のコンテナを生成。 position: absolute; right: 25px; top: 10px; : 右上に配置。 width: 250px; height: 80px; : ロゴサイズを指定。 background : ロゴ画像を指定し、表示方法を調整。 url(...) : 画像パス(今回はMarp チームのロゴURL ) 。 no-repeat center : 画像を中央に1 つだけ表示。 background-size: contain; : アスペクト比を保ちつつフィット。