このセクションの記事一覧はこちら

【vol.24】2〜3カラムのマージン設定テクニックをご紹介!簡単な工夫で余白が楽々揃います♪

フリーレイアウト機能の更新が楽になる便利なテクニックをご紹介します!
____.png

MV.png

 

____.png

 

 

【第24回 2〜3カラムのマージン設定テクニック編】

 

たけやん : こんにちは、アプリデザインチームです! 今回は、フリーレイアウト機能での2〜3カラムのマージン設定テクニックについてご紹介します。

 

あかちゃん: 以前ご紹介した【vol.6】2〜3カラムの設定方法の記事では、カラムごとに異なる数値のマージンを設定して余白を整えていましたね。

 

たけやん : そうですね。ただその方法だと見た目は綺麗に整うのですが、ブロックを増やしたり、位置を入れ替えたりするたびにマージンを再設定する必要があります。

 

__.png

 

あかちゃん: 更新頻度の高いアプリの場合、運用負荷が心配になりますね。そんな時に役立つマージン設定テクニックをご紹介します!

 

 

2〜3カラムのマージン設定テクニック

 

【2カラムで各マージンを20とする場合】

 

____1_.png

 

2カラムで各マージンを20とする場合、各ブロックのカラムの幅を0.474、マージンを20 0 0 20と上記のように設定すると、ブロックの追加や位置の入れ替えを行っても余白を綺麗に保つことができます。

 

____2_.png

 

 

【3カラムで各マージンを20とする場合】

 

____3_.png

 

3カラムで各マージンを20とする場合、各ブロックのカラムの幅を0.316、マージンを20 0 0 20と上記のように設定すると、ブロックの追加や位置の入れ替えを行っても余白を綺麗に保つことができます。

 

 

たけやん : 今回は2〜3カラムで各マージンを20とする場合のカラムの幅とマージンの具体的な数値をご案内しましたが、各マージンを10とする場合や30とする場合など、どんな数値でも応用することができます。その場合には、カラムの幅の数値を微調整しつつプレビューヤプリで実機確認をしながらご調整ください。

 

あかちゃん: 細かい数値が出てきて難しそう…と思うかもしれませんが、設定自体はとても簡単です。是非プレビューヤプリをお手元に、実際に管理画面で試してみてくださいね♪

 

 

■フリーレイアウト機能について、詳しくはこちらをご参照ください。

フリーレイアウト機能の使い方>

※ご不明点は担当のカスタマーサクセスにお問い合わせください。

 

 

それでは次回の更新をお楽しみに!

不明点はございますか? お気軽にお問い合わせください >

不明点はございますか? お気軽にお問い合わせください >