elementor v4で制作を始めると、Divブロック・Flexboxにコンテンツ幅「ボックス」の設定がないことに気がついたと思います。
今回はどうやってv3コンテナでやってたコンテンツ幅「ボックス」の設定を、v4ウィジットでするのか解説します。
そもそもコンテナの「ボックス」と「全幅」の違いってなんだっけ
みなさん、v3で構築する時、コンテナのコンテンツ幅「ボックス」と「全幅」って使い分けてましたか？
私、最初は違いわからずにとりあえず全幅にしてパディングで調整してたりしてました笑
両者の違いはこんな感じ。
| ボックス | 全幅 | |
| コンテナの内側 | 指定した幅（例: 1140px）になる | ブラウザの端から端まで広がる |
| 左右の余白 | 画面が広いと左右に余白ができる | 余白は設定しなければできない |
実際に見たほうがわかりやすいですね。1980pxの画面で見た時こんな感じ
↓ボックス
↓全幅
こういうテキストのセクションはボックスにして、広げてダイナミックに見せたい時は全幅にして、という使い分けが多かったと思います。
ではv4ではどうやるんでしょうか。
v4のDivブロック・Flexboxウィジットは、v3のコンテナと構造が違う
※Divブロック・Flexboxの違いは、最初にレイアウトでフレックスが指定されているかいないかだけ、と言われてます。詳細は省きますが、どちらも同じものとしてここでは解説しますね。
まず、v4でコンテナの役割を担っている「Divブロック」「Flexbox」では
コンテンツ幅「ボックス」という概念はもう存在しません。
全て全幅になるという認識でOKです。
なぜかというとHTML構造を簡単にしたため、です。
実際にv3のコンテナと、v4のDivブロック・Flexboxの構造を検証ツールで見てみましょう。
（Macの方ならF12を押すか、画面を右クリックして「検証ツール」をクリックしてください）
v3コンテナの構造
まず、v3コンテナを
・「ボックス」で幅を1100px
・上下にパディング
・IDを「v3」
としました。
検証ツールで見ると、ID「v3」の内側に「e-con-inner」があります。
つまりボックスは二重構造になっていたのです。
そして内側の「e-con-inner」に
・上下のパディング
・max-width:1100px;（大きくなるのは1100pxまで）
という設定が入っていたということです。
次に、v3コンテナを
・「全幅」幅100%
・上下のパディング
・ID「v3」
としました。
そうするとボックスの時にあった「e-con-inner」はなくなっています。
そして、「v3」自体に幅100%、上下のパディングの設定がされています。
v4 Divブロック・Flexbox の構造
ではv4のDivブロックを入れて、その中に画像を3枚入れました。
Divブロックは
・IDを「v4」
・上下パディングが120px
・サイズはそのまま何も入れない
・微調整：gap指定/オーバーフロー非表示
としてみました。
これを検証ツールで見ると、「v4」自体にパディングが入っていますね。
つまりv3全幅のような構造です。
コンテナ「ボックス」は、v4では手動で設定するしかない。
v4のDivブロック・Flexboxでは、コンテンツ幅「ボックス」の設定がないので
手動で先ほどのような二重構造を作って再現するしかありません。
ではさっきv3で作ったタイトル・文章・写真のセクションをv4で作ってみましょう。
※以下の手順はDivブロック・Flexboxどっちでも変わりません！
ステップ① Divブロックの中にDivブロックを入れる
外側のDivブロックを入れる時は、一番下の「＋」ボタンからはv3ウィジットしか選べないので、左側のウィジットタブからドラッグして入れます。
内側のDivブロックも一旦入れました。
ステップ② 外側のDivブロックの設定
外側のDivブロックを以下のように設定します。
・レイアウト表示：フレックス
・方向： ↓
・均等配置：選択しない（または上）
・項目を揃える：真ん中
・パディング：0
これで、外側のDivブロックは、中身を上から順に、真ん中に並べるよ。という設定ができました。
※パディングはなぜか自動で10pxついてるので、適宜0にしないといけません。
ステップ③ 内側のDivブロックの設定
内側のDivブロックの、サイズ 最大幅を指定すれば、v3コンテナのコンテンツ幅「ボックス」と同じようになります！！
ここで最大幅を1100pxにすると、画面幅が1100px以下になると、中身の外の余白がなくなりますよね。
そこで単位のところで「fx」を押して「min(1100px , 88vw)」と記入すると
・画面幅1100px以上：中身の幅は1100px
・画面幅1100px未満：中身の幅は88vw
となって、中身の外の余白をいつでも確保することができます。
今回はmin( 1100px , 88vw)で作っていきます。
ステップ④ 見た目を整える
では、先ほど作ったセクションのように見た目を整えていきます。
外側のDivブロック
外側のDivブロックに戻って、背景をグラデーションにしました。
内側のDivブロック
中身を横に並べたいのでこんな感じに設定しました。
・レイアウト表示：フレックス
・方向：→
・均等配置：space-between（両端にピッタリ広げる）
・項目を揃える：真ん中
マージンもこちらにつけておきました。
内側のDivブロックに中身を追加
詳しい説明は省きますが、こんな感じで、幅45%のテキストと幅50%の画像を入れました。
できあがり
こんな感じで、v4でもコンテナ幅ボックスのような表現ができました！
今回は内側の最大幅をmin( 1100px , 88vw)にしたので、1440pxの画面でも、1024pxの画面でもいい感じに左右の余白がありますね。
↓1440px画面
↓1024px画面
（タイトルの改行微妙ですが）
実務でこの二重構造を効率化するなら…
v3コンテナでコンテンツ幅「ボックス」を設定するより、v4 Divブロックでやる方が工数かかるなあーと思いましたよね…
そんな方は、v4ウィジットでクラスを活用しましょう！！
例えば先ほどの外側のDivブロック・内側のDivブロックの設定をデフォルト保存しておくみたいなイメージです。
クラスを使ったワークフロー① 外側・内側Divブロックのデフォルトをクラスに登録
ページを作り始める時に、最初にクラスを作っておくと楽です。
クラス名をつけたら、以下のように外側と内側それぞれのDivブロックに、デフォルトの設定をしておきましょう。
↓外側のDivブロックを選択して、クラス名「section-wrapper」を入れてエンター。
・レイアウト表示：フレックス
・方向： ↓
・均等配置：選択しない（または上）
・項目を揃える：真ん中
・パディング：0
と設定。
↓内側のDivブロックを選択して、クラス名「section-inner」を入れてエンター。
・マージン上下を120px
・パディング0
・サイズ：最大幅min( 1100px , 88vw)
と設定。
★ 背景などのセクションごとに変わる設定は、クラス「ローカル」に戻して設定するように注意！！
★ クラスはレスポンシブ対応できるので、タブレット・スマホの設定も最初にしておくと楽！！
クラスを使ったワークフロー② あとは新しいDivブロックにクラス名をつけるだけ。
次のセクションを作る時は、新しい外側・内側のDivブロックにそれぞれ先ほどのクラス名をつければ、そのデフォルト設定がついて効率化できるよね。という感じです。
これで一つ一つ先ほどの設定をちまちまやる必要はありません！
クラスを使ったワークフローのメリット
クラスを使えば、例えば上下のマージンを120pxから100pxにしたいな〜という時、対象のクラスをクリックしてその値を変更すれば、そのクラスがついているところは全て変更されるんです！
↓ クラスの値を変更する時は必ず青緑になっていることを確認！！
↓ 逆にローカルで値を変更しても、同じクラスがついてる他のところには影響でません。
v3のように、ひたすらスタイル貼り付けする必要はないんです！
こんな感じでクラスを活用するとかなり楽できます^^
（逆にクラスかローカルか、どちらで値をつけるか気をつけないといけないところはありますが…）
ぜひガンガン使って慣れてください！
↑ 他にもグローバルフォントとカラーをv4でどう使えばいいか解説した記事もありますのでみてみてください！
まとめ
v3でコンテンツ幅「ボックス」をメインに使っていた人も多いと思うので、v4はここが意外ととっつきにくいところだったんじゃないかと思います。
ボックスの設定は面倒になりましたが、その分v4では便利なこともたくさんできるようになってます。
今後もv4の役立つ情報を出していきますので、一緒にv4マスターしていきましょう！
本日もお疲れ様でした！！
