HTML・CSS

HTML/CSS初心者は、CSS設計も勉強するべき

Webサイトを作りたいとか、エンジニアを目指してまずはHTML、CSSから勉強している方も多くいるでしょう。

勉強していくとCSSが思った様に表示されないとか、1箇所変えたら変わらなくてもいいところまで変わってしまって、なんで〜!?と困った経験もあるのではないでしょうか?

私もかつてはそんな感じの一人でしたが、CSS設計について勉強したらコーディングがやりやすくなりました。

もっと早く勉強しておけばよかったと思ってますので、コーディングを仕事にしたい方や、フロントエンドエンジニアを目指して勉強している方は、HTML、CSSの基礎を終えたら早い段階で勉強することをオススメします!(1年前の自分にも言ってやりたい)

これからHTML、CSSを勉強するって方は先にこちらからどうぞ

「作りながら学ぶ HTML/CSSデザインの教科書」で勉強してみた感想 HTML/CSSを基礎からちゃんと勉強しようと思い、先日「作りながら学ぶ HTML/CSSデザインの教科書」を購入しました。実際にこの...

CSSは設計が大事

CSSは1行書けば色が変わったり、線が表示できたりとプログラミングに比べたら誰でも簡単に書けてしまいます。

だからこそ、きちんと考えて書かないとページの量や枚数が増えていくとすぐにぐちゃぐちゃになる、実はとっても奥深い言語だと私は思います。(ベテランエンジニアは口を揃えてCSSは難しいと言う人が多い気がしますね)

紙のチラシなどと違ってWebサイトのメリットでもあり特徴でもあるのが、いつでも更新できること。この変えられるという特徴があるからこそ、HTML,CSSは変更に柔軟に対応できる必要があるのです。

それを踏まえて、より良い設計のゴールは以下4点(CSS設計の教科書より参考)

  • 予測しやすい(期待通りに振る舞う)
  • 再利用しやすい(機能ごとに分離されている)
  • 保守しやすい(追加によって既存ルールを壊さない)
  • 拡張しやすい(サイトが大きくなっても拡張しやすい)

CSS初心者がやりがちなこと

私もCSS設計について勉強する前は、ついついやってしまってたこと。

HTML構造に依存するCSS

以下の様にHTMLの構造に依存する書き方。

.hoge h2 {
  color: #fff;
}

.hoge2 ul li a {
  color: #222;
}

これでは、例えばh2がh3に変更になった時やulがolになった時に、HTMLとCSSの両方を変えなくてはならなくなります。

それぞれのタグにclassを付けてスタイルはそこに付ける様にすれば、HTMLのタグが変わってもCSSは書き直す手間が省け保守しやすくなります。

再利用ができていない無駄なCSS

上記の様な2種類のボタンが出てきた時に、無駄なCSSを書いてしまったこと。

.btn-a {
  border : 2px solid #000;
  border-radius : 30px;
  padding : 10px;
  text-align : center;
  background: #000;
  font-size : 20px;
  color: #fff;
}

.btn-b {
  border : 2px solid #000;
  border-radius : 30px;
  padding : 10px;
  text-align : center;
  background: #fff;
  font-size : 20px;
  color: #000;
}

背景と文字の色以外は共通に出来るのに、わざわざ2回も同じことを書いてしまい無駄が多い。仮にborder-radiusを0に変更にしたくなったら、2箇所変えなければいけなくなる。

ボタンの形を作るclassと見た目の色を付けるclassを分けることで、再利用のしやすいCSSになります。

取り消しのCSS

上記の様な見出しAを繰り返した後、見出しBが登場したので背景と下線を取り消して対応してしまった。

.heading {
  padding : 10px;
  border-bottom : 5px solid #707070;
  font-size : 40px;
  background : #F7F7F7;
  font-weight : bold;
}

.heading-b {
  background : none;
  border : none;
}

取り消すことでコードの量が増えますし、数が増えると無理やり取り消しや上書きを繰り返したりして、だんだんグチャグチャになっていきます。これではサイトが大きくなった時に拡張や改修を加えたい時に困ってしまいます。

定義したものを消すのではなく、追加していく様にすれば無駄な取り消しや上書きがなくなるのでいいですね。

classの命名規則も勉強しよう

CSSを書いていくと、必ず直面するのがclass名ってどうすればいいの?ってやつ。私も昔は雰囲気で書いていたので、後で見返すと自分で書いたのに訳がわからないとかも多々。。。

そうならないために、広く使われおり命名規則の問題を解決できるBEM(ベム)を勉強しておくといいですよ!

規則に則っていれば、他の人が見ても分かりやしすくなりますので、チーム開発や将来的に拡張のあるサイト制作にも役立ちます。

CSS設計の勉強にオススメの本

そんな大事なCSS設計の勉強をするなら、この本です!以前、プログラミングスクールの講師にも読むことを勧められました。

CSS設計の参考書というとこの本の名前があがるくらい有名な本だと思うので、これを1冊読んでおけば間違いないかと。命名規則(BEM)についても学べます。

私はこの本を読んでからCSSへの意識が変わりましたし、BEMを取り入れてからコーディングの仕事もやりやすくなりました。ぜひ、CSSの勉強に役立ててみてください!

ちなみにまだSassを勉強していない方は、合わせてやると更にコーディングがはかどりますよ。

ABOUT ME
アヤカ
時間と場所に縛られない生き方をしたくて、OLからエンジニア、Webディレクターを経てフリーランスになった人。仕事はwebサイト制作。ディレクション、デザイン、コーディング、WordPressカスタマイズをやってます。