はじめてのCSS設計フロントエンドエンジニアが教えるメンテナブルなCSS設計手法

田辺丈士（著） , 大江遼（著） , 藤岡龍太（著） , 安光太郎（著） , 株式会社アイ・エム・ジェイ（著）

商品番号: 143150
販売状態: 発売中
納品形態: 宅配便にてお届け
発売日: 2017年03月13日
出荷開始日: 2017年03月14日
ISBN: 9784798143156
判型: B5変
ページ数: 272
キーワード: CSS Web制作

￥2,948（本体￥2,680＋税10％）
送料無料

268pt (10%)
ポイントの使い方はこちら

在庫あり

初回購入から使えるポイント500円分プレゼント

電子書籍はこちら

お気に入り

※1点の税込金額となります。複数の商品をご購入いただいた場合のお支払金額は、単品の税込金額の合計額とは異なる場合がございますので、予めご了承ください。

モダンWebの制作現場へ、ようこそ！
保守性・拡張性・再利用性を高めるモジュール設計の基本と実践。
SMACSS、BEM、モジュール設計、npm、Flexible Boxまで！

CSSのコーディングをしたことのある人であれば、「CSSを指定したら、
思いもしなかった箇所のスタイルが崩れた」「新たに上書きをしていったら
CSSが煩雑になった」「CSSファイルの肥大化して、どこを編集したらいいのか
わからなくなった」といった経験が少なからずあるはずです。

本書は、こうした状況を未然に防ぐための設計手法について、基本から実装方法まで
解説します。CSSの言語的な特性から、「SMACSS」や「BEM」といったCSS設計の
方法論、CSSプリプロセッサ「Sass」の導入、さらに、実際にサンプルの
Webサイト構築フローを追いながら、保守・運用までを考慮した破綻しないCSSを
設計・実装するまでの具体的なプロセスについて一冊で学べます。

実際にサイトデータをダウンロードして学べるから理解が深まります。

【本書の構成】
第1部「CSS設計の前提」
第2部「メンテナブルなCSS」
第3部「CSS設計のプロセス」
第4部「CSS設計の実践」
付録「Flexible Box Layout」

【本書の読者】
・フロントエンド開発の作法を学びたいWebデザイナー&エンジニア
・Webアプリケーションを作りたいWebデザイナー
・フルスタックを目指すWebエンジニア

PART-1　CSS設計の前提
Chapter-01　CSSの設計
Chapter-02　CSSの仕組みと特性
Chapter-03　CSSの破綻

PART-2　メンテナブルなCSS
Chapter-04　基本フォーマット
Chapter-05　カテゴライズ
Chapter-06　命名規則
Chapter-07　スタイルガイド

PART-3　CSS設計のプロセス
Chapter-08　ページ構成要素の洗い出し
Chapter-09　コンテンツのモジュール化
Chapter-10　Sass を利用した効率的なモジュール設計
Chapter-11　モジュール設計

PART-4　CSS設計の実践
Chapter-12　サンプルサイトとその概要
Chapter-13　gulp の構築
Chapter-14　ベースルールを考える
Chapter-15　HTML テンプレートの作成
Chapter-16　コンテンツモジュールの作成
Chapter-17　モジュールを利用したページ制作

APPENDIX　Flexible Box Layout
Appendix-01　Flexible Box Layout Module
Appendix-02　実装方法とプロパティについて

各種問い合わせは以下のリンクからご連絡ください

感想・レビュー

さぼてん さん

2020-04-09

リモートなのでこれ幸いと永遠と高速化のために設計をやっているのですが、考えること多すぎてやばいな～というのが感想です。なまじメディアが大きいと後でしっぺ返しを食らいますし。でも勉強になるから楽しいな～とか言うとメンバーに引かれます。いつか、くっ…爆速でコーディングできてしまった…と言わせてやりたいものです。

yyhhyy さん

2021-07-25

CSS設計の基本からスタイルガイドジェネレータやテンプレートエンジンの紹介まで網羅的な入門書。いかんせん2017年発売のためコードを写経しても動かないので類書で補強が必要。

すべてのレビューを見る