【日本語版Webflow University】 スペーシング

この投稿はWebflow社が提供する「Spacing (margin and padding)」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/spacing-margin-and-padding

日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。

‍

マージンとパディングの設定を使用して、統一感のあるきれいな間隔を持つレスポンシブコンテンツを作成します。

スタイルパネルでは、各要素の間隔（マージン、パディング）を定義することができます。

レッスン概要

1. 要素にスペーシングを追加する
2. スペーシングの単位を変更する
3. マイナス方向にマージンを追加する
4. 自動マージンを追加し、要素を水平方向にセンタリングする

要素にスペーシングを追加する

スペーシングとは、要素の境界線の外側（マージン）または内側（パディング）に設ける間隔のことで、一辺、二辺、または四辺すべてに一度にスペーシングを追加することが可能です。

各辺個々にスペーシングを追加する

要素の片側にマージンやパディングを追加する方法は次の通りです。

1. キャンバス上の要素を選択します
2. 調整したい辺のパディングまたはマージンコントロールをクリックしてドラッグします

また、パディングとマージンを数値で指定することも可能です。

1. マージンまたはパディングコントロールをクリックします
2. スペーシングの値と単位を入力します

左右もしくは上下まとめてスペーシングを追加する

左右もしくは上下まとめてスペーシングを追加する方法は次の通りです。

1. Optionキー（Macの場合）またはAltキー（Windowsの場合）を押したままにします
2. マージンまたはパディングコントロールのどちらかをドラッグします

これは、向かい合う2辺に同じ値を追加したい場合に便利です。また、片側のマージンまたはパディングコントロールをクリックし、Option（Macの場合）またはAlt（Windowsの場合）を押しながら、プリセットのいずれかをクリックすることでも一括設定が可能です。

全辺まとめてスペーシングを追加する

Shiftを押しながら1辺のパディングまたはマージンをドラッグすると、要素の全辺に同じ値を設定することができます。また、片側のスペーシングコントロールをクリックし、Shiftを押したままプリセットを選択することでも設定できます。

スペーシングの単位を変更する

デフォルトのスペーシング単位はピクセル（px）ですが、ユニットのメニューの何れかに変更することができます。任意のスペーシングコントロールをクリックし、スペーシング入力フィールドの右側にある単位（例：PX、%、EM、VW、VH）をクリックすることで単位メニューが開きます。

入力フィールドに値と単位を入力することもできます。すべての面に同じ単位を適用したい場合は、まず1辺の単位をメニューから変更し、Shiftを押しながらプリセットで値を設定しましょう。

スペーシングの値を削除する方法

Option（Mac）またはAlt（Windows）を押しながらスペーシングコントロール上の青くなっている値をクリックすると、任意の辺のスペーシング値が0になります。

マイナス方向にマージンを追加する

要素にマイナス方向のマージンを加えると、ページの外側に向けて要素の位置がズレていきます。（例：これによって、要素の一部分を重ねることなどができます。）

自動マージンを追加し、要素を水平方向にセンタリングする

マージンのauto設定を利用することで要素を水平中央に配置することができます。これは、親要素がflexで設定されている場合に、要素をきれいに配列するために非常に便利な機能です。

Spacingの右端にあるアイコン（center elementボタン）をクリックすることで、任意の要素に左右autoマージンを追加することができます。

マージンは、自動的に要素の境界線の外側のスペースを埋めることになります。

一言メモ

インライン（inline-block）スタイルの要素は、インライン設定では利用可能な水平スペースがないため、center elementボタン（auto margin）で中央寄せにすることができません。

隣接する要素間のマージン

場合によっては、隣接する要素のマージンが重複して、1つのマージンに合体する場合があります。これはマージンの折りたたみと呼ばれ、ある状況では上書きされ、別の状況では上書きされないため、混乱する可能性があります。隣接するグリッドの子要素のマージンは折りたたまれません。

一言メモ

よくある問題の 1 つに、フッター コンテンツがメインキャンバスで表示されず、操作できなくなる場合があります。これは、ナビゲーションバーにAbsoluteを設定しており、ページ下部のコンテンツがbody要素から押し出されている場合によく起こります。

この問題を回避するには、ページの最上部の要素がFixedでない場合にその要素にトップマージンを追加しないようにしてください。代わりに、body要素にトップパディングを追加する方法で位置調整を代替してください。

‍

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

今後とも宜しくお願い致します。

‍

Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。

‍Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。

Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。

‍

‍