レイアウトの幅を広げる！パーツを組み合わせて多段表示

2025年6月25日

レスポンシブパーツの便利さと限界

2列、3列の表示に便利な「レスポンシブパーツ」。

しかし、もっと列を増やしたい場面もあります。

たとえば「4列にしたい」「6列まで表示したい」といった要望です。

ここでご紹介するのが、パーツの中にパーツを入れるという手法です。

これによって、表示形式を保ちながら自由度の高いレイアウトが簡単に作成できます。

まず、2列構成のパーツを挿入します。

挿入したパーツの内容を一度削除し、枠線のみの状態にします。これでベースができました。

左右のセルに再度2列パーツを挿入すると、4列表示が完成します。

この方法は入れ子構造を重ねることで、6列や9列の表示も実現可能です。

ただし列数が増えるほど、一列あたりの幅が狭くなり見づらくなる場合もあります。要約した内容のみを配置するなど、文章の量などに注意が必要です。

「パーツの中にパーツを入れる」という発想をもとに、PAGEKitでも自由度の高いレイアウトの構築が可能になります。非常に簡単な手順で、列数の自由な調整ができるため、実用性も高いテクニックです。レイアウト作成に参考にしてみてくださいね。

ホームページを作るのは、むずかしそう。そう思っていた方も、PAGEKitなら「意外とカンタンだった」と感じていただけるはずです。専門知識がなくても、必要なページがすぐに揃うテンプレートと、やさしい操作画面。まずは一度、実際の使いやすさを体験してみませんか？