フレックスレイアウトとは何か(2)作成方法
作成方法
フレックスレイアウトの作成方法は2種類あります。
- 長方形を作成し、フレックスコンテナに変換する
- グループを選択し、フレックスコンテナに変換する
- フレックスアイテムにしたいオブジェクトを選択し、それ(ら)を内包するフレックスコンテナを作成する
それぞれ見ていきましょう。
長方形をフレックスコンテナに変換
まず長方形を作成します。次のいずれかの手順でフレックスコンテナに変換します。
- [オブジェクト]→[フレックスレイアウト]→[フレックスレイアウトに変換]
- 右クリックメニュー→[フレックスレイアウト]→[フレックスレイアウトに変換]
- フレックスレイアウトパネル→「フレックスレイアウトを作成」にチェックを入れる
その後、フレックスアイテムにしたいオブジェクトをフレックスコンテナ内にドラッグ&ドロップします。
グループをフレックスコンテナに変換
グループを選択します。次のいずれかの手順でフレックスコンテナに変換します。
- [オブジェクト]→[フレックスレイアウト]→[フレックスレイアウトに変換]
- 右クリックメニュー→[フレックスレイアウト]→[フレックスレイアウトに変換]
- フレックスレイアウトパネル→「フレックスレイアウトを作成」にチェックを入れる
グループは解除され、グループ内のオブジェクトがフレックスアイテムになります。
グループが解除されるだけならいいのですが、位置が変わってしまいます。これは、「フレックスアイテムを重ねることができない」という仕様になります。ですからこの方法は使われないでしょう。
フレックスアイテムにしたいオブジェクトを選択してから作成
フレックスアイテムにしたいオブジェクトを選択します。
次のいずれかを実行します。
- [オブジェクト]→[フレックスレイアウト]→[フレックスレイアウトに追加]
- 右クリックメニュー→[フレックスレイアウト]→[フレックスレイアウトに追加]
- フレックスレイアウトパネル→「フレックスレイアウトを作成」にチェックを入れる
この2つの方法なんですが、(21.0.0のインストール直後の状態では)結果が異なることに注意してください。わかりやすいところでは2つあります。
1つはフレックスコンテナの大きさです。フレックスレイアウトパネルの「間隔」(フレックスコンテナの内側のアキ、CSSでいうところのpadding)の数値を見てください。長方形を作成する方では間隔は「4.233mm(12pt)」になっています(これはアプリケーションデフォルトなのでドキュメントを開いていない状態で変更すると、以降は変更した値になります)。一方、オブジェクトを選択してから作成する方法では、間隔は0になります。したがって作成されるフレックスコンテナの大きさが異なるわけです。
もう1つはフレックスアイテムの並び順です。長方形を作成する方では、ドラッグ&ドロップしたオブジェクトがそのままの位置(相対位置)で配置されています。一方、オブジェクトを選択してから作成する方法では長方形と円が入れ替わっています。これはどういうことでしょうか。
環境設定の違い
実はこれは環境設定の問題です。環境設定の「一般」に新しく「フレックスレイアウト設定を自動検出して適用」という項目ができました。初期値はオンです。
ここが「オン」だと、InDesign側で勝手に判断して設定を変更しちゃいます。試しにオフの状態で実行するとこうなります。
フレックスパネルのレイアウトのデフォルト値がそのまま生きていて、フレックスアイテムの入れ替えも発生しません。
じゃあ、どんな時にオンにするのか、というと「InDesignで勝手に決めてもらった方が、自分で設定するより早い」場合です。
今度はオブジェクトを縦に並べました。
この状態でフレックスレイアウトを作成します。
オフの場合
オンの場合
全然別の結果になりました。オフの場合はフレックスレイアウトパネルの値に従って「左→右」の順でにフレックスアイテムが配置されるのですが、オンの場合は選択されたオブジェクトの配置からInDesignが判断して「上→下」の順でにフレックスアイテムが配置されます。それはいい(少し賢い)んですが、間隔は0に変更されます(それがいい場合もある)し、円とテキストフレームの位置が逆になっています。
私の結論は「並び位置の変更に気付かないと事故になる可能性があるので現状はオフ推奨」です。しかし今後のアップデートによって賢くなってくる可能性もあるので、たまにオンで試してみてください。
解除/削除方法
フレックスパネルの「フレックスレイアウトを作成」はチェックボックスになっているので、このチェックを外せば解除/削除されます。(メニューからは[フレックスレイアウトを削除]という名称です)
解除/削除の挙動はフレックスレイアウトの状態によって変わります。
フレックスアイテムがある場合
フレックスコンテナは削除され、フレックスアイテムはグループ化されたオブジェクトになります。
フレックスアイテムがない場合
フレックスコンテナは解除され、長方形になります。
名称問題
以上のことから、メニュー名がよくないということが分かるかと思います。
長方形以外のオブジェクトを選択している場合
①フレックスレイアウトに追加:まあ意味が通るので問題にしない(正確には新しくフレックスコンテナを作成してその中にフレックスアイテムとして追加)
②フレックスレイアウトを作成:通じにくい。「フレックスレイアウトに追加」の意味
長方形を選択している場合
③フレックスレイアウトに追加:まあ意味が通るので問題にしない(正確には新しくフレックスコンテナを作成してその中にフレックスアイテムとして追加)
④フレックスレイアウトに変換:その通りで問題はない
⑤フレックスレイアウトを作成:通じない。「追加」か「変換」かわからない(実際は変換)
フレックスコンテナを選択している場合
⑥フレックスレイアウトに追加:挙動を知らなければ意味が通らない。これは、自身をフレックスアイテムとした新たなフレックスコンテナを作成する。つまり入れ子のフレックスレイアウトを作成するということ
⑦フレックスレイアウトを削除:「フレックスレイアウトを解除/削除」に変更したい
⑧フレックスレイアウトを作成:全く逆の意味。文字部分をクリックしても解除/削除される
フレックスアイテムを選択している場合
⑨フレックスレイアウトに追加:挙動を知らないと意味が通らない。自身をフレックスアイテムとした新たなフレックスコンテナを作成するんだけれど、入れ子のフレックスレイアウトになる(図は合成です。赤く表示されているものが新しく作成されたフレックスコンテナ)
⑩フレックスレイアウトを作成:通じにくい。「フレックスレイアウトに追加」の意味。挙動は⑨に同じ
手前味噌ですが、多分この記事を読まないと理解できないんじゃないかと思います。ターゲットによって異なる複数の挙動を少ないメニューで実装したからこうなっているんですが。
それと、フレックスレイアウトの入れ子ができるということを知っていなければ、フレックスコンテナやフレックスアイテムにも同じメニューが出てくることは理解できないでしょうね。
ちなみに、入れ子での挙動は確認してません!(やったら収拾がつかなさそう、さらに地雷が埋まってそう。入れ子で何か面白いものができそうなら挑戦します)。
ということで、名称変更の要望を出したいわけですが、まだ案が決まっていません。決まっているのは
⑦フレックスレイアウトを削除:「フレックスレイアウトを解除/削除」
だけです。フレックスレイアウトパネルの「フレックスレイアウトを作成」は単に「フレックスレイアウト」だけでいい気がします。他は全くの未定なので(提案するからには英語名も考えてやらないといけないので)時間がかかりますが、そのうち変更されているかもしれません。
次のブログはようやくフレックスレイアウトパネルの各設定について解説していきますが、少し時間をください。公式のヘルプが思ったより充実してたので、お急ぎの方はそちらを。


















