以前、某CSS設計本を買いましたが、コードの説明をあまりうまく解説されておらず、
また、BEMなどの説明も少し、著者の提唱するCSS設計手法の宣伝本みたいなイメージを持ってしまい、
半分挫折して、自分流なコーディングルールでやっていました。
この本は違い、著者の提唱するCSS設計手法の話だけでなくBEMなど著者の提唱するCSS設計手法以外の説明を十分にされていること、CSSの基礎から説明しながら、CSS設計とは何ぞやを100ページ以上にわたり説明しています。
また具体的にどういうレイアウトになるかという説明やどういうCSSかというの説明も十分にされており、
横文字ばかりの説明を最小限に抑えているのもプラスです。
概念だけではなく実際に使われる具体的な方法もわかりやすく説明しているため、
CSSをある程度勉強した初心者が1歩進めたいときや、
コーダーの教育にも非常に役立ちそうな本な気がします。
購入オプション
Kindle 価格: | ¥3,428 (税込) |
獲得ポイント: | 35ポイント (1%) |

無料のKindleアプリをダウンロードして、スマートフォン、タブレット、またはコンピューターで今すぐKindle本を読むことができます。Kindleデバイスは必要ありません 。詳細はこちら
Kindle Cloud Readerを使い、ブラウザですぐに読むことができます。
携帯電話のカメラを使用する - 以下のコードをスキャンし、Kindleアプリをダウンロードしてください。
CSS設計完全ガイド ~詳細解説+実践的モジュール集 Kindle版
こちらの書籍は 2021/06/30 紙版の4刷に対応するため更新をおこないました。
(概要)
CSS設計の考え方をウェブ開発に取り入れる案件が、プロジェクトの大小を問わず増えています。本書は、CSSのさまざまな設計手法を紹介しつつ、基礎から実践のポイントまで解説します。ボタン、ラベル、カード、テーブルといったモジュールごとの、実践的なコードを多数掲載。代表的な設計手法であるBEMと、著者が独自に開発したPRECSSの2パターンを取り上げています。その他、CSS開発を効率化するさまざまなツールも紹介します。
(こんな方におすすめ)
・CSS設計の知識を吸収し、フロントエンドエンジニアにステップアップしたいひと
・向上心が強く、CSS設計について理解を深めたい初級フロントエンドエンジニア
・会社としてCSSのルールを策定したいチームリーダー等の責任者
(目次)
Chapter 1 CSSの歴史と問題点
1-1 CSSの始まり
1-2 CSSの問題点
1-3 複雑化するWeb開発
1-4 解決策として生まれたCSS設計
1-5 CSS設計とデザインシステムとの連携
Chapter 2 CSS設計の基本と実践
2-1 【CSS設計の前に】CSSの基本 詳細度とセレクターに】リセットCSS
2-3 【CSS設計の前に】英単語を結合する方式の名前
2-4 よいCSS設計が目指す4つのゴール
2-5 CSS設計の実践と8つのポイント
2-6 モジュールの粒度を考える
2-7 CSS設計の必要性
Chapter 3 さまざまな設計手法
3-1 本Chapterの前提
3-2 OOCSS
3-3 SMACSS
3-4 BEM
3-5 PRECSS
Chapter 4 レイアウトの設計
4-1 Chapter 4~Chapter 7のコードの前提
4-2 本Chapterで扱うサンプル
4-3 ヘッダー
4-4 フッター
4-5 コンテンツエリア
Chapter 5 CSS設計モジュール集① 最小モジュール
5-1 本Chapter以降のモジュール集の進め方
5-2 最小モジュールの定義
5-3 ボタン
5-4 アイコン付き小ボタン
5-5 アイコン
5-6 ラベル
5-7 見出し
5-8 注釈
Chapter 6 CSS設計モジュール集② 複合モジュール
6-1 複合モジュールの定義
6-2 メディア
6-3 カード
6-4 テーブル(水平)
6-5 テーブル(垂直)
6-6 テーブル(交差)
6-7 ページャー
6-8 タブナビゲーション
6-9 CTA
6-10 料金表
6-11 FAQ
6-12 アコーディオン
6-13 ジャンボトロン
6-14 ポストリスト
6-15 順序なしリスト
6-16 順序ありリスト
Chapter 7 CSS設計モジュール集③ モジュールの再利用
7-1 最小モジュールを利用した複合モジュールの作成
7-2 最小モジュールと複合モジュールの組み合わせ
7-3 複合モジュール同士の組み合わせ
Chapter 8 CSS設計をより活かすためのスタイルガイド
8-1 スタイルガイドとは
8-2 なぜスタイルガイドが必要か?
8-3 スタイルガイドを作成する
8-4 スタイルガイドを作成する方針のまとめ
Chapter 9 CSS開発に役立つその他の技術
9-1 CSS開発を効率化する、ミスを減らす
9-2 人による差異をなくす
9-3 リファクタリングのヒントを得る
9-4 CSSを軽量化する
9-5 HTML開発を効率化する
9-6 開発にまつわるタスクを自動処理する
(概要)
CSS設計の考え方をウェブ開発に取り入れる案件が、プロジェクトの大小を問わず増えています。本書は、CSSのさまざまな設計手法を紹介しつつ、基礎から実践のポイントまで解説します。ボタン、ラベル、カード、テーブルといったモジュールごとの、実践的なコードを多数掲載。代表的な設計手法であるBEMと、著者が独自に開発したPRECSSの2パターンを取り上げています。その他、CSS開発を効率化するさまざまなツールも紹介します。
(こんな方におすすめ)
・CSS設計の知識を吸収し、フロントエンドエンジニアにステップアップしたいひと
・向上心が強く、CSS設計について理解を深めたい初級フロントエンドエンジニア
・会社としてCSSのルールを策定したいチームリーダー等の責任者
(目次)
Chapter 1 CSSの歴史と問題点
1-1 CSSの始まり
1-2 CSSの問題点
1-3 複雑化するWeb開発
1-4 解決策として生まれたCSS設計
1-5 CSS設計とデザインシステムとの連携
Chapter 2 CSS設計の基本と実践
2-1 【CSS設計の前に】CSSの基本 詳細度とセレクターに】リセットCSS
2-3 【CSS設計の前に】英単語を結合する方式の名前
2-4 よいCSS設計が目指す4つのゴール
2-5 CSS設計の実践と8つのポイント
2-6 モジュールの粒度を考える
2-7 CSS設計の必要性
Chapter 3 さまざまな設計手法
3-1 本Chapterの前提
3-2 OOCSS
3-3 SMACSS
3-4 BEM
3-5 PRECSS
Chapter 4 レイアウトの設計
4-1 Chapter 4~Chapter 7のコードの前提
4-2 本Chapterで扱うサンプル
4-3 ヘッダー
4-4 フッター
4-5 コンテンツエリア
Chapter 5 CSS設計モジュール集① 最小モジュール
5-1 本Chapter以降のモジュール集の進め方
5-2 最小モジュールの定義
5-3 ボタン
5-4 アイコン付き小ボタン
5-5 アイコン
5-6 ラベル
5-7 見出し
5-8 注釈
Chapter 6 CSS設計モジュール集② 複合モジュール
6-1 複合モジュールの定義
6-2 メディア
6-3 カード
6-4 テーブル(水平)
6-5 テーブル(垂直)
6-6 テーブル(交差)
6-7 ページャー
6-8 タブナビゲーション
6-9 CTA
6-10 料金表
6-11 FAQ
6-12 アコーディオン
6-13 ジャンボトロン
6-14 ポストリスト
6-15 順序なしリスト
6-16 順序ありリスト
Chapter 7 CSS設計モジュール集③ モジュールの再利用
7-1 最小モジュールを利用した複合モジュールの作成
7-2 最小モジュールと複合モジュールの組み合わせ
7-3 複合モジュール同士の組み合わせ
Chapter 8 CSS設計をより活かすためのスタイルガイド
8-1 スタイルガイドとは
8-2 なぜスタイルガイドが必要か?
8-3 スタイルガイドを作成する
8-4 スタイルガイドを作成する方針のまとめ
Chapter 9 CSS開発に役立つその他の技術
9-1 CSS開発を効率化する、ミスを減らす
9-2 人による差異をなくす
9-3 リファクタリングのヒントを得る
9-4 CSSを軽量化する
9-5 HTML開発を効率化する
9-6 開発にまつわるタスクを自動処理する
- 言語日本語
- 出版社技術評論社
- 発売日2020/2/27
- ファイルサイズ22850 KB
この本はファイルサイズが大きいため、ダウンロードに時間がかかる場合があります。Kindle端末では、この本を3G接続でダウンロードすることができませんので、Wi-Fiネットワークをご利用ください。
Fashion x Sports タイムセール祭り開催中 5/16[月]23:59まで
期間限定で人気商品がお買い得。最大10%ポイント還元のポイントアップキャンペーンも同時開催中。 今すぐチェック
商品の説明
内容(「BOOK」データベースより)
SMACSS、BEM、PRECSSなどさまざまな手法の考え方がわかる。ボタン、ラベル、カード、テーブル…実例コードを多数掲載。CSSの理解を深め、8つのポイントで設計! --このテキストは、tankobon_softcover版に関連付けられています。
出版社からのコメント
CSS設計はプロジェクトの大小や性質によって最適解も変わってきます。本書は、CSSのさまざまな設計手法を紹介しつつ、考え方や実践のポイントを明確化。ボタン、ラベル、カード、テーブル…といったウェブの定番的なモジュールを網羅的に取り上げ、それらの組み合わせ方まで、実践的なコードを解説。 --このテキストは、tankobon_softcover版に関連付けられています。
著者について
半田惇志(はんだ あつし)
株式会社24-7/テクニカルディレクター・株式会社パンセ/シニアエンジニア。
主に受託制作のフロントエンドの開発から業務全体のワークフロー設計・改善、マーケティングオートメーション、コンテンツ制作まで幅広く業務を行う。特に強い専門領域はHubSpot CMSとCSS設計。好きな言葉は人間万事塞翁が馬。
著作物 : Webのための次世代エディタ Bracketsの教科書(Kindle版のみ取り扱い)
Twitter : @assialiholic --このテキストは、tankobon_softcover版に関連付けられています。
株式会社24-7/テクニカルディレクター・株式会社パンセ/シニアエンジニア。
主に受託制作のフロントエンドの開発から業務全体のワークフロー設計・改善、マーケティングオートメーション、コンテンツ制作まで幅広く業務を行う。特に強い専門領域はHubSpot CMSとCSS設計。好きな言葉は人間万事塞翁が馬。
著作物 : Webのための次世代エディタ Bracketsの教科書(Kindle版のみ取り扱い)
Twitter : @assialiholic --このテキストは、tankobon_softcover版に関連付けられています。
著者略歴 (「BOOK著者紹介情報」より)
半田/惇志
株式会社24‐7/テクニカルディレクター・株式会社パンセ/シニアエンジニア(本データはこの書籍が刊行された当時に掲載されていたものです) --このテキストは、tankobon_softcover版に関連付けられています。
株式会社24‐7/テクニカルディレクター・株式会社パンセ/シニアエンジニア(本データはこの書籍が刊行された当時に掲載されていたものです) --このテキストは、tankobon_softcover版に関連付けられています。
登録情報
- ASIN : B0856YMH7L
- 出版社 : 技術評論社 (2020/2/27)
- 発売日 : 2020/2/27
- 言語 : 日本語
- ファイルサイズ : 22850 KB
- Text-to-Speech(テキスト読み上げ機能) : 有効
- X-Ray : 有効
- Word Wise : 有効にされていません
- 本の長さ : 861ページ
- Amazon 売れ筋ランキング: - 14,299位Kindleストア (の売れ筋ランキングを見るKindleストア)
- - 52位Web構築・管理
- - 644位コンピュータ・IT (Kindleストア)
- カスタマーレビュー:
著者について
著者をフォローして、新作のアップデートや改善されたおすすめを入手してください。

