# Flex Messageのレイアウト

Flex Messageは、CSS Flexible Box（CSS Flexbox） (opens new window)の基礎知識を使って、複雑なレイアウトのメッセージを構築します。CSS FlexboxのFlexボックスがFlex Messageのボックスに相当し、CSS FlexboxのFlexアイテムがFlex Messageのコンポーネントに相当します。

ここでは、レイアウトを調整するためのプロパティや、ボックスに含めたコンポーネント（子要素）のサイズと位置合わせを調整する方法の概要を説明します。JSONスキーマについて詳しくは、『Messaging APIリファレンス』の「Flex Message」を参照してください。

ボックスの種類と主軸の向き
- ベースラインボックスの特徴
コンポーネントの幅と高さ
コンポーネントの位置
線形グラデーション背景
- 線形グラデーション背景の角度
- グラデーションの中間色
描画順序について

# ボックスの種類と主軸の向き

ボックスの種類は3種類あります。ボックスの種類によって主軸の向きが変わります。ボックスの種類は、ボックスのlayoutプロパティで指定します。

ボックスの種類	`layout`プロパティ	説明
水平ボックス	`horizontal`	主軸の向きは水平です。子要素を水平に配置します。交差軸の向きは垂直です。
垂直ボックス	`vertical`	主軸の向きは垂直です。子要素を上から下へ垂直に配置します。交差軸の向きは水平です。
ベースラインボックス	`baseline`	主軸の向きは水平ボックスと同じです。水平ボックスとの違いは、「ベースラインボックスの特徴」を参照してください。

交差軸とは？

交差軸とは、主軸に対して直角に交わる軸です。

# ベースラインボックスの特徴

ベースラインボックスは水平ボックスと同様に動作します。ただし、水平ボックスとは、以下の点で動作が異なります。

# 垂直方向の揃え位置

垂直方向の揃え位置がテキストのベースラインに固定されます。さまざまなフォントサイズのテキストが混在しても、ベースラインが揃うように垂直位置が調整されます。

なお、アイコンのベースラインは、アイコン画像の底辺です。

ベースラインボックス

# 使用できるコンポーネント

ボックスの種類によって、子要素として使用できるコンポーネントが異なります。

	ベースラインボックス	水平ボックス/垂直ボックス
ボックス	❌	✅
ボタン	❌	✅
画像	❌	✅
アイコン	✅	❌
テキスト	✅	✅
スパン（テキストの子要素として使用できます）	❌	❌
セパレータ	❌	✅
フィラー（非推奨）	✅	✅

✅：ボックスの子要素として使用できる、❌：ボックスの子要素として使用できない

# 使用できないプロパティ

ベースラインボックスの子要素では、以下のプロパティは使用できません。

gravityプロパティ
offsetBottomプロパティ

# コンポーネントの幅と高さ

positionプロパティをrelativeに設定したコンポーネントの幅または高さは、各コンポーネントのflexプロパティで決定されます。

# 水平ボックス内のコンポーネントの幅

水平ボックスでは、コンポーネントのflexプロパティに1以上の値を指定した場合は、その値をもとに、コンポーネントに余白が分配されます。水平ボックス内のコンポーネントでは、flexプロパティのデフォルト値は1です。

たとえば、水平ボックスに2つのコンポーネントがありflexプロパティの値が2と3であるとき、余白（以下の例では、ボックスの幅）が2：3に分割され、各コンポーネントに割り当てられます。

flexプロパティの例1

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "text",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        "wrap": true,
        "color": "#ff0000",
        "flex": 2
      },
      {
        "type": "text",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        "wrap": true,
        "color": "#0000ff",
        "flex": 3
      }
    ]
  }
}

flexプロパティに0を指定した場合は、そのコンポーネントの幅が維持されます。ただし、ボックスの幅を超える部分は表示されません。

以下の例では、ボックス内に3つのコンポーネントがあり、flexプロパティの値は0、2、3になっています。1番目のコンポーネントはflexプロパティの値が0であるため、含まれるテキスト「Hello」を表示できる幅が確保されます。そして、余白（以下の例では、ボックスの幅から1番目のコンポーネントの幅を除いた部分）が2：3に分割され、2番目、3番目のコンポーネントに割り当てられます。

