レシピ
media-basic
画像+テキスト横並び。サービス紹介・コンセプト。
概要
画像とテキストを横並びに配置するセクションです。reverse フラグで左右を入れ替えられるため、交互配置のコンテンツに最適です。モバイルでは自動で縦積みに。
YAML パラメータ
| パラメータ | 説明 |
|---|---|
heading |
セクション英語ラベル（省略でヘッダー非表示） |
subheading |
セクション日本語見出し |
extraClass |
追加CSSクラス |
style |
CSS変数の上書き |
items[] |
コンテンツデータ配列 |
items[].image |
画像パス |
items[].alt |
alt テキスト |
items[].title |
見出し |
items[].text |
本文（HTML可） |
items[].reverse |
true で画像を右側に配置 |
CSS 調整変数
| 変数名 | 用途 | デフォルト |
|---|---|---|
--media-basic-padding |
セクション余白 | 5rem 0 |
--media-basic-bg |
背景色 | white |
--media-basic-title-size |
見出しサイズ | 1.8rem |
--media-basic-label-color |
ラベル色 | #00C6FF |
--media-basic-img-radius |
画像角丸 | 16px |
--media-basic-gap |
ブロック間隔 | 4rem |