【HTML/CSS】保守性を高める！現場で役立つコード設計の基本
あなたはデザインからHTML・CSSを使ってWebサイトを作る際に、「変更に強いコードを書きたい」と考えたことはありませんか？
この記事では、コーダーとして数年活動したことのある筆者が、デザインから変更に強いWebサイトをスムーズに作る方法をご紹介します。
目次
保守性を高める意義
まず、保守性を高めることには以下のようなメリットがあります。
- 変更があった際にスムーズに対応できる
- ルールを共有しておくと、他の人と作業しやすくなる
それぞれ解説します。
変更があった際にスムーズに対応できる
一つ目のメリットは、変更があったさいにスムーズに対応できる点です。例えば、見出し（h1~h6要素）を装飾する場合を考えてみましょう。
例えば、以下のように要素そのものに対して装飾するのはあまりよくありません。というのも、今後例えばh2要素がh3要素になった際にCSSファイルも編集する必要があるからです。
“`CSS
h2 {
background: red;
}
“`
以下のようにクラスを用意し、それに対してCSSを書けば、h2要素がh3要素になってもCSSを編集する必要がなくなります。
“`CSS
.heading {
background: red;
}
“`
他の人が作業しやすくなる
Webサイトの規模によっては、複数人でコーディングをするケースがあります。またWebサイトが運用され続けていく中で、最初にWebサイトを作った人とは別の人が修正などを行うケースがあります。
そのような時に保守性を担保しておくと、その人がスムーズに作業できるようになります。
具体的な方法
以下ではデザイナーからある一つのWebサイトのデザイン全体をもらった想定で、考えてみます。大まかな流れは以下の通りです。
- デザインを分析して、コンポーネント、スタイルを抜き出す
- コンポーネントとスタイルを実装する
デザインを分析して、コンポーネント、スタイルを抜き出す
大体のWebサイトのデザインには、複数のページで共通するコンポーネントやスタイルが存在します。まずはデザインを見て、それらを抜き出してみましょう。
ちなみにコンポーネントとは、Webサイトを構成する要素のことです。
コンポーネントの例は以下です。
- 見出し
- ボタン
これらのコンポーネントのコードを各ページのコードとは独立して書くことで、複数のページで繰り返し使えるコンポーネントができます。
スタイルの例は以下です。
- 文字の大きさ
- 色づかい（メインカラー、アクセントカラー）
コンポーネントとスタイルを実装する
デザインから繰り返して使えそうなコンポーネントやスタイルを抜き出したら、それをコードに落とし込んでいきます。それぞれ以下のように実装すると良いでしょう。
- コンポーネントは、クラスで実装する
- スタイルはCSS変数（カスタムプロパティ）で管理する
コンポーネントは、クラスで実装する
まずコンポーネントに対する装飾は、クラスで実装するのがおすすめです。というのも異なった要素に対して似たようなデザインを実装するケースがあるからです。
例えばボタンは、見た目は同じでも場所や役割によってa要素、button要素やinput[type=”button”]要素など複数の要素で実装されることがあります。
こういったケースでは、要素ではなくクラスに対してCSSを書くことで変更しやすいコードを作成できます。
スタイルはCSS変数（カスタムプロパティ）で管理する
CSS変数とは、その名の通りCSSで管理・使用できる変数のことです。
例えば以下のHTMLに対して、見出しに赤色の下線を、ボタンに赤色の背景色をつけるケースを考えてみます。
“`HTML
<h2 class=”heading”>見出し</h2>
<a href=”” class=”button”>ボタン</a>
“`
CSS変数を使わない場合のCSSは、以下のようになります。
“`CSS
.heading {
border-bottom: 1px solid #333;
}
.button {
background: #333;
color: #fff;
}
“`
CSS変数を使った場合のCSSは、以下のようになります。
“`CSS
:root {
–main-color: #333;
}
.heading {
border-bottom: 1px solid var(–main-color);
}
.button {
background: var(–main-color);
color: #fff;
}
“`
「–」で始まっているのがCSS変数です。上記の例では、:rootに対してCSS変数–main-colorを設定することで、CSS全体で–main-colorを使えるようにしています。
そして.headingとbuttonに対して、それぞれvar(変数名)という形で–main-colorを呼び出しています。
CSS変数には以下のメリットがあります。
- 同じ値を一括して管理できる
- それぞれの値に意味を持たせることができる
それぞれ解説します。
同じ値を一括して管理できる
仮に、「グレーの箇所を青色に変更したい」という要望があったとしましょう。CSS変数を使わない場合は、CSSファイル全体に対して「#333」で検索・置換などをする必要があります。しかしこの方法だと、例えば「#333999」など、意図しない箇所を変更してしまう可能性があります。一方でCSS変数を使えば、:rootにあるCSS変数の値を変更するだけですみます。
色に意味を持たせることができる
色の値（ここでは#333）を見ただけでは、その色がこのWebサイトにおいてどのような意味を持つのか、判断できません。CSS変数で色にラベル（ここでは–main-color=メインカラー）を貼ることで、その色の意味がわかりやすくなります。
まとめ
この記事では、デザインから共通点を見つけ出しそれをコードに反映させることで、保守性の高いコードを書く基本をご紹介しました。この記事を入り口にして、変更に強いコードを書いていただければ幸いです。