flexプロパティの例2

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "text",
        "text": "Hello",
        "color": "#00ff00",
        "flex": 0
      },
      {
        "type": "text",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        "wrap": true,
        "color": "#ff0000",
        "flex": 2
      },
      {
        "type": "text",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        "wrap": true,
        "color": "#0000ff",
        "flex": 3
      }
    ]
  }
}

CSS Flexboxのflexとの対応について

水平ボックス内のコンポーネントのflexプロパティと、CSS Flexboxのflexは、以下のように対応しています。

flexプロパティに0を指定した場合：CSS Flexboxのflex: 0 0 auto;と同等のレイアウト
flexプロパティに0以上を指定した場合：CSS Flexboxのflex: X 0 0;と同等のレイアウト（Xはflexプロパティで指定した値）

# 垂直ボックス内のコンポーネントの高さ

垂直ボックスでは、コンポーネントのflexプロパティに1以上の値を指定した場合は、その値をもとに、コンポーネントに余白が分配されます。垂直ボックス内のコンポーネントでは、flexプロパティのデフォルト値は0です。

以下のFlex Messageでは、水平ボックスの中に2つの垂直ボックスが配置されています。さらに、左側の垂直ボックスには1つのテキストが配置され、右側の垂直ボックスに2つのテキストと3つのセパレータが配置されています。

flexプロパティの例5

このとき、各コンポーネントは次のようなルールでレイアウトされています。

左側の垂直ボックスが5行分の高さがあるため、右側の垂直ボックスも同じ高さになります。
右側の垂直ボックスには、2つのテキスト（各1行）と3つのセパレータだけでは埋められない余白が発生します。
2つのテキストのflexプロパティの値（2と3）をもとに、余白が2：3に分割され、各コンポーネントに割り当てられます。

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "wrap": true,
            "text": "TEXT\nTEXT\nTEXT\nTEXT\nTEXT"
          }
        ],
        "backgroundColor": "#c0c0c0"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "separator",
            "color": "#ff0000"
          },
          {
            "type": "text",
            "text": "flex=2",
            "flex": 2
          },
          {
            "type": "separator",
            "color": "#ff0000"
          },
          {
            "type": "text",
            "text": "flex=3",
            "flex": 3
          },
          {
            "type": "separator",
            "color": "#ff0000"
          }
        ]
      }
    ]
  }
}

CSS Flexboxのflexとの対応について

垂直ボックス内のコンポーネントのflexプロパティと、CSS Flexboxのflexは、以下のように対応しています。

flexプロパティに0を指定した場合：CSS Flexboxのflex: 0 0 auto;と同等のレイアウト
flexプロパティに0以上を指定した場合：CSS Flexboxのflex: X 0 auto;と同等のレイアウト（Xはflexプロパティで指定した値）

# ボックスの幅

ボックスの場合は、widthプロパティで幅を指定できます。%（親要素の幅を基準にした割合）またはピクセルで指定します。

なお、水平ボックス内のボックスにwidthプロパティを指定すると、flexプロパティは0に設定されます。

widthプロパティをピクセルで指定する場合

バブルの幅は、バブルを表示する端末の画面サイズによって異なります。バブル全体のレイアウトを調整するためにwidthプロパティをピクセルで指定すると、受信した端末によっては、予期せぬレイアウトになることがあります。画面サイズの影響を抑えるためにはflexプロパティを使用してください。

# ボックスの最大幅

ボックスの場合は、maxWidthプロパティで最大幅を指定できます。%（親要素の幅を基準にした割合）またはピクセルで指定します。

widthプロパティから算出されるボックスの幅が、maxWidthプロパティから算出されるボックスの幅よりも大きい場合、ボックスの幅はmaxWidthプロパティで指定した値に縮小されます。

# ボックスの高さ

ボックスの場合は、heightプロパティで高さを指定できます。%（親要素の高さを基準にした割合）またはピクセルで指定します。

なお、垂直ボックス内のボックスにheightプロパティを指定すると、flexプロパティは0に設定されます。

# ボックスの最大高

ボックスの場合は、maxHeightプロパティで最大高を指定できます。%（親要素の高さを基準にした割合）またはピクセルで指定します。

heightプロパティから算出されるボックスの高さが、maxHeightプロパティから算出されるボックスの高さよりも大きい場合、ボックスの高さはmaxHeightプロパティで指定した値に縮小されます。

# 画像のサイズ

