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

BiND CAMP PASSメンバー専用記事です。記事を全て読むには対象商品の購入が必要です。

オカベ
皆さまこんにちはオカベです。 まず、今回のテーマを語るにあたり説明しておくと、私はすごく面倒くさがり屋です。 美しいデザインの第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は主に「ヘッダー」・「ビルボード」・「コンテンツ」・「サイド」・「フッタ」といった大きな箱(親ブロック)で構成されています。 普段テキストや画像を入れるブロックは、この親ブロックの中の子ブロックです。 そしてこちらの設定エリアは、親ブロックに余白を設定できます。 つまりこんな感じになります。

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

page_03

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

「Dress」から

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

dress_02

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

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

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

「CSS詳細設定」から

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

css_02

おさらい

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