小幡 知弘 
【目次】中規模サイトへの道
- その１ 全体ガイダンスと、チャプター１について（現在位置）
- その２ 実例をコーディングと、チャプター２について（未制作）
- その３ 脱初心者の気づきと、チャプター３について（未制作）
- and more…
CSS設計完全ガイドを読み、中規模サイトの設計へ
今までCSS設計について、ほとんど勉強せずにWebサイトのコーディングを行ってきました。
自分のポートフォリオとして作成したサイトは、その後の保守・運営についてはほとんど考えておらず、変更・修正・追加にとても弱いCSS設計になっていると気が付きました。一人で運営していく場合も、これらCSS設計を改善させることは重要ですが、企業の中に入りチームとしてコーディングに関わらせて貰えるようにするには、最優先事項であると考え、CSS設計について実務・現場レベルに少しでも近づける様に、勉強することにしました。
この記事（連載）はCSS素人が中規模サイト制作を目標に、どのように学習していったのかをログとして残したものです。
参考文献は、『CSS設計完全ガイド』
今回はこちら『CSS設計完全ガイド』を参考に、CSSについて学びなおしました。
以前からCSSについて複数人でのコーディングを意識したコーディングをしなければならないと感じていましたが、こちらの参考書は3280円＋税とそれなりのお値段でしたので、なんとかWebの情報だけでなんとかならないかと考えていました。
しかし、制作物を見て頂いた方から「修正や変更に対応できるコーディングが出来るようになる必要がある」と、お言葉を頂き再勉強に踏み切りました。この時CSS設計だけでなく、他のご指摘も頂きましたが、ここでは省略します。
改めて、制作物を見て頂き、その反応を頂けることは貴重な事だと感じています。貴重なお時間を頂き、ありがとうございます。
CSS設計のための、９つのチャプター
『CSS設計完全ガイド』は、全部で９つのチャプターで編成されています。
そのどれをとっても、複数人でコーディングをしたことがない私にとっては初めて見る情報ばかりでした。「CSSを使ってWebサイトが作れるようになったけど、次のステップをのぼるためにはどうしたらいいのか？」を考えている人にもピッタリな書籍だと感じました。
まったくCSSについて触れたことが無い人にとっては、理解することが難しい内容となっています。まだまだ基本的な内容しか触れたことがない私は、じっくり読み解きながら、見たことがあるけど理解できてなかった記述方法などがたくさん出てきて、非常にためになる情報ばかりでした。
チャプター１、「変更不可能なCSS」と「Atomic Design(アトミックデザイン)」
チャプター１では、CSSの歴史など基礎的な解説と、CSS設計が必要にな理由について細かく触れられています。
もちろんCSS初心者の私にのっては新世界でした。CSSを使ってWebサイトの見た目が美しくなることにしか着目していなかったので、学ぶ必要がなかったということもあります。
変更不可能なCSSの項目では、私が慣れ親しんでいるWordPressも該当するCMSについて触れていました。
WordPressのCSSもテンプレートファイヤるやCSSを自作して、サーバーにアップロードした後に見てみると、いつの間にか知らないclassがたくさんついていたりします。これが変更可能なCSSということらしく、この自動付与されたCSSと共存していく必要性について詳しく書かれています。読めば読むほど、しっかりとしたCSS設計を構築したくなるモチベーションが高まりました。
また全く知らなかった「アトミックデザイン」についても解説があります。
これは「抽象化する」「分ける」というCSS設計と密接に関わるデザイン手法なので、CSS設計するさいの中核を担うデザインシステムだと感じました。
概要を掴んだ感触と、まとめ
CSS設計とは中規模サイトを複数人で制作し運営していくためには、必須のものであると改めて感じることができました。これを習得しなければ、一人で制作する小規模サイトから成長はできないという焦りを感じつつ、学習モチベーションが高まりました。
CSS設計を学ぶことは、CSSの学習のみならず、アトミックデザインを通してプログラミングの設計についても触れることができます。これからのWeb関連の学習について大きな一歩を踏み出すことができた実感がここまでで十分に感じることが出来ました。
引き続き、チャプターを読み進めて学習ログを残していく予定です。