---
url: "/ja/emailify/design/borders.md"
description: "レイアウト要素に枠線を適用したり、コンテンツレイヤーの間に区切り線を挿入したりできます。"
---

# メールレイアウトに枠線とコンテンツの区切り線を追加する

> レイアウト要素に枠線を適用したり、コンテンツレイヤーの間に区切り線を挿入したりできます。

## レイアウト要素に枠線を追加する {#adding-border-strokes-to-your-layout-elements}

[Video](/assets/videos/emailify/design/adding-borders.mp4)

メールデザインのレイヤー（Row、Column、Buttonなど）に実線の枠線を追加するには、レイヤーをクリックしてFigmaの線を適用します。これは、Emailifyからエクスポートされる最終的なHTMLにCSSの枠線として自動的に含まれます。

枠線とレイヤーの内側のコンテンツの間にゆとりを持たせるには、枠線を適用したあとに、そのレイヤーに[余白を適用する](/ja/emailify/design/padding)ことを検討してください。

> **Warning:** **メールクライアントはグラデーションの枠線に対応していません**。Figmaの線にグラデーションの塗りを使うと、最終的なHTMLエクスポートではグラデーションの最初の単色で代替表示されます。

## コンテンツレイヤーの間に区切り線を追加する {#adding-divider-lines-between-your-content-layers}

[Video](/assets/videos/emailify/design/add-divider-lines.mp4)

メールレイアウトのColumn内にあるコンテンツレイヤーの間に区切り線を追加する必要がある場合は、Emailify専用の区切り線要素を追加できます。「Column」レイヤーをクリックし、プラグイン下部にあるQuick Addのドロップダウンメニューから「Divider」項目を選択して、**Add +** ボタンをクリックすると、区切り線のレイヤーがColumnに挿入されます。

区切り線レイヤーをColumnに追加したら、レイヤーパネルでレイヤーをドラッグ＆ドロップして、どのレイヤーの間に配置するかを並べ替えられます。また、Figmaのレイヤープロパティパネルでレイヤーの**Height**を調整してサイズを変えたり、Figmaでレイヤーの**Fill**を任意の単色に変更して背景色を調整したりできます。

> **Warning:** **メールクライアントはグラデーションの枠線に対応していません**。区切り線にグラデーションの塗りを使うと、最終的なHTMLエクスポートではグラデーションの最初の単色で代替表示されます。

### 区切り線レイヤーに内側の余白を追加する {#adding-inner-padding-to-your-divider-line-layers}

[Video](/assets/videos/emailify/design/divider-padding.mp4)

**Settings**パネルを開いた状態でメール内のEmailifyの区切り線レイヤーを選択し、**Inner Padding**トグルを有効にして、選択した区切り線レイヤーに適用したい余白の値を入力すると、区切り線に内側の余白を任意で追加できます。

これにより、HTMLとして出力されるときに区切り線レイヤーの内側に「内側の」余白が追加されます。Column内のほかのレイヤーに影響を与えずに、特定のテキストレイヤーの余白の値を指定できます。

> **Tip:** **Mobile Padding**トグルを有効にして、選択した区切り線レイヤーに適用したい余白の値を入力すると、モバイルでEmailifyの区切り線レイヤーの余白を任意で上書きすることもできます。この設定は、HTMLメールをモバイルで表示したときにのみ反映されます。

## レイアウト要素の背景に角丸を追加する {#adding-border-radius-for-backgrounds-to-your-layout-elements}

[Video](/assets/videos/emailify/design/column-border-radius.mp4)

RowまたはColumnのレイアウト要素に（線なしで）背景の塗りを設定している場合は、レイヤーをクリックし、Figmaの**Corner Radius**プロパティで角丸の値を設定すると、背景の角を丸くできます。

> **Note:** 画像ベースのコンテンツについてご注意ください。デスクトップよりも小さい角丸をモバイルに適用すると、画像の全体を保持するため、画像は四角いJPGとしてエクスポートされます。これにより、モバイルで小さい角丸を適用できますが、角丸はPNGに焼き込まれません。そのため、CSSの角丸に対応していないOutlookでは、画像の角が四角く表示されます。

> **Warning:** **メールクライアントは枠線の角丸に対応していません**。Figmaの線を含むレイアウト要素に角丸を使うと、最終的なHTMLエクスポートでは角の丸くない四角い枠線で代替表示されます。

### 線と角丸を併用する際の重要な注意事項 {#important-notes-on-using-border-radius-with-strokes}

角丸は、線も適用されている**Column**レイヤーであれば確実に機能します。ただし、**Row**レイヤーはHTMLのテーブルであり、（残念ながら）テーブルは線の角丸に対応していないため、Rowレイヤーでは機能しません。

残念ながら、Outlookはどのバージョンでも[角丸に対応していない](https://www.caniemail.com/features/css-border-radius/)ため、設定にかかわらず、これらのクライアントでは常に四角い角で代替表示されます。

最良の結果を得るには、RowやWrapperではなく、線のあるEmailifyの**Column**レイヤーに直接角丸を適用してください。ただし、どのバージョンのOutlookで表示しても角丸は*表示されない*ことに注意してください。