Flex Messageの画像コンポーネントでは、sizeプロパティを用いて画像の幅をパーセンテージ、ピクセル、またはキーワードで指定できます。高さはaspectRatioプロパティで指定された縦横比を維持した状態で自動調整されます。

単位	説明
パーセンテージ	画像の幅を基準にした割合。0より大きい整数または小数を`%`で指定します。例：`50%`、`23.5%`。
ピクセル	0より大きい整数または小数を`px`で指定します。例：`50px`、`23.5px`。
キーワード	`xxs`、`xs`、`sm`、`md`、`lg`、`xl`、`xxl`、`3xl`、`4xl`、`5xl`、`full`のいずれかの値を指定できます。列挙した順にサイズが大きくなります。デフォルト値は`md`です。

# アイコン、テキスト、スパンのサイズ

Flex Messageのアイコン、テキスト、スパンのコンポーネントでは、sizeプロパティを以下の単位で指定できます。これらのコンポーネントでは、sizeプロパティはパーセンテージでは指定できません。

単位	説明
ピクセル	0より大きい整数または小数を`px`で指定します。例：`50px`、`23.5px`。
キーワード	`xxs`、`xs`、`sm`、`md`、`lg`、`xl`、`xxl`、`3xl`、`4xl`、`5xl`のいずれかの値を指定できます。列挙した順にサイズが大きくなります。デフォルト値は`md`です。

各コンポーネントのJSONオブジェクトの書き方については、『Messaging APIリファレンス』の「Flex Message」を参照してください。

# その他のコンポーネントのサイズ

ボタンや画像などのコンポーネントでは、flexプロパティとは異なるプロパティでサイズを指定できます。JSONスキーマについて詳しくは、『Messaging APIリファレンス』の「Flex Message」を参照してください。

# フォントサイズの自動縮小

Flex Messageのボタン、テキストのコンポーネントでは、adjustModeプロパティでshrink-to-fitを指定すると、テキストのフォントサイズが自動縮小されます。 adjustModeプロパティはベストエフォートで機能しますので、プラットフォームによって動作が異なる、あるいは動作しないことがあります。

フォントサイズの自動縮小

# コンポーネントの位置

ボックス内に余白がある場合、水平方向と垂直方向の位置合わせをコンポーネントごとに指定できます。

# 水平方向の位置合わせ

水平方向の位置合わせ方式をalignプロパティで指定できます。 alignプロパティは親要素のボックスに関係なく、常に水平方向（左右）の位置に影響します。以下のいずれかの値を指定します。

start：左揃え
end：右揃え
center：中央揃え（デフォルト値）

alignプロパティの例

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "align=start",
        "align": "start"
      },
      {
        "type": "separator",
        "color": "#ff0000"
      },
      {
        "type": "text",
        "text": "align=center",
        "align": "center"
      },
      {
        "type": "separator",
        "color": "#ff0000"
      },
      {
        "type": "text",
        "text": "align=end",
        "align": "end"
      }
    ]
  }
}

# 垂直方向の位置合わせ

垂直方向の位置合わせ方式をgravityプロパティで指定できます。 gravityプロパティは親要素のボックスに関係なく、常に垂直方向（上下）の位置に影響します。以下のいずれかの値を指定します。

top：上揃え（デフォルト値）
bottom：下揃え
center：中央揃え

注意

ベースラインボックスの子要素ではこの設定は無視されます。

gravityプロパティの例

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "wrap": true,
            "text": "TEXT\nTEXT\nTEXT\nTEXT\nTEXT"
          }
        ],
        "backgroundColor": "#c0c0c0"
      },
      {
        "type": "text",
        "text": "top",
        "gravity": "top"
      },
      {
        "type": "separator",
        "color": "#ff0000"
      },
      {
        "type": "text",
        "text": "center",
        "gravity": "center"
      },
      {
        "type": "separator",
        "color": "#ff0000"
      },
      {
        "type": "text",
        "text": "bottom",
        "gravity": "bottom"
      },
      {
        "type": "separator",
        "color": "#ff0000"
      }
    ]
  }
}

# ボックスのパディング

ボックスのパディングは、paddingAll、paddingTop、paddingBottom、paddingStart、paddingEndプロパティで指定します。ボックスのパディングは、ボックスの境界線と、子要素の間の余白のサイズを表します。サイズには、%（ボックスの横幅を基準にした割合）、ピクセル、またはnone、xs、sm、md、lg、xl、xxlのいずれかの値を指定できます。noneではスペースが設定されず、それ以外は列挙した順にサイズが大きくなります。

