こんにちは、システムチームのＫです。
制作（デザイン・システム）チームの新メンバーは
まず、ウチの主力サービスである、デキテルのCSSを触れるようになる必要があります。
ですが、ほとんどの人が、デキテルのCSSで壁にぶつかるので、
それについて書いてみようと思います。
ただのCSSと侮ることなかれ
今回は基本的なCSSのこと、
例えば、プロパティの説明や、あしらいの再現方法は
理解している、あるいは調べたりして自己解決するものとして省きます。
デキテルの仕組み上、普通のCSSとは違います。
デキテル特有の処理が存在し、
壁にぶつかる人はだいたいこれらの特有な処理が理解できていないので、
トライアンドエラーを繰り返しているのだと思います。
HTML側は不変
デザインや、メニュー位置によって多少の違いはありますが、
デキテルのHTMLはほぼ固定で、
HTMLにあてるCSSファイルを変えることで、
100パターン以上のデザインを使えるようにしています。
なので、HTML側で調整して、あしらいを再現する、、、
というアプローチができないんですね。
基本的に、デザイナーが新デザインを作るときに、
CSSで実現可能かを考えて作っていますが、
どうしても実装段階で実現できないことが判明する事があります。
そういう時は、
無理やり再現するのではなく、まず「相談」です。
「ここのあしらいが○○という理由で再現できないのですが」
と相談すれば、
・承認の上で無理やり再現する
のほかに、
・デザイン側を訂正する
という方法を取ることもあります。
無理やり再現してできました、、、という場合は
その後レイアウト崩れの原因になったりするので、
まずは「相談」しましょう。
レイアウト毎の切り替えを理解する
デキテルの上中左右、ワイドコンパクトの切り替えがどういう仕組みかというと、
設定中のレイアウト“以外”のCSS部分にコメントアウトのタグを出力して無効化する、という仕組みです。
CSSの記述自体は上中左右全パターン、ファイルの中に存在します。
ここで注意しないといけないのは、
あくまでコメントアウトされているだけ、ということです。
簡単に言うとこういう感じですね。
（メニュー位置「上」で設定しているとき）
～～「上」の時のCSS～～
/**
～～「中」の時のCSS～～
～～「左」の時のCSS～～
～～「右」の時のCSS～～
**/
よく
レイアウトを「上」にしているのに、中や左右のＣＳＳが反映されてしまう、というエラーを見ますが、
これは分岐処理の中でコメントを使ってしまい、
閉じタグが適切に反映されていないことがエラーの原因です。
～～「上」の時のCSS～～
/**
～～「中」の時のCSS～～
.hogehoge{ /** 横幅いっぱい **/ ←ここでコメントアウトが終わってしまう。
↓ここからのCSSが有効化されてしまう。
～～「左」の時のCSS～～
～～「右」の時のCSS～～
**/
分岐のなかではコメントを使わないようにしましょう。
配色の切り替えを理解する
それぞれのデザインで、カラーパターンをファイルの最初に定義しています。
赤の時は#F00
黄色の時は #FC0
みたいな感じですね。
この記述に基づいて、選択中の色に合わせたカラーパターンが反映されます。
つまりデキテルのCSSファイルは
12色×4（メニュー位置）× 2（ワイド・コンパクト） = 96通り
のCSSを一つのファイルで完結させているんですね。すごい。
CSSの知識以外に、PHPの知識も必要になりますが、
初歩の初歩なので、難しくはありません。
2,3回、新デザインのコーディングを経験すれば
問題なくデキテルのCSSを扱えるようになります。
デキテルのCSSコーディングができるようになれば、
他（デキテルSPや、クライアント様HP）のコーディングはへでもないと思いますよ。
HTML・CSSのことなら、
社内一レベルで理解している自負があるので、
わからないことがあれば遠慮なく質問してくださいね。
