オカベBiND8から突如現れたDress。何者なのかイマイチ把握できていない方も多いはず..。「使うと便利!」と言われて、使ってはみたけど何か思ったように機能していない。そんな方も多いはず..。Dressを自在に使いこなすには、実はCSS(スタイルシート)の仕組みを知る必要があります。(なくても一応使えます)そもそもDressとはBiNDでCSSを管理するための機能にすぎません。CSSを理解すれば、Dressも攻略したも同然のはず!しかしその理解への道のりは、簡単でなものではないかもしれません..。簡単に言うと、Webのデザインを設定するためのプログラム言語です。ここではCSSの仕組みから、Dress攻略への道を掴んで行きたいと思います。CSSの仕組みみなさん、実際Dressを使ってみて、こんな壁にぶつかりませんか?◯◯◯の色を変えたいけれど、どこで設定したら良いかわからない!Dressを設定したはずなのに、色が変わらない!あると思います。正直な話、私でもあります..。これって結局、BiNDのCSSを把握仕切れてないという一点に尽きます。CSSの基本的な仕組みCSSは基本的に下記のように記述します。「.c-body」という要素はBiNDでは本文を指している基本的にはこれだけでDressは機能します。CSSには優先度があるではなぜ、「設定したはずのDressが機能しない」ということが起こるか。それはCSSには設定の優先度が存在します。先ほどお話しをした、「場所を決める」という行為。これは実は細かく設定できます。□□□の◯◯◯」など。CSSの特徴として、より細かく指定した設定が優先的に使用されます。「◯◯◯の文字を赤色」と「▲▲▲の□□□の◯◯◯の文字を青色」に設定した時(◯◯◯は同じ場所)、どうなるかと言うと、文字は青色になります。赤色は青色に負けちゃいます。Dressではメニューの構造がすでに優先度の関係を表しています。img_02_04Dressに関するよくあるお問い合わせそれを踏まえて、Dressに関するよくあるお問い合わせを一つ解消。「リンクの文字色を変えたけど、メニューの色が変わらない」ということを耳にします。確かに「リンク」には間違いないのですが、実はこれも「メニューのリンク」というように、優先度があるんですね。BiNDでは各テンプレートに標準でCSSが設定されていますので、そこの優先度とDressの設定がうまく合っていないということです。img_02_05BiNDのCSS構造を知りたい正しいCSSの場所を指定をしてあげることが、Dress攻略の鍵ということは説明した通りです。BiNDのCSS構造なんて、どうしたらわかるの?という疑問ですが、こちらは皆さんがお使いのブラウザが解決してくれます。ブラウザの検証モードを利用する最近のブラウザでは、今どんなCSSが適用されているか確認することができます。(ブラウザ毎で動作は異なります)検証モードや、開発モードとか言ったりします。調べたい場所で右クリック、「検証」という項目を選びます。(別ウィンドウ、画面下のパターンもあります)すると、図のように画面が分割されます。Chormeでの検証モードFirefoxの検証モードSafariの検証モード適用中のCSS探す今回はメニューのリンクの色を変えてみます。注目すべきは先ほどの検証モードの適用中のCSSの欄。CSSで文字色を設定する時は「color」の設定値を修正しますので、colorの設定値があるものを探します。(どのような設定項目があるかは、こちらを参考にしてください)。今は「#333」という黒色が設定されているようです。これを先ほど説明したように、CSSの設定場所を解読すると「メニューB」の「リスト」の「リンク」となります。いうことで場所がわかったのので、Dressでは、図のように設定します。すると、無事メニューの文字色が変更できました。検証モードで確認すると、「#333」から「#3fa9f5」が適用されているのがわかると思います。まとめということで、「◯◯◯の色を変えたいけれど、どこで設定したら良いかわからない!」とか、「Dressを設定したはずなのに、色が変わらない!」なんて事があった時には、ブラウザの検証モードをお試しください!我々プロもよく使用しています。難しいかもしれませんが、CSSの仕組みを少し知っているだけでも、よりDressが使いやすくなると思います。CAMPで最も読まれた記事は?コンセプト。