コーディング技術の洗い直しに「Web制作者のためのCSS設計の教科書」

スポンサーリンク

私のように「自社サイトを自前で作ったりメンテナンスをしている」というWeb担当者さんは要チェックな本です。

Web制作者のためのCSS設計の教科書

元々は別の本を探しに本屋に行きましたが、新刊で平積みされているのを見つけて、なんだか面白そうだったこちらの「Web制作者のためのCSS設計の教科書」を買って帰ってきました。

この本が伝えたいこと

CSS(いわゆる「スタイルシート」)は、簡単にWebサイトの見た目を変えられるのでとても便利ではあるのですが、きちんとしたルール作りをしないと、後からコードを見たときや、他の人が手を入れる時にわかりにくくなったりしてしまいます。

この本はまさに「いかにCSSのメンテナンス性を上げるか」に焦点を絞った、今までになかった本です。

Web制作者のためのCSS設計の教科書

実際、1年前に作った自分のサイトのCSSが、見返してみると「このスタイル、こっちのスタイルの指定と被ってる!いらないじゃん」なことって結構あったりしますからね・・・反省。

スタイルシートは、WordPress公式テーマ申請においても「スタンダード」が求められる

WordPress公式ディレクトリにテーマ申請する際にも、スタイルシートの書き方にも最低限のルールが課せられます。

  • Tabボタンを使うべし。スペースは使ってはならない。
  • アンダースコア(_)を使ってはならない。
  • 記述順序を守るべし(display→position→box→color/text→その他)

などなど。でも、こう見てみると結構「基本」的なものが多いです。

WordPress CSS Cording Standatds

「今までルールなしにCSSを書いていた」という方は、自分が後から見てもわかりやすい基本的なCSSの書き方について、まずはWordPress.orgが用意しているコーディング・スタンダードをチェックしておいても損はないでしょう。

CSS Cording Standards – WordPress.org (英語)

スタンダードから更に発展するために読むとよい

WordPress.orgなどで提唱している「基本」のCSSをまず押さえた上で、この本を読むと、更に効率的なCSSの書き方が理解出来ると思います。

Web制作者のためのCSS設計の教科書:予測しやすいCSS

私もWordPress.orgの公式テーマディレクトリにテーマを申請する程度のレベルは確認していましたが、「メンテナンス性」についてはちゃんと出来てたかな?と反省するよいきっかけになりました。

特に、申請・登録したテーマは、WelcartのCSSを上書きしたりするのに「!important」を結構使いましたからね・・・。「!important」は最後の手段、とのこと!

後半はビギナーには敷居高め?

後半では、CSSプリプロセッサのSASSでの運用のコツや、コンポーネント化したCSSの運用方法などについて解説されています。

Web制作者のためのCSS設計の教科書:SASSの解説

この辺は、CSSがわかるようになった位のレベルでは、ちょっと理解が追いつかないかもしれません。私も、SASSはなんとなくな程度で、運用はしてませんし。

コンポーネントの運用については、例えばBootstrapのようなフレームワークに通じるところはあるので、BootstrapやFoundationなどを使ったことがある方なら、その理想とするところはわかると思います。

この本に向いている人

  • 本やリファレンスなどを見なくても、CSSは大体自分で書ける人
  • 独学でウェブサイトを作っている人
  • BootstrapやFoundationを使ったことがある人
  • 自社サイトのWeb担当
  • WordPress.orgにテーマ申請を考えている人

特に他人に引継ぎをしたり、複数人で管理をする中小企業のWeb担当者さんなんかは、読んでおいて損はないと思います。

教本ではないですし、そんなに厚くないので、読み物のようにさくっと読めるのも○。

Web制作者のためのCSS設計の教科書

  • 出版社 インプレス
  • 著者 谷 拓樹
  • 価格 ¥ 2,376
  • 発売日 2014/7/24

One Response to “コーディング技術の洗い直しに「Web制作者のためのCSS設計の教科書」”

  1. […] 上記に関連するが、本書では段階的に少しずつスタイルを書き足す形式で学習が進む。ただ、将来的にはフレームワークのような汎用的・メンテしやすいCSSが組めるようになるのが理想的なので、その辺の展望があると良かった。学習するなら「Web制作者のためのCSS設計の教科書(レビュー)」へ。 […]

Copyright© 2017 Welcart カスタマイズ ブログ All Rights Reserved.