サイポン基本構造の確認
2025/11/22
サイポンの基本構造：3つのコンセプト
CMSサイポンでは、ページを大きな箱（セクション）の中に中くらいの箱（コンテナ）を入れ、その中に具体的な部品（パーツ）を配置していくイメージで構成します。
１. 構造役割イメージセクション
ページの区切りや背景を決定する最大の単位 ページ内の大きなブロック
２. 背景コンテナ
パーツを配置し、並び順を制御する中間の単位 セクション内のレイアウト枠
３. 段組みパーツ具体的なコンテンツ
（テキスト、画像など）を保持する最小単位 ページを構成する部品
１. 構造役割イメージセクション
ページの区切りや背景を決定する最大の単位 ページ内の大きなブロック
２. 背景コンテナ
パーツを配置し、並び順を制御する中間の単位 セクション内のレイアウト枠
３. 段組みパーツ具体的なコンテンツ
（テキスト、画像など）を保持する最小単位 ページを構成する部品
この３つのコンセプトを具体的に確認してまいります。
１. 構造役割イメージセクション
セクション (Section)
セクションは、ページ全体を縦に区切る最大のブロックです。
- 役割: ページのテーマや背景を変えたいときに使用します。例えば、「ヒーローエリア」「サービス紹介」「お問い合わせフォーム」といった、内容のまとまりごとに区切ります。
- 主な設定:
- 背景: 色、画像、動画などの設定
- 上下の余白（マージン/パディング）
- 全幅表示にするか、コンテンツ幅に制限するか
２. 背景コンテナ
コンテナ (Container)
コンテナは、セクションの中に配置され、パーツを囲んでレイアウトを制御する中間の箱です。
- 役割: セクション内でパーツを横に並べたり（段組み）、特定の配置（中央揃えなど）を決めたりする際に使用します。レスポンシブデザイン（スマホとPCでの表示切替）におけるレイアウト調整の主役です。
- 主な設定:
- 段組み: 1列、2列、3列など、内部のパーツをどのように並べるかを設定
- 幅の制限: コンテンツの最大幅を調整
３. 段組みパーツ具体的なコンテンツ
パーツ (Parts)
パーツは、Webページに表示される具体的なコンテンツそのものです。
- 役割: ページに情報や機能を付け加えるための最小単位の部品です。
- 具体例:
- テキスト: 見出し、文章
- 画像/動画: 写真や埋め込み動画
- ボタン: リンクを設定
- リスト: 箇条書き
- フォーム: お問い合わせ欄 など
