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

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

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

Dressでよくあるトラブル

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

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

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

CSSの基本的な仕組み

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

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

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

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

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

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

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

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

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

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

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

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

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

CSSの優先度を意識しよう

ではなぜ、「設定したはずのDressが機能しない」ということが起こるか。
それはCSSには設定の優先度が存在します。
先ほどお話しをした、「場所を決める」という行為。これは実は細かく設定できます。
「◯◯◯の▲▲▲」とか、「◯◯◯の▲▲▲の□□□」、「▲▲▲の□□□の◯◯◯」など。
img_02_03
CSSの特徴として、より細かく指定した設定が優先的に使用されます。
そして、例えば「◯◯◯の文字を赤色」と「▲▲▲の□□□の◯◯◯の文字を青色」に設定した時(◯◯◯は同じ場所)、どうなるかと言うと、文字は青色になります。赤色は青色に負けてしまいます。
これがCSSの優先度による影響なのですが、DressではUI上での構造がそのまま優先度の強弱に相当します。

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

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

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

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

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

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

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

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

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


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

BiNDupのトップページ

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

BiNDup GuideBook

Web作成サービス「BiNDup」の最新ガイドブック。サイトを外注せず自作する方のために制作から集客までできることをまとめました。

新規登録をして資料をダウンロード
  • POINT

  • Dress攻略の近道!CSSの仕組みを理解しよう
  • CSSには設定の優先度がある
  • Dressを設定したのに反映しない場合は設定した範囲をチェックしよう

RECOMMEND ARTICLE