【初心者必見】CSSを綺麗に書くためのたった2つのコツ!

こんにちは!ラクです。

この記事では、「CSSを綺麗に書くためのコツ」を紹介します!

特に初心者の方は、中級者になるために必要な知識だと思うので、是非読んでください!

CSSを綺麗に書くためのコツ

そもそも、綺麗なコードとは?

初心者の方には、そもそも綺麗な書き方がイメージ出来ないと思います。

そこで、綺麗なコードの条件をリストアップしてみます。

  • 後々の修正に対応しやすい。
  • 同じことを何度も書いていない。

これらが綺麗なコードの条件だと思っています。

では、これから修正に対応できて、重複もしない綺麗な書き方を紹介していきます!

要素にクラス名を付けよう

まずは、要素にクラス名を付けるようにしましょう!

「なぜ、クラス名を付ける必要があるの?」と思う方もいると思います。

では、なぜクラス名が必要なのかというと、後々で修正する時に対応しやすくするためです!

例えば、以下のような物を作りたいとします。

<p>綺麗に書きたい</p>
p {
  background: #252b3e;
  color: #d8d1ba;
  width: 200px;
  height: 100px;
  font-size: 22px;
  text-align: center;
  line-height: 100px;
}

このように書いています。なかなか良い出来です!

ですが、、急きょp要素をdiv要素に置き換えることになりました

<div>綺麗に書きたい</div>

すると、、、

全てのCSSが適応されなくなりました泣

こんなことを防ぐために、クラス名をつけます。

<div class="box">綺麗に書きたい</div>
.box {
  background: #252b3e;
  color: #d8d1ba;
  width: 200px;
  height: 100px;
  font-size: 22px;
  text-align: center;
  line-height: 100px;
}

ちゃんと適応されました!

このように、修正しやすく工夫するのが綺麗なコードを書くための一つ目のコツです!!

また、長いコードを書いている時にクラス名を付けることで、どの部分を選択しているのかが一目瞭然になるので一石二鳥ですね♪

同じ部品はグループ化する

続いてのコツは、同じ部品のグループ化です!

こちらも、先ほどと同じで、クラス名を使います。

グループ化とは、Webサイトを作る時に同じスタイルの部品があると思います。(例えばボタンとか)

それらの部品が出てくる度に同じコードを書いてしまっては、見栄えが悪いので、クラスを使ってコードの重複を防ぐことです

例えば、横:100px 縦:50pxのボタンを三つ作りたいとします。

<div>ボタン1</div>
<div>ボタン2</div>
<div>ボタン3</div>

この時、CSSでdivを使って選択しても良いですが先ほど言った通り修正に対応できないし、そもそも他の場所でdiv要素が使われていると、うまく実装できません。

そこで、三つのボタン全てに「btn」というクラスをつけてみます。ちなみに、「btn」とはボタンという意味です。

<div class="btn">ボタン1</div>
<div class="btn">ボタン2</div>
<div class="btn">ボタン3</div>
.btn {
  width: 100px;
  height: 50px;
}

すると、三つのボタンに同じスタイルが実装され、重複もしない綺麗なコードが書けました!

これが、「同じ部品はグループ化する」ということです。

まとめ

ここまでのコツをおさらいすると、

  • 要素にクラス名をつける
  • 同じ部品はグループ化する

この2つです。

この2つを意識するだけで初心者の方でも、今より綺麗なコードがかけると思います!!

コメントを残す

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