Dressって何？CSSの仕組みを理解「目指せ、装飾王への道」

ホームページ作成サービス「BiNDup」のデザイン編集機能であるDress。未だに何者なのかイマイチ把握できていない方も多いはず‥。
「使うと便利！」と言われて、使ってはみたけどよくわからない方のために、Dressを自在に使いこなす近道、CSS（スタイルシート）の仕組みを解説します。（知らなくても一応使えます）

そもそもDressとはBiNDでCSSを管理するための機能にすぎません。
つまりCSSを理解すれば、Dressも攻略したも同然のはず！CSSとは何か、簡単に言うと、Webのデザインを設定するためのプログラム言語です。
ここではCSSの仕組みから、Dress攻略への道を掴んで行きたいと思います。
Dressの機能をみる

Dressでよくあるトラブル

みなさん、実際Dressを使ってみて、こんな壁にぶつかりませんか？

• ◯◯◯の色を変えたいけれど、どこで設定したら良いかわからない！
• Dressを設定したはずなのに、色が変わらない！

あると思います。正直な話、私でもあります‥。
これって結局、BiNDのCSSを把握仕切れてないという一点に尽きます。
では順番に解説します。

CSSの基本的な仕組み

CSSは基本的に下記のように記述します。

• セレクタと呼ばれる、デザインを設定したい場所を決める
• その場所の要素を決める（文字・枠・大きさなど）
• 要素をどのような状態にするか決める

もう少し詳しく説明すると、

セレクタがリンクの場合のCSSの記述

「.◯◯◯」は任意の要素を指定

これをDressではこのように設定できます。

Dressでのセレクタがリンクの場合

「.c-body」はBiNDでは本文の要素を指している

基本的にはこれだけでDressは機能します。

CSSの優先度を意識しよう

ではなぜ、「設定したはずのDressが機能しない」ということが起こるか。
それはCSSには設定の優先度が存在します。
先ほどお話しをした、「場所を決める」という行為。これは実は細かく設定できます。
「◯◯◯の▲▲▲」とか、「◯◯◯の▲▲▲の□□□」、「▲▲▲の□□□の◯◯◯」など。

CSSの特徴として、より細かく指定した設定が優先的に使用されます。
そして、例えば「◯◯◯の文字を赤色」と「▲▲▲の□□□の◯◯◯の文字を青色」に設定した時（◯◯◯は同じ場所）、どうなるかと言うと、文字は青色になります。赤色は青色に負けてしまいます。
これがCSSの優先度による影響なのですが、DressではUI上での構造がそのまま優先度の強弱に相当します。

Dressでは項目を細かく選択することで、CSSの優先度が高まっていく

Dressの悩みの大半はCSS優先度によるもの

それを踏まえて、Dressに関するよくあるお問い合わせを一つ解消。
しばしば「リンクの文字色を変えたけど、メニューの色が変わらない」ということを耳にします。
確かに「リンク」には間違いないのですが、実はこれも「メニューのリンク」というように、優先度があるんですね。
BiNDでは各テンプレートに標準でCSSが設定されていますので、そこの優先度とDressの設定がうまく合っていないということです。

優先度を意識した正しいセレクタでCSSを設定する必要がある

Dressも詰まるところCSSですので、同じくCSSのルールに従っています。
ちょっと難しいかもしれませんが、まずはCSSの仕組みを理解することでよりDressが使いやすくなると思います。

Dressの設定箇所が知りたい方は続編のこちらをどうぞ。

Dressの設定箇所を知りたい方へ。「目指せ、装飾王への道・２」

BiNDupはテンプレートからアレンジできる幅が広いので、ぜひ活用してみてください。

無料でBiNDupを使ってみるBiNDの制作事例を見る