なお、paddingAllのほかに、paddingTop、paddingBottom、paddingStart、paddingEndも設定すると、paddingAllの設定が上書きされます。

paddingプロパティの例

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "hello, world"
          }
        ],
        "backgroundColor": "#ffffff"
      }
    ],
    "backgroundColor": "#ffd2d2",
    "paddingTop": "20px",
    "paddingAll": "80px",
    "paddingStart": "40px"
  }
}

なお、上のFlex Messageのテキストを変更すると、以下のようにレイアウトされます。

paddingプロパティの例

# ボックスの子要素と余白の配置

Flex Messageのボックスコンポーネントでは、子要素と余白の配置を以下のプロパティで指定できます。

主軸に沿った配置を指定するjustifyContentプロパティ
交差軸に沿った配置を指定するalignItemsプロパティ

親要素のボックスによって主軸と交差軸が変わります

justifyContentプロパティは主軸に、alignItemsプロパティは交差軸に沿った子要素の配置を指定します。親要素のボックスによって、主軸と交差軸の向きは変わってきます。

主軸と交差軸と書字方向

一方で書字方向（LTRまたはRTL）は、親要素のボックスに関係なく常に水平の向きにのみ影響を及ぼす、という点に注意が必要です。

# 主軸に沿った配置を指定する`justifyContent`プロパティ

justifyContentプロパティでは、子要素と余白の主軸に沿った配置を指定します。親要素が水平ボックスの場合、主軸の向きは水平です。親要素が垂直ボックスの場合、主軸の向きは垂直です。

flex-start：水平ボックスでは子要素を書字方向の始まり側に寄せます。垂直ボックスではボックスの上に寄せます。
center：子要素をボックスの中心にまとめて配置します。
flex-end：水平ボックスでは子要素を書字方向の終わり側に寄せます。垂直ボックスではボックスの下に寄せます。
space-between：子要素をボックスに均等に配置します。最初と最後の子要素は両端に配置します。余白は子要素と子要素の間に均等に配置されます。
space-around：子要素をボックスに均等に配置します。余白はすべての子要素の左右に半分ずつ配置されます。
space-evenly：子要素をボックスに均等に配置します。余白はすべての子要素の左右に均等に配置されます。

flex-start flex-center flex-end space-between space-around space-evenly

上記の図は以下を前提としています

親要素のボックスコンポーネントが水平ボックスである。
書字方向がLTRである。

たとえば上記のflex-startのFlex Messageを表現するには、以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "direction": "ltr",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "contents": [],
        "width": "40px",
        "height": "30px",
        "backgroundColor": "#00aaff",
        "flex": 0
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [],
        "width": "20px",
        "height": "30px",
        "backgroundColor": "#00aaff",
        "flex": 0
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [],
        "height": "30px",
        "width": "50px",
        "backgroundColor": "#00aaff",
        "flex": 0
      }
    ],
    "justifyContent": "flex-start",
    "spacing": "5px"
  }
}

flexプロパティが0の場合のみ動作します

justifyContentプロパティを用いた、主軸に沿った配置の指定は、親のボックス内に余白がある場合のみ動作します。子要素のflexプロパティが0より大きい場合、子要素が親のボックスに合わせて自動的に伸縮して余白が存在しなくなるため、親要素でjustifyContentプロパティを指定しても余白は配置されません。親が水平ボックスの場合、子要素でflexプロパティを指定しないと、デフォルトが1になっているため注意が必要です。

# 交差軸に沿った配置を指定する`alignItems`プロパティ

alignItemsプロパティでは、子要素と余白の交差軸に沿った配置を指定します。親要素が水平ボックスの場合、交差軸の向きは垂直です。親要素が垂直ボックスの場合、交差軸の向きは水平です。

flex-start：水平ボックスでは子要素をボックスの上に寄せます。垂直ボックスでは書字方向の始まり側に寄せます。
center：子要素をボックスの中心にまとめて配置します。
flex-end：水平ボックスでは子要素をボックスの下に寄せます。垂直ボックスでは書字方向の終わり側に寄せます。

flex-start center flex-end

上記の図は以下を前提としています

