共通するスタイルをまとめてCSSを劇的に効率化する書き方

今回はWEBデザイン初心者の方向けに、CSSの書き方をちょっとだけ工夫させるだけで効率的にコーディング作業を進められるようになる簡単なテクニックをご紹介します。

ほんとにちょっとしたことなんですがやるかやらないかでCSSのコーディングをする作業時間はもちろん、作った後にページのカスタマイズをする時なんかにも効率的になることがあるので、できるだけ綺麗なCSSコーディングができるようになりましょう。

今回のお題にもなっているCSSを効率化させるコツですが、結論から言うと共通しているCSSをまとめて無駄な記述を減らすということです。

HTML・CSSコーディング初心者の方は重複しているCSSがあるにも関わらず、一つ一つの要素に対して同じCSSを書き込んでしまっている方が多いです。

簡単なウェブサイト制作でしたらclass名やid名の名前をわかりやすく付けていれば何となく理解はできますしそれほど時間も掛からないかもしれませんが、複雑なサイトになるにつれてclass名やid名をわかりやすくするだけではどこの要素のことなのかわからなかったり、カスタマイズをする時に無駄な時間を大きく割いてしまうことになります。

また、チームで仕事をする時などは共通するCSSの書き方などのルールをしっかり決めておけば、誰でも効率的に仕事を進めることができるようになるのでCSSのルールを決めておくということは極めて重要なことになります。

共通しているスタイルを探そう

それでは実際に共通しているCSSを一つにまとめてみましょう。下のデモサイトを見てください。

デモサイト

デモサイト

こちらのデモサイトのHTMLはこんな感じでマークアップしました。↓

HTML

<div id="wrapper">
  <div class="title">タイトル部分</div>
  <div class="body">
    <div class="main">メイン部分</div>
    <div class="sidebar">
      <div class="side-1">サイドバー1</div>
      <div class="side-2">サイドバー2</div>
      <div class="side-3">サイドバー3</div>
    </div>
  </div>
  <div class="footer common">フッター</div>
</div>

6個のブロックの中にそれぞれ文字が入っていますが、6個のブロック全てに共通するCSSは何でしょうか?

  • color: white
  • text-align:center
  • padding-top:30px
  • box-sizing: border-box

上の4つのスタイルが、今回の場合6個のブロックに共通するCSSになります。

新しいclassを作ってスタイルをまとめる方法

一つ一つの要素に対してこれらのCSSを書くのではなく、今回はこれらのスタイルをcommonという名前のクラスでまとめておきましょう。

.common{
  color: #fff;
  text-align: center;
  padding-top: 30px;
  box-sizing: border-box;
}

同じ考え方で他にも共通するCSSを探してみましょう。

複数のclassを,(コンマ)で繋げる方法

タイトル部分とフッターは文字が大きく太くなっているのがわかりますのでまとめてみます。

.title,
.footer{
  font-size: 25px;
  font-weight: bold;
}

今回は数が少ないので新しいクラスを使わずに既存のクラスを,(コンマ)で繋げてまとめました。

親要素のclass名から子要素のスタイルをまとめる方法

またサイドバー1、サイドバー2、サイドバー3は全て同じ大きさになっているので、これも一つにまとめてみましょう。

.sidebar div{
  width: 200px;
  height: 200px;
}

HTMLを見てみるとサイドバー部分全体にsidebarというクラス名がついたdivがありましたので、この場合はsidebarのクラス名の要素の中にある全てのdivという意味になるCSSの書き方で纏めました。

このようにCSSをまとめる方法でもいくつか方法があり、CSSセレクタを使い分けて効率化させるのもテクニックの一つですので少しずつ慣れていきましょう。

これらの方法でCSSをまとめたものがこちらになります。

HTML

<div id="wrapper">
  <div class="title common">タイトル部分</div>
  <div class="body">
    <div class="main common">メイン部分</div>
    <div class="sidebar">
      <div class="side-1 common">サイドバー1</div>
      <div class="side-2 common">サイドバー2</div>
      <div class="side-3 common">サイドバー3</div>
    </div>
  </div>
  <div class="footer common">フッター</div>
</div>

CSS

#wrapper{
  width: 600px;
  height: 900px;
  margin: 0 auto;
}

.common{
  color: #fff;
  text-align: center;
  padding-top: 30px;
  box-sizing: border-box;
}

.title{
  width: 600px;
  height: 100px;
  background: blue;
}

.title,
.footer{
  font-size: 25px;
  font-weight: bold;
}

.body{
  width: 600px;
  height: 600px;
}

.main{
  width: 400px;
  height: 600px;
  float: left;
  background: skyblue;
}

.sidebar{
  width: 200px;
  height: 600px;
  float: left;
}

.sidebar div{
  width: 200px;
  height: 200px;
}

.side-1{
  background: gray;
}

.side-2{
  background: orange;
}

.side-3{
  background: red;
}

.footer{
  width: 600px;
  height: 100px;
  background: lime;
}

このようにある程度まとめたCSSの書き方をしていればカスタマイズをする時も比較的楽になります。

例えば全ての文字を黄色にして、左寄せにして、左側に少し空白を入れようと思った時はcommonのクラスを下のように変更するだけで全ての要素にスタイルを当てることができます。

.common{
  color: yellow;
  text-align: left;
  padding-top: 30px;
  padding-left: 20px;
  box-sizing: border-box;
}

デモサイト

もし一つ一つの要素にスタイルを当てていたら6ヶ所で同じことを書かなければいけなかったのですが、CSSをまとめていたことで1ヶ所だけの変更で全てのスタイルが適用されました。

まとめ

今回は初心者の方向けにCSSをまとめて効率化させる方法を書いてきましたがいかがでしたでしょうか?

CSSを習得したとしても誰が見ても綺麗に書くことは意外と難しいものです。日常のコーディングから常に綺麗なCSSを書くことを意識していれば自然と上達してくるので、最初は少し時間が掛かっても綺麗なコーディングをするように心がけましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です