デキテルの初級コーディング 4つのフェーズ « シナジーデザインスタッフブログ

2022年5月30日

デキテルの初級コーディング 4つのフェーズ

こんにちは。
シナジーデザインのUです。

自社サービスである、
クルマ屋さん専門の半自動ホームページ作成サービス「デキテル」では
新しいデザインを毎月1デザインずつ公開しています。

毎月ガラっと変わった目新しいデザインが公開されていますが、
基本的には同じHTMLが使用されています。

同じHTML　でピンとこない方に簡単に説明すると、
部屋の模様替えのように
家財道具はそのままに、レイアウトや壁紙で見た目を変えているんですね。

そんな模様替えをするためのプログラムをCSSといい、
プログラムを記述する作業をコーディングと呼びます。

今回、そんなデキテルの形作るうえで重要な
コーディングについての記事を書いていきたいと思います。

エラーの出さないための準備

デキテルでは同じHTMLをつかっているので、
CSSに記述ミスがない限り、エラーがでることはありません。
つまり、エラーが出た時の責任は、基本的にはコーディング担当者にあります。

しかし、初めてデキテルのコーディングに着手すると
総じて多くのエラーが発生し、膨大なテストと修正が繰り返されます。
最初の頃は通常の2倍や3倍以上の時間がかかることもあります。

それでは、
エラーを未然に防ぐために何を準備すればいいのでしょうか。

初級編としてまずは
大きく分けて4つのフェーズに別けて考えていきます。

1.デキテルの機能を理解する。

まずは、大前提として
デキテルの機能を理解しておく必要があります。

このフェーズについては、
自社サービスなのだから、頭の中に入っていて当然でなければいけません。
毎週のように新機能が開発されているので、必ず把握しておきましょう。

すべての機能を理解しておかないと、
当たり前ですが、コーディング時に着手対象から漏れてしまい
レイアウト崩れなどのエラーにつながります。

最低限として、

・デキテルにある編集機能
・ページの種類
・デキテルのレイアウトの種類。
・メニュー数とブロックの種類。

を理解しておく必要があります。

2.デキテルの構造を理解する。

冒頭でも書きました通り、
デキテルは基本的に同じHTMLが使われています。

そこで、デキテルのHTML構造と
どのようにCSSを指定しているのかについて
理解しておく必要があります。

記述量が膨大で具体的にどこから理解すればいいかわからない
という事もあるかと思うので、
主に見るべき箇所について書いていきます。

・全体のHTML構造。
・全体共通のclass名。
・各ページ固有のclass名。
・各ブロック固有のclass名。
・スライダーパターンごとのclassやhtml構造の変化。
・機能ON・OFFでのclassの変化。
・レイアウトの入れ替えによるCSSの記述条件の変化。
・カラーごとの変数指定。

要点として書いていきましたが、
これだけ理解できていれば、全体の9割はカバーできるはずです。

理解できていない所がないかチェックをして、
必ず着手前に確認しておきましょう。

3.外から組み立てていく。

いざ、コーディングに入って最初につまづくのが
レイアウト崩れではないかと思います。
カンプで作った数値を指定しているのに上手く余白がとれない…。
画面幅からはみ出したり、カラム落ちを起こしたりしてレイアウトが崩れる…。

というような事がよく発生します。
あっちを直せば、こっちが崩れて…というような症状です。

そんな時、大抵は多重にpaddingやmarginをとっている事が多いです。
ベースとなるデザインのCSSから検証を使って数値を少しだけ変えて…と
調整するような作り方をしている場合に発生します。

ここで重要となるのは外から作る、ことです。

・検証で小手先の調整をせず、計算式で数値を指定。
・wrapper container block_outerといった、外側の要素から順にレイアウトを組立て。
・margin、paddingのリセット。
・floatは隙間なくピッタリの数値に。
・positionは多様しない。

以上を意識することで、大幅に改善されるはずです。