WEB部ログ

WEB部メンバーの勉強用ブログです。

WEB部メンバーの勉強用ブログです。

スタイルを部品ごとに分ける!マルチクラスのすゝめ

こんにちは!3年の太田です。

私は、冬休みに1冊、CSSに関する本を読みました。

今回は、その本に紹介されていた"マルチクラス"という考え方についてご紹介します!

"マルチクラス"とは?

要素にクラスをつける際の考え方には、"シングルクラス" と "マルチクラス" の2つがあります。

  • シングルクラス・・・クラスを1つだけ付けてUIを作る。作るクラスが少なくて済むが、純粋なCSSで書くと大変。
  • マルチクラス・・・複数のクラスを付けてUIを作る。デザインが変更になった際のCSSの変更は楽だが、UIが複雑になるほど加えるクラスが増えてしまう。

ざっくり説明すると、それぞれこういったものになります。

どうやって使うの?

例えば、以下のような3つのボタンを作らなければならなくなったとき、どうしますか?

私たちが普段使うシングルクラスの考え方でいけば、".web-bu" , ".zone" , ".dagaya" という3つのクラスを作り、それぞれにborder-radiusやbackground、colorなどのCSSを設定していきますが、マルチクラスの考え方では、共通する部分ごとにクラスを分けます。

今回の例でいくと、".button" , ".middle" , ".large" , ".web-bu" , "zone" , ".dagaya" の6つを作ることになります。

index.html

<a href="#" class="button large web-bu">WEB部!</a>
<a href="#" class="button middle zone">ぞね!</a>
<a href="#" class="button middle dagaya">だがや!</a>

style.css

.button{ /* すべてのボタンの共通の設定 */
 float:left;
 display:block;
 margin:20px 10px;
 text-align:center;
 text-decoration:none;
 border-radius:5px;
}
.middle{ /* 大きさの設定(Mサイズ) */
 width:80px;
 height:60px;
 line-height:60px;
}
.large{ /* 大きさの設定(Lサイズ) */
 width:100px;
 height:75px;
 line-height:75px;
}
.web-bu{ /* WEB部ボタン独自の設定 */
 color:#FFF;
 border:1px solid #425098;
 background-color:#a1a7e9;
}
.zone{ /* ぞねボタン独自の設定 */
 color:#FFF;
 border-bottom:3px solid #425098;
 background-color:#5f66b2;
}
.dagaya{ /* だがやボタン独自の設定 */
 color:#604d1f;
 border-bottom:3px solid #bba36a;
 background-color:#d8c28d;
}

このように、マルチクラスでUIを作る際には、クラスを共通設定、大きさ、色や形のバリエーションなどに分け、それらを組み合わせて作ります。

マルチクラスにするメリット

マルチクラスを取り入れていると、例えば、「だがや!」ボタンの大きさを「WEB部!」ボタンと揃えることになった際にはクラスを付け替えるだけで済みますし、ボタンの角をもっと丸くしたいときには ".button" のCSSだけ書き変えれば良くなります。

このように、デザインの変更があった際に更新がしやすいというのがマルチクラスのメリットです。

ただし、すべてのUIをマルチクラスで作ってしまうとCSSの行数がとても長くなってしまうので、複数の場所で似たようなデザインのUIを作るときに取り入れるとよさそうです。

 

マルチクラスの考え方はそれほど難しいものではないと思うので、ぜひ取り入れてみてくださいね!

ちなみに、今回私がこのことについて学んだ本は、『Web制作者のためのCSS設計の教科書』という本です。わかりやすくてとても勉強になる良い本だったので、皆さんも機会があれば読んでみてください!!

www.amazon.co.jp