業務効率化・Web制作学習におすすめ!Udemyをチェックする! Udemy公式HP

SWELL 余白のサイズ調整の仕方

当ページのリンクには広告が含まれています。
オカヘイ

SWELLでコーポレートサイトを制作する際、デザインに合わせて余白調整が必要な時もありますよね。
そんな時の参考記事です。

目次

ブロック下の余白量調整

各ブロックを選択した際に右側もメニューにブロック下の余白量調整があります。

これにより余白量の調整が可能です。

余白が不要な場合には0emを指定することで無駄な余白を消すことができます。

emは親要素のフォントサイズを基準とし、指定がない場合は16pxとなるようです。

追加で余白調整が必要な場合

同じ原理で追加で余白が必要な場合は「スペーサー」を使用してブロックを追加した後、そのブロックの追加します。

上手くいかない時はブロックを「段落」などにしてみて余白調整されるのも良いかと思います。

例えば「スペーサー」は便利ですが、デバイス制限が選択できない為、PCとSPで余白を変える時には使いづらい点があります。

一方「段落」であれば、デバイス制限も使用可能ですので、余白の違う段落をデバイス制限で置けば調整可能となります。

ぜひ試してみてくださいね。

SWELLでコーポレートサイト自作 Udemyおすすめ講座

【WordPress】企業サイト制作マスターコース|SWELLで作るコーポレートサイト

【WordPress】企業サイト制作マスターコース|SWELLで作るコーポレートサイト

  • カトーヒサヨシさんの講座です。
  • SWELLを使ってデモサイトを作りながら、ノーコードでコーポレートサイト制作方法を学びます。
  • コーポレートサイト作成のみならず、サーバ・独自ドメイン設定、ワードプレスの設定方法のレクチャーもあり、この講座一つあれば、一緒に手を動かすことでデモサイトを作ることができます。
  • 講座一つ一つの時間も短く設定されており、説明がシンプルですが要点がギュっとまとめられて大変分かりやすいです。
  • SWELL推奨プラグインの詳細な設定方法がわかるのもおすすめ。
  • 講座時間は6時間です。

Udemyで講座をチェックしたい方はこちらから↓

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次