Dressを使って「目指せ、装飾王への道」

BiNDのデザイン機能「Dress」を使いこなしたい(けど難しそう)‥!!Dressが思うように機能しない‥!!そんなお悩みはありませんか?そもそもDressとは何か。CSSとDressの関係性を理解して装飾王(Dressマスター)になろう。

9692

BiND8から突如現れたDress。未だに何者なのかイマイチ把握できていない方も多いはず‥。
「使うと便利!」と言われて、使ってはみたけど何か思ったように機能していない。気がする‥。そんな方も多いはず‥。

Dressを自在に使いこなすには、実はCSS(スタイルシート)の仕組みを知る必要があります。(なくても一応使えます)
そもそもDressとはBiNDでCSSを管理するための機能にすぎません。
つまりCSSを理解すれば、Dressも攻略したも同然のはず!しかしその理解への道のりは、簡単でなものではないかもしれません‥。

CSSとは何か。
詳しくは、BiND CAMP PASSメンバー限定の記事でも紹介をしていますが、
簡単に言うと、Webのデザインを設定するためのプログラム言語です。

ここではCSSの仕組みから、Dress攻略への道を掴んで行きたいと思います。

CSSの仕組み

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

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

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

では順番に解説します。

CSSの基本的な仕組み

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

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

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

img_02_01_1
セレクタがリンクの場合
img_02_01_2
「.◯◯◯」という記述の場合は任意の場所になる

Dressでは

img_02_02_1
Dressでの、セレクタがリンクの場合
img_02_02_2
「.c-body」という要素はBiNDでは本文を指している

 

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

CSSには優先度がある

ではなぜ、「設定したはずのDressが機能しない」ということが起こるか。
それはCSSには設定の優先度が存在します。

先ほどお話しをした、「場所を決める」という行為。これは実は細かく設定できます。
「◯◯◯の▲▲▲」とか、「◯◯◯の▲▲▲の□□□」、「▲▲▲の□□□の◯◯◯」など。

img_02_03

CSSの特徴として、より細かく指定した設定が優先的に使用されます。

そして、例えば「◯◯◯の文字を赤色」と「▲▲▲の□□□の◯◯◯の文字を青色」に設定した時(◯◯◯は同じ場所)、どうなるかと言うと、文字は青色になります。
赤色は青色に負けちゃいます。

Dressではメニューの構造がすでに優先度の関係を表しています。

img_02_04

Dressでは、プルダウンを複数選択することで、CSSの優先度が高まっていく

Dressに関するよくあるお問い合わせ

それを踏まえて、Dressに関するよくあるお問い合わせを一つ解消。

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

img_02_05

正しいセレクタでCSSを設定する必要がある

BiNDのCSS構造を知りたい

正しいCSSの場所を指定をしてあげることが、Dress攻略の鍵ということは説明した通りです。
でも、BiNDのCSS構造なんて、どうしたらわかるの?という疑問ですが、こちらは皆さんがお使いのブラウザが解決してくれます。

ブラウザの検証モードを利用する

最近のブラウザでは、今どんなCSSが適用されているか確認することができます。(ブラウザ毎で動作は異なります)
検証モードや、開発モードとか言ったりします。

使い方は簡単。調べたい場所で右クリック、「検証」という項目を選びます。(別ウィンドウ、画面下のパターンもあります)
すると、図のように画面が分割されます。

img_03_01
Chormeでの検証モード

img_03_02
Firefoxの検証モード
img_03_03
Safariの検証モード

適用中のCSS探す

今回はメニューのリンクの色を変えてみます。
注目すべきは先ほどの検証モードの適用中のCSSの欄。
CSSで文字色を設定する時は「color」の設定値を修正しますので、colorの設定値があるものを探します。(どのような設定項目があるかは、こちらを参考にしてください)。
どうやら今は「#333」という黒色が設定されているようです。

img_03_04

これを先ほど説明したように、CSSの設定場所を解読すると「メニューB」の「リスト」の「リンク」となります。
ということで場所がわかったのので、Dressでは、図のように設定します。

img_03_05

すると、無事メニューの文字色が変更できました。
再び検証モードで確認すると、「#333」から「#3fa9f5」が適用されているのがわかると思います。

img_03_06

まとめ

ということで、「◯◯◯の色を変えたいけれど、どこで設定したら良いかわからない!」とか、「Dressを設定したはずなのに、色が変わらない!」なんて事があった時には、ブラウザの検証モードをお試しください!
我々プロもよく使用しています。
ちょっと難しいかもしれませんが、CSSの仕組みを少し知っているだけでも、よりDressが使いやすくなると思います。

  • Dress攻略の近道!CSSの仕組みを理解しよう
  • CSSに困ったらブラウザの検証モードで確認
  • 検証モードからDressの設定箇所を解析⇒適用する

関連記事