親要素のボックスコンポーネントが水平ボックスである。
書字方向がLTRである。（水平ボックスの場合は影響なし）

たとえば上記のflex-startのFlex Messageを表現するには、以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "direction": "ltr",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "contents": [],
        "height": "100px",
        "backgroundColor": "#00aaff",
        "flex": 0,
        "width": "85px"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [],
        "height": "30px",
        "backgroundColor": "#00aaff",
        "flex": 0,
        "width": "85px"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [],
        "height": "60px",
        "backgroundColor": "#00aaff",
        "flex": 0,
        "width": "85px"
      }
    ],
    "spacing": "5px",
    "alignItems": "flex-start",
    "height": "200px"
  }
}

# ボックスの`spacing`プロパティ

コンポーネント間の最小スペースは、コンポーネントを含むボックス（親要素）のspacingプロパティで指定します。 spacingプロパティは以下の単位で指定できます。 spacingプロパティはパーセンテージでは指定できません。

単位	説明
ピクセル	0より大きい整数または小数を`px`で指定します。例：`50px`、`23.5px`。
キーワード	`none`、 `xs`、 `sm`、 `md`、 `lg`、 `xl`、 `xxl`のいずれかの値を指定できます。`none`ではスペースが設定されず、それ以外は列挙した順にサイズが大きくなります。

以下のFlex Messageには、水平ボックスに3つの垂直ボックスが等間隔（md）で配置されています。

spacingプロパティの例

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "spacing": "md",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "TEXT1"
          }
        ],
        "backgroundColor": "#80ffff"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "TEXT2"
          }
        ],
        "backgroundColor": "#80ffff"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "TEXT3"
          }
        ],
        "backgroundColor": "#80ffff"
      }
    ]
  }
}

特定のコンポーネントについてこの設定を上書きするには、そのコンポーネントでmarginプロパティを設定します。

# コンポーネントの`margin`プロパティ

親要素内での、あるコンポーネントの前に挿入する余白の最小サイズは、marginプロパティで指定します。marginプロパティは以下の単位で指定できます。 marginプロパティはパーセンテージでは指定できません。

単位	説明
ピクセル	0より大きい整数または小数を`px`で指定します。例：`50px`、`23.5px`。
キーワード	`none`、 `xs`、 `sm`、 `md`、 `lg`、 `xl`、 `xxl`のいずれかの値を指定できます。`none`ではスペースが設定されず、それ以外は列挙した順にサイズが大きくなります。

注意

marginプロパティは、ボックスのspacingプロパティより優先されます。また、ボックス内の先頭にあるコンポーネントでmarginプロパティを指定した場合、コンポーネントの手前にスペースが入ります。

以下のFlex Messageには、水平ボックスに3つの垂直ボックスが配置されています。水平ボックスのspacingプロパティがmdに、3番目の垂直ボックスのmarginプロパティがxxlに設定されています。

marginプロパティの例

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "spacing": "md",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "TEXT1"
          }
        ],
        "backgroundColor": "#80ffff"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "TEXT2"
          }
        ],
        "backgroundColor": "#80ffff"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "TEXT3"
          }
        ],
        "backgroundColor": "#80ffff",
        "margin": "xxl"
      }
    ]
  }
}

# オフセット

コンポーネントの位置は、以下のプロパティを指定しても調整できます。

positionプロパティ

オフセットの効果は、positionプロパティの設定によって異なります。なお、ブロックの直下にあるボックスでは、absoluteは指定できません。
offsetTopプロパティ、offsetBottomプロパティ、offsetStartプロパティ、offsetEndプロパティ

%（ボックスの大きさを基準にした割合）、ピクセル、またはnone、xs、sm、md、lg、xl、xxlのいずれかの値を指定できます。

ここでは、オフセットの効果を説明するために、以下のFlex Messageを基準にして、「TARGET」と表示されている水平ボックスの設定を変更して説明します。

offsetプロパティの例1

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "direction": "ltr",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "REFERENCE BOX\n1\n2\n3",
            "align": "center",
            "wrap": true
          }
        ],
        "backgroundColor": "#80ffff"
      },
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "TARGET"
          }
        ],
        "backgroundColor": "#ff8080"
      }
    ]
  }
}

# `position`プロパティが`relative`の場合

