レスポンシブ・レイアウト・プラグイン (#responsive_layout_container / #responsive_layout_item)
このプラグインは、画面サイズに応じて自動的に水平配置（横並び）と垂直配置（縦積み）を切り替える高度なレイアウトを実現します。
📝 レスポンシブ・レイアウトの基本
この機能は、Flexboxと同様にコンテナとアイテムの2つのマクロを入れ子にして使用します。
1. 親要素：コンテナ (#responsive_layout_container)
レイアウトの切り替えルールと、全体の幅の分配方法を決定します。
| 引数 | 役割 | 意味 |
| --- | --- | --- |
| 引数1 (切り替わりポイント) | レイアウトが水平から垂直に切り替わる画面幅を指定。 | S (デフォルト: モバイルで垂直) / M (タブレット以下で垂直) / N (常に水平) / L (常に垂直) |
| 引数2, 3... (複合) | 入れ子の構造で使われる場合に、アイテムの比率を細かく指定。 | デフォルトでは内容量に応じて幅を分配。 |
2. 子要素：アイテム (#responsive_layout_item)
実際に横に並ぶコンテンツの箱です。幅の指定方法が非常に細かく設定されています。
| 幅の指定方法 | 書式 | 役割 |
| --- | --- | --- |
| 比率による固定 | 8 (1～12の数値) | デスクトップ時の幅を12分割の比率で指定。合計が12になるように調整すると綺麗に並ぶ。 |
| 絶対値による固定 | 150px | ピクセル固定幅を指定。残りのアイテム幅は auto で自動決定させる。 |
| デバイス幅ごとの比率 | 3,4,6 | [基本幅, タブレット幅, モバイル幅] の3段階で比率を指定する。（高度な制御） |
💡 Flexbox との決定的な違い
* Flexbox: 常に水平レイアウトが基本。画面に収まらない場合は折り返すか、横スクロールさせる。 * Responsive Layout: 画面幅が狭くなったら、自動的に縦積み（垂直配置）に切り替わることが最大の目的。これは、スマートフォンでの見やすさを確保するための手法です。
📄 サンプルコード（比率による2段組）
幅の広い画面（デスクトップ）では、左側を広く、右側を狭くする2段組を作成し、モバイルでは縦積みになるようにします。
■ メインコンテンツ
ここに記事の主要な文章を記述します。
■ サイドバー
補足情報やリンクを配置します。