余白の種類

marginとpaddingはどちらも余白を表します。

この２つの余白の違いは、内側の余白か外側の余白かです。

この２種類の余白を工夫して使いながら、思った通りのレイアウトを実現していきます。

また、marginとpaddingは上下左右それぞれにわけて設定することが可能です。

それでは実際にmarginとpaddingを設定してみましょう。

marginとpaddingの設定

Bubbleのアプリを開きます。

前回までに作成したエレメントは消しておきます。

ページのContainer layoutをColumnに設定しておきます。

まずは、Textを配置しましょう。

Appearanceタブの「Style Attribute」から、「Heading1」を選びます。

そうすると、文字が大きく太くなります。

HeadingにはHeading1～6まであり、1がいちばん大きく、6がいちばん小さいです。通常、見出しを作る際に使用します。

Layoutタブから、「Make this element fixed-width」のチェックを外します。

イメージしやすいよう、Textの内容は好きな内容に書き換えてみてください。

左上に隙間なく配置されていると見づらいというケースがあると思います。そのような際にMarginやPaddingを設定します。

Layoutの一番下に、MarginsとPadding があります。

まず、MarginsのLeftとTopを30pxに設定してみてください。

すると、左と上に余白ができたと思います。

これで見やすくなると思います。

次に、このTextに対し、背景色を設定します。

AppearanceタブのBackground styleをFlat colorにし、Colorを好きな色にします。

見本では、紺色に設定します。

そして、背景色に合わせて見やすいように文字の色を設定します。
背景色用のColorの少し上に文字色用のColorがあるのでこれを変更します。

見本では白に設定します。

今度はPaddingを使って余白を設定します。

「Layout」タブのMarginsをすべて0に戻し、Paddingを4つとも30pxに設定します。

これで、エレメント自体は隙間なく配置されていても、文字の部分には余白がある状態になります。

Bubbleでデザイン制作を行う際は、このMarginsやPaddingを細かいレイアウトの調整に使う場面が多々出てくると思います。

次回以降でWebサイトの制作を通して使い方の理解を深めていましょう。