🛝

Marpで企業ロゴが入ったスライドを作成する

2025/02/08に公開

CSS

Marp

tech

ベースレイアウト

gaiaテーマとyKicchan様が作成したmarpテンプレートリポジトリを使用しています。

企業ロゴの配置方法

企業ロゴをヘッダーの右上に配置するには、::after 疑似要素を活用した CSS を使用します。

実装

/* ヘッダーの右上に企業ロゴを配置 */
header::after {
  content: "";
  display: block;
  position: absolute;
  right: 25px; 
  top: 10px; 
  width: 50px;
  height: 50px;
  background: url("./images/icon.png") no-repeat center;
  background-size: contain;
}

実装イメージ

ヘッダーに文字列あり

ヘッダーを' 'にすることでロゴだけ表示できます

各要素の解説

このCSSでは、header::after 疑似要素を使用して、企業ロゴを ヘッダーの右上 に適切に配置しています。

1. `header::after`の役割

header::after {
  content: "";
  display: block;
}

::after 疑似要素を利用し、header 内に追加の要素を作成。
content: ""; で要素を有効化。
display: block; を指定し、width や height を適用可能にする。

2. `position: absolute;` でロゴの位置を固定

position: absolute;

absolute にすることで、header 内の特定の位置にロゴを配置可能。

3. ロゴを右上に配置

right: 25px;
top: 10px;
width: 50px;
height: 50px;

4. `background` プロパティでロゴ画像を設定

background: url("./images/icon.png") no-repeat center;
background-size: contain;

background でロゴを適用し、中央に配置。
no-repeat で繰り返しを防ぐ。
background-size: contain; で適切なサイズ調整。

スライドごとの画像設定方法

index.mdと同じ階層の./images配下にicon.pngを格納します。
./hoge配下のスライドではアイコンB、demo配下のスライドではアイコンAヘッダー部の画像で表示することができます。

.
├── src
│   ├── demo
│   │   ├── images
│   │   │   └── icon.png ← アイコンA
│   │   └── index.md
│   ├── hoge
│   │   ├── images
│   │   │   └── icon.png ← アイコンB
│   │   └── index.md 
│   └── template
│       └── images
└── themes
    ├── global.css
    ├── index.css
    └── utility.css

おわりに

この実装により、Marp のスライドで統一感のあるデザインを維持しつつ、ヘッダーにロゴを固定配置できます。

プロパティ	役割
`header::after`	疑似要素としてロゴ用のコンテナを作成
`position: absolute;`	`header` 内で右上に固定配置
`right: 25px; top: 10px;`	ヘッダーの `padding` に合わせて調整
`width: 50px; height: 50px;`	ロゴの大きさを固定
`background: url("./images/icon.png") no-repeat center;`	ロゴ画像を適用
`background-size: contain;`	ロゴの縦横比を維持しながらフィット