Webサイトの余白はどこで設定するのがラクか、いろいろ検証してみました。

「余白」。それはデザイナーが美しいデザインに仕上げるための基本であり極意。Webサイトでも余白はしっかり考慮したいが、項目が多いため繁雑になりがち・・・。できるだけラクに余白を設定できる方法はないものか。検証してみました。

皆さまこんにちはオカベです。

まず、今回のテーマを語るにあたり説明しておくと、私はすごく面倒くさがり屋です。
美しいデザインの第1歩として余白の調整が必要不可欠ではありますが、BiNDの場合ブロックがたくさん増えるとここの管理が大変と思うこともしばしば。

特に左右の余白なんて・・

いつものやり方

ちなみに、みなさん余白はどのように設定していますか?
おそらくブロック毎の余白設定で設定している方が多いのではないのでしょうか。
間違いではないのですが、「後でやっぱり変えたい」とか、後で編集したときに「余白何pxのルールだっけ?」など管理することを考えると、ブロック毎に設定するのは・・・

img_01

正直な話、めんどくさい

余白の設定方法をいろいろ探ってみた

ということで自分なりにBiNDで余白を管理するにはどこで設定するのがベストなのか探ってみました。
まずは設定箇所の把握から。実はBiNDには余白を設定できる箇所が複数あるんですね。

1.「設定:ページデザイン」から

プロパティ設定>ページデザイン>各セッティングアイコンから。
初っ端ですがここの存在はあまり知られていないのでは・・・?
タブを切り替えるとちゃんとスマホ用も設定できます。

page_01

2.「Dress」から

BiND8より搭載のイカす奴。
うまく使いこなせれば他の3つは触らなくてもよくなるかも?
大きな可能性に満ち溢れている。。

dress_01

3.「ブロックエディタ:設定」から

おなじみの場所。
プリセットの5種類から選ぶもよし。好きな値で設定するもよし。
抜群の安定・安心感。初心者~中級者でもおすすめです。

block_01

4.「CSS詳細設定」から

こちらも昔からあるエリア。
Dressではカバーしきれないピンポイントの要望もお任せ!
だけど、うっかりすると他ブロックと共有しているのを忘れて
余計な設定をしてしまったり・・・、なんてことも。

css_01

何が違うの?それぞれの特徴

何か思ったより手段がありますね・・・。同じ様に見えて微妙に挙動が違ったりします。

「設定:ページデザイン」から

BiNDは主に「ヘッダー」・「ビルボード」・「コンテンツ」・「サイド」・「フッタ」といった大きな箱(親ブロック)で構成されています。
普段テキストや画像を入れるブロックは、この親ブロックの中の子ブロックです。
そしてこちらの設定エリアは、親ブロックに余白を設定できます。

つまりこんな感じになります。

左右全てに余白が入ります。(メインブロックに左右40pxの余白を入れた場合)

おお。いっきに一律左右に余白を入れるには便利そう・・・! と思いましたが、ちょっと落とし穴が。

page_03

水色部分はブロック幅100%

子ブロックに横幅100%で背景色や背景画像を入れていると背景が切れてしまうんですね。。
なので、横幅100%でブロック毎で背景を変えるようなデザインの時は考えもの。

「Dress」から

Dressを使った設定方法。こちらはページデザインで設定した親ブロック(メイン)より一つ下のブロックに設定しています。

dress_02

プレーンブロックに直接余白を設定することで、一括で余白の設定が可能に

ちなみに今は「プレーンブロック」で設定しましたが、「左右違い」「目次」「アルバム」「タブ」「アコーディオン」「フロート」で個別に設定できます。(逆に言うと、全てのレイアウトで余白を統一させたい場合はこれら全てに設定する必要があるとも・・・)

「ブロックエディタ:設定」から

こちらは、Dressで設定したブロック(プレーン)よりつ下のブロックに設定しています。
設定方法はおなじみなので割愛。

「CSS詳細設定」から

こちらは、Dressで設定したブロックと同じブロックに設定しています。
Dressと違う点は、同じCSSが適応されたブロックのみに設定されることです。
こちらも設定方法は省略。

css_02

共通CSS名が異なるブロックには適用されません。

おさらい

ちょっとわかりにくくなったので、それぞれどのブロックに作用しているのかまとめます。

続きを読む

関連記事

  • デザイン
  • BiNDの使い方

どの色が相応しい?介護施設のホームページを3つの違う色で作ってみた

サイトのメインカラーが違うだけで与える印象が変わりますが、なかなか異なる色をいくつも作って比べるのは至難の業。簡単な質問に答えるだけで目的にぴったりのホームページが作れる「AiDジェネレーター」なら、出来上がりのサイトから見比べることが可能!介護施設のサイトに合う色はどれか試してみました。

2017.07.04 - あい