著者の本をもっと発見したり、よく似た著者を見つけたり、著者のブログを読んだりしましょう
この本を読んだ購入者はこれも読んでいます
ページ: 1 / 1 最初に戻るページ: 1 / 1
カスタマーレビュー
5つ星のうち4.3
星5つ中の4.3
195 件のグローバル評価
評価はどのように計算されますか?
全体的な星の評価と星ごとの割合の内訳を計算するために、単純な平均は使用されません。その代わり、レビューの日時がどれだけ新しいかや、レビューアーがAmazonで商品を購入したかどうかなどが考慮されます。また、レビューを分析して信頼性が検証されます。

本の内容云々ではありませんが、商品がこのような破れ、折れのある状態で配送されるのであれば、新品で購入した意味がありません。
このレビューの画像
トップレビュー
上位レビュー、対象国: 日本
レビューのフィルタリング中に問題が発生しました。後でもう一度試してください。
2020年3月1日に日本でレビュー済み
違反を報告する
Amazonで購入
56人のお客様がこれが役に立ったと考えています
役に立った
2020年3月17日に日本でレビュー済み
Amazonで購入
前半はCSSの歴史から始まり、どのようなポイントを意識しながら設計すれば大規模な開発でも耐えられるか具体的なコードとともにわかりやすく説明されている。
後半は前半で紹介されたポイントと照らし合わせながら、BEMとPRECSSのコードが大量に記載されており、理解した後はそのままサンプル集としても流用できる作りになっている。
私は趣味でHTML+CSSを使っているがいつもCSSの影響範囲を制御しきれず困っていた。この本で具体的なポイントが理解できたので、今後の開発に活かせると思う。
分厚くてタイトルもお堅いが、中身は非常に読みやすかった。どのようにCSSを定義していけばカオスにならずに済むのか気になっている人は読んで損はない書籍だと思う。
後半は前半で紹介されたポイントと照らし合わせながら、BEMとPRECSSのコードが大量に記載されており、理解した後はそのままサンプル集としても流用できる作りになっている。
私は趣味でHTML+CSSを使っているがいつもCSSの影響範囲を制御しきれず困っていた。この本で具体的なポイントが理解できたので、今後の開発に活かせると思う。
分厚くてタイトルもお堅いが、中身は非常に読みやすかった。どのようにCSSを定義していけばカオスにならずに済むのか気になっている人は読んで損はない書籍だと思う。
2020年5月15日に日本でレビュー済み
Amazonで購入
今までで1番良い本だった。cssの知識があって仕事で実践している人にはおすすめ。急な修正に対応したいのに、歴代で作ってきた人達の個性が出過ぎて、更新しづらくて困っていた。css関係の本を読みあさってこの本にたどりついた。読み進めていくうちに知識が深まり、ぼんやりと霞んでいたcssがどうしていくべきかクリアになっていく。厚みはあるが一つ一つ丁寧に説明があるので分かりやすかった。筆者の他の本も希望。html についても見てみたい。
2020年11月27日に日本でレビュー済み
Amazonで購入
CSS設計におけるレイアウトとモジュールの分離など重要視しないといけないポイントがわかり易く網羅されており、保守性の高いコードを書く為のルールが具体例をまじえ丁寧に書かれています。
自分もレビューを見てこの本を購入しましたが、良書と言って間違いないと思います。
もちろんこれがベスト!というルールは存在しないが、状況によりどのルールを軸に組んでいくべきか?という思考が出来るようになると思います。お奨めです。
自分もレビューを見てこの本を購入しましたが、良書と言って間違いないと思います。
もちろんこれがベスト!というルールは存在しないが、状況によりどのルールを軸に組んでいくべきか?という思考が出来るようになると思います。お奨めです。