今までのCSS本とはかなり異なる! 現在主流の実装・設計・管理方法を徹底解説した良書 -ざっくりつかむ CSS設計

CSSの解説書はたくさんありますが、今までのCSS本とはかなり異なる面にフォーカスされたCSS設計についての解説書を紹介します。

かなり実践的な解説書です、CSSの何に気をつけて、CSSをどのように書き、CSSをどのように管理するとよいか、現在主流の実装・設計・管理方法について、最適解となるためのアプローチや思考プロセスが詳しく解説されています。

ざっくりつかむ CSS設計

本書は中・上級者向けの内容をていねいに詳しく解説したものです。CSSの初心者向けの基礎知識やサンプルなどはありませんが、CSSに取り組んでいる人であれば大丈夫だと思います。CSSの実装・設計・管理の方法にフォーカスされ、プロジェクトレベルでのCSS設計について解説されています。

著者の高津戸氏とはかなり前にお会いしたことがあるのですが、イラストにそっくりな印象がありますね。

ざっくりつかむ CSS設計

ざっくりつかむ CSS設計
ISBN 978-4-8399-7766-5
[Amazonでみる]
[楽天でみる]

著者: 高津戸 壮
出版社: マイナビ出版
発売日: 2021/12/23

本書は昨日発売したばかり!
Kindle版も同時発売されています。

版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

紙面のキャプチャ

本書の大きな特徴のひとつは話しかけるような文章、もしくは心の声のような文章です。公式ドキュメントやマニュアルのような難しく堅苦しい内容でも、すとんと内容が入ってくると思います。

本書はトピックごとに分かれた24の短い章で構成されています。CSS設計とはどんなものかからはじまり、BEMやSMACSSといった設計手法、余白の設計、スタイルガイド、SassやAutoprefixer、PostCSSを使用したビルド、ユーティリティファーストの考え方まで、現場で現在必要とされているCSSについて学べます。

紙面のキャプチャ

CSSは比較的簡単に使用できる難しくない言語ですが、扱う要素やページが増えるにつれ複雑になり、管理・運用といったことも求められ、難易度が上がります。その解決策が、CSS設計です。プロジェクト規模、もしくは複数のメンバーが携わるCSS、未来の自分が携わるCSSの最適解になります。

紙面のキャプチャ

中身を見てみましょう。
本書ではCSS設計の最初のステップとして、BEMが取りあげられています。BEMとはBlock, Element, Modifierの3つ頭文字で、コンポーネントベースでWebサイトを設計するための方法論です。

紙面のキャプチャ

BEMにおけるBlockとは、論理的・機能的に独立したページ内のコンポーネントのことです。例えば、ヘッダ・ナビゲーション・カードなど、コンポーネントの集まりでページが構成されています。

紙面のキャプチャ

どこからどこまでをBlockにすればよいのか悩んだことはありませんか? 本書ではカンプや実際のサイトを例に、さまざまなケースを想定しての思考プロセスや取り組み方が解説されています。

紙面のキャプチャ

CSSリセット、フレームワーク、ツールなど、CSSにはさまざまな選択肢があります。それぞれに長所があり、向き不向きもあります。自分に適した、プロジェクトに適したものを選ぶには、それぞれの特徴(よい面・悪い面)を理解して選ぶ必要があります。

紙面のキャプチャ

他人が考えていることが言語されていると、自分の考えも整理できます。例えば、余白は上・下・上下のどちらにつけるのがよいか、marginpaddingのどちらがよいか、ベター・ベストになる余白設計の考え方が解説されています。

紙面のキャプチャ

スタイルガイドは、コーディング規約やコンポーネント一覧など実装する時にメンバーによってコードがばらばらになってしまうのを統一するためにあります。これにより自分以外のメンバーが書いたコードでも簡単に扱えるようになります。プロジェクトごとにスタイルガイドを用意する必要がありますが、ゼロから作成するのは大変なのでひな形を用意しておくと便利です。ひな形はCSSの進化とともにバージョンアップさせます。

紙面のキャプチャ

ビルドでは、Sass, Autoprefixer, PostCSSにフォーカスして解説されています。それぞれの基本的な使い方をはじめ、どのようにCSS設計に活かすのか、開発のフローを通じて考察します。

紙面のキャプチャ

前述のBlockの命名についてさらに掘り下げられています。classの命名で悩んだことはありませんか? これが正解というclass名はありませんが、どういう基準で命名すればよいかの道しるべはあります。コーディング側からだけでなく、コンテンツ・デザイン側からも見通すとみんなが幸せになれます。

紙面のキャプチャ

最後の章では、Tailwind CSSやAtomic CSSのユーティリティファーストです。CSSはユーティリティの小さなclassで構成されており、複数のclassを組み合わせてコンポーネントや要素をスタイルします。BEMとはまったく異なる手法です。

ざっくりつかむ CSS設計の目次

ざっくりつかむ CSS設計の目次

ざっくりつかむ CSS設計の目次

ざっくりつかむ CSS設計の目次

ざっくりつかむ CSS設計の目次

ざっくりつかむ CSS設計の目次

ざっくりつかむ CSS設計の目次

CSSの実装・設計・管理について、見直したい人に特にお勧めです。新しいノウハウを取り入れるきっかけとして、またほどよく枯れた安定した技術を再検討したり、次のプロジェクトで必ず役立つ知識が満載の一冊です。

ざっくりつかむ CSS設計

ざっくりつかむ CSS設計
ISBN 978-4-8399-7766-5
[Amazonでみる]
[楽天でみる]

著者: 高津戸 壮
出版社: マイナビ出版
発売日: 2021/12/23

献本の御礼

最後に、献本いただいたマイナビ出版の担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

sponsors

top of page

©2022 coliss