【HTML CSS】見た目と構造は分離すべし

はじめに

初心者にも取っ付きやすい HTML CSS。しかし学習したての頃は、難しいと感じるところが多々ありました。

単に「見た目を整える」だけ言えば、それほど難しくはないかもしれません。ググって何とか書くことができます。しかし、所謂「良いコード」を書くのは、やはり難しいと感じました。

では具体的にどういうところが難しいと感じたか。まず一つ挙げるとすれば「見た目と構造を分離して考えなくてはいけない」という点です。同じところで躓く人がいるのではないかと思い、今日はこの「見た目と構造の分離」について書いてみようと思います。

見た目と構造を分離するとは？

簡単に言えば、「作りたい見た目通りに上から愚直に書いちゃダメだよ」ということです。具体例で見ていこうと思います。

たとえば、以下のようなアラートを３つ作りたかったとします。

これを HTML CSS で書いてみることにします。

見た目と構造を分離せずに見た目通りに構造を書いてみる

まずは、見た目通りに書いてみます。

alert.html

<div class="success-message">成功！</div>
<div class="warning-message">警告！</div>
<div class="error-message">エラー！</div>

alert.css

.success-message {
  border: 2px solid #494;
  border-radius: 6px;
  padding: 10px;
  background-color: rgba(68, 153, 68, 0.3);
  font-size: 16px;
  color: #333;
}

.warning-message {
  border: 2px solid #DD0;
  border-radius: 6px;
  padding: 10px;
  background-color: rgba(221, 221, 0, 0.3);
  font-size: 16px;
  color: #333;
}

.error-message {
  border: 2px solid #C44;
  border-radius: 6px;
  padding: 10px;
  background-color: rgba(204, 68, 68, 0.3);
  font-size: 16px;
  color: #333;
}

成功と警告とエラーの３つのアラートを作りたいので、まずは成功のアラートを作り、次は警告のアラート、最後にエラーにアラートを作っていく、というような書き方です。

これでもちゃんと作りたいものと同じ見た目のものを作ることができます。しかし結論から言えば、これは良い書き方ではありません。理由は後述するとして、次は見た目と構造を分離して書いてみます。

見た目と構造を分離して考えて書く

alert.html

<div class="alert success">成功！</div>
<div class="alert warning">警告！</div>
<div class="alert error">エラー！</div>

alert.css

.alert {
  border: 2px solid #333;
  border-radius: 6px;
  padding: 10px;
  font-size: 16px;
  color: #333;
}

.success {
  border-color: #494;
  background-color: rgba(68, 153, 68, 0.3);
}

.warning {
  border-color: #DD0;
  background-color: rgba(221, 221, 0, 0.3);
}

.error {
  border-color: #C44;
  background-color: rgba(204, 68, 68, 0.3);
}

3つ共同じアラートの仲間であるため別々に書くのではなく、まずは alert という「ここで言うアラートとはこういうものですよ」というのを先に定義してしまいます。その後、アラートの種類によって異なる部分を書いていきます。

このように書くことで、最初に書いた時より重複したコードが減ってスッキリしているかと思います。こちらの方が断然良いコードです。では何故こちらの方が良いコードなのでしょうか？

見た目と構造を分離するメリット

• デザイン仕様が変わっても一箇所修正すれば良い

たとえば、このアラートメッセージを作成した後に、「文字を太字にして欲しい」と言われた場合を考えてみます。この時、前者の書き方をしていると、3つ全ての CSS に「太字にせよ」というコードを書き加えなければいけません。しかし、後者の書き方であれば alert の一箇所に書き加えるだけで済みます。

• 新しいアラートをすぐに作ることができる

次は新たに以下のようなアラートも追加で作らなくてはならなくなったとします。

この時に前者の書き方をしていると、この新たなアラートがどのような見た目をしているのか一から全て記述しなければいけませんが、後者の書き方であれば以下のような僅かこれだけのコードを追加するだけで済みます。

alert.html

<div class="alert info">お知らせ</div>

alert.css

.info {
  border-color: #48C;
  background-color: rgba(84, 136, 199, 0.3);
}

このように後者の書き方の方が、コードの修正や拡張にとても強いです。この２つの理由により、後者の方が良いコードであると言えます。

終わりに

なんとなくコードを書いても作りたいものが作れてしまうのが、HTML CSS の良いところだと思っています。だからこそ、ある程度勉強すればすぐにある程度は書けるようになります。

しかしだからこそ気をつけていないと、ここでの前者のようなイケてないコードを書いてしまいがちです。イケてるコードを書くための一つのハウツーとして、「見た目と構造は分離せよ」というお話でした。

参考文献

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」 [ 谷拓樹 ] 価格：2420円（税込、送料無料) (2019/11/25時点) 楽天で購入