コンポーネントの通常の位置を基準に配置するには、positionプロパティにrelativeを指定して、以下のオフセットプロパティを指定します。CSS Positioned Layout Module Level 3の「Relative positioning (opens new window)」と同様の考えかたで位置を決定できます。

プロパティ	説明
`offsetTop`	通常の位置に対して要素の上端が移動する量を指定します。
`offsetBottom`	通常の位置に対して要素の下端が移動する量を指定します。
`offsetStart`	バブルの書字方向がLTRの場合	通常の位置に対して要素の左端が移動する量を指定します。
`offsetStart`	バブルの書字方向がRTLの場合	通常の位置に対して要素の右端が移動する量を指定します。
`offsetEnd`	バブルの書字方向がLTRの場合	通常の位置に対して要素の右端が移動する量を指定します。
`offsetEnd`	バブルの書字方向がRTLの場合	通常の位置に対して要素の左端が移動する量を指定します。

ここで、「TARGET」と表示されている水平ボックスの設定を以下のように変更した例を紹介します。

プロパティ	値
`position`	`relative`
`offsetTop`	`10px`
`offsetBottom`	-
`offsetStart`	`40px`
`offsetEnd`	-

1つ目のバブルは設定変更前、2つ目のバブルは設定変更後です。

offsetプロパティの例1 offsetプロパティの例2

上の2番目のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "direction": "ltr",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "REFERENCE BOX\n1\n2\n3",
            "align": "center",
            "wrap": true
          }
        ],
        "backgroundColor": "#80ffff"
      },
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "TARGET"
          }
        ],
        "backgroundColor": "#ff8080",
        "offsetTop": "10px",
        "offsetStart": "40px",
        "position": "relative"
      }
    ]
  }
}

# `position`プロパティが`absolute`の場合

コンポーネントを、親要素の外枠を基準に配置するには、positionプロパティにabsoluteを指定して、以下のオフセットプロパティを指定します。CSS Positioned Layout Module Level 3の「Absolute positioning (opens new window)」と同様の方法でレイアウトできます。

プロパティ	説明
`offsetTop`	親要素の上端からコンポーネントの上端までの相対位置を指定します。
`offsetBottom`	親要素の下端からコンポーネントの下端までの相対位置を指定します。
`offsetStart`	バブルの書字方向がLTRの場合	親要素の左端からコンポーネントの左端までの相対位置を指定します。
`offsetStart`	バブルの書字方向がRTLの場合	親要素の右端からコンポーネントの右端までの相対位置を指定します。
`offsetEnd`	バブルの書字方向がLTRの場合	親要素の右端からコンポーネントの右端までの相対位置を指定します。
`offsetEnd`	バブルの書字方向がRTLの場合	親要素の左端からコンポーネントの左端までの相対位置を指定します。

注意

オフセットプロパティを指定しない場合のコンポーネントの位置は、端末によって異なる可能性があります。そのため、縦方向（offsetTopまたはoffsetBottom）および横方向（offsetStartまたはoffsetEnd）のオフセットプロパティを明示的に指定することを推奨します。

ここで、「TARGET」と表示されている水平ボックスの設定を以下のように変更した例を紹介します。

プロパティ	値
`position`	`absolute`
`offsetTop`	`10px`
`offsetBottom`	`20px`
`offsetStart`	`40px`
`offsetEnd`	`80px`

1つ目のバブルは設定変更前、2つ目のバブルは設定変更後です。

offsetプロパティの例1 offsetプロパティの例3

上の2番目のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "direction": "ltr",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "REFERENCE BOX\n1\n2\n3",
            "align": "center",
            "wrap": true
          }
        ],
        "backgroundColor": "#80ffff"
      },
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "TARGET"
          }
        ],
        "backgroundColor": "#ff8080",
        "position": "absolute",
        "offsetStart": "40px",
        "offsetEnd": "80px",
        "offsetTop": "10px",
        "offsetBottom": "20px"
      }
    ]
  }
}

# 親要素とコンポーネントの大きさについて

positionプロパティにabsoluteを指定したボックスは、親要素の大きさに影響を与えなくなり、さらに親要素の影響を受けなくなります。そのため、親要素よりも大きいコンポーネントの場合は、コンポーネントの一部が表示されません。また、親要素（余白）の影響で大きくなっていた場合は、元の大きさに戻ります。

ここで、「REFERENCE BOX」と表示されている水平ボックスの設定を以下のように変更した例を紹介します。

プロパティ	値
`position`	`absolute`

1つ目のバブルは設定変更前、2つ目のバブルは設定変更後です。

offsetプロパティの例1 offsetプロパティの例4

「REFERENCE BOX」の大きさは、親要素（垂直ボックス）の大きさに影響を与えなくなり、さらに親要素の影響を受けなくなります。そのため、親要素よりも大きい部分（「2」と「3」の行）は表示されていません。また、親要素（余白）の影響で大きくなっていた左右の余白部分は、元の大きさ（テキスト「REFERENCE BOX」の幅）に戻ります。

# 線形グラデーション背景

Flex Messageのボックスコンポーネントでは、background.typeプロパティにlinearGradientを指定することで、背景を線形グラデーションにできます。

グラデーションの方向は親の書字方向に影響されません

グラデーションの方向は、親要素の書字方向（LTRまたはRTL）の影響を受けません。

# 線形グラデーション背景の角度

線形グラデーションの勾配の角度は、0度以上、360度未満の範囲で、90度なら90deg、23.5度なら23.5degのように整数または小数で指定します。 0degは下から上、45degは左下から右上、90degは左から右、180degは上から下のように数字が増えると時計回りで角度が変わります。

0度（下から上）の線形グラデーション

0degの線形グラデーション

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [],
    "background": {
      "type": "linearGradient",
      "angle": "0deg",
      "startColor": "#ff0000",
      "endColor": "#0000ff"
    },
    "height": "200px"
  }
}

45度（左下から右上）の線形グラデーション
90度（左から右）の線形グラデーション
180度（上から下）の線形グラデーション

詳しくは、『Messaging APIリファレンス』の「ボックス」コンポーネントを参照してください。

# グラデーションの中間色

centerColorプロパティでグラデーションの中間色を指定すると、3色のグラデーションになります。 centerPositionプロパティで中間色の位置を指定できます。

開始点から10%の位置に中間色を置いた場合

開始点から10%の位置に中間色を置いた3色のグラデーション

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [],
    "background": {
      "type": "linearGradient",
      "angle": "0deg",
      "startColor": "#ff0000",
      "centerColor": "#0000ff",
      "endColor": "#00ff00",
      "centerPosition": "10%"
    },
    "height": "200px"
  }
}

開始点から50%の位置に中間色を置いた場合
開始点から90%の位置に中間色を置いた場合

# 描画順序について

JSONデータの順に、コンポーネントが描画されます。つまり、JSONデータの最初に書いたコンポーネントが最背面に描画され、最後に書いたコンポーネントがバブルの最前面に描画されます。

描画順序を変更するには、JSONデータに書く順序を変更してください。

Flex Messageを送信する
Flex Messageの要素
Flex Message（Messaging APIリファレンス）

# Flex Messageのレイアウト

# ボックスの種類と主軸の向き

# ベースラインボックスの特徴

# 垂直方向の揃え位置

# 使用できるコンポーネント

# 使用できないプロパティ

# コンポーネントの幅と高さ

# 水平ボックス内のコンポーネントの幅

# 垂直ボックス内のコンポーネントの高さ

# ボックスの幅

# ボックスの最大幅

# ボックスの高さ

# ボックスの最大高

# 画像のサイズ

# アイコン、テキスト、スパンのサイズ

# その他のコンポーネントのサイズ

# フォントサイズの自動縮小

# コンポーネントの位置

# 水平方向の位置合わせ

# 垂直方向の位置合わせ

# ボックスのパディング

# ボックスの子要素と余白の配置

# 主軸に沿った配置を指定するjustifyContentプロパティ

# 交差軸に沿った配置を指定するalignItemsプロパティ

# ボックスのspacingプロパティ

# コンポーネントのmarginプロパティ

# オフセット

# positionプロパティがrelativeの場合

# positionプロパティがabsoluteの場合

# 親要素とコンポーネントの大きさについて

# 線形グラデーション背景

# 線形グラデーション背景の角度

# グラデーションの中間色

# 描画順序について

# 関連ページ

# 主軸に沿った配置を指定する`justifyContent`プロパティ

# 交差軸に沿った配置を指定する`alignItems`プロパティ

# ボックスの`spacing`プロパティ

# コンポーネントの`margin`プロパティ

# `position`プロパティが`relative`の場合

# `position`プロパティが`absolute`の場合