試験公開中

このエントリーをはてなブックマークに追加

ざっくりつかむ CSS設計

マイナビ出版

3,168円 (2,880円+税)

Web制作の現場でこれだけは知っておきたい、CSSの扱い方、管理、運用の基本!

関連サイト

本書の関連ページが用意されています。

内容紹介

Web開発が複雑化した現在、CSSについても仕様や知識を知っているだけでは対応できない問題が増えています。破綻しないCSSを組むには、どのように考えて設計すればよいか? デザイナーや他の開発者と連携する場合のルール作りは? ReactやVue.jsを使ったWeb開発の案件の場合はどうしよう? Sassなどを使ってビルドする場合は? ……などなど。

本書は、これからWebサイト制作・開発の現場に入る人や、現場で悩んでいる人を対象に、CSSの設計についてわかりやすく解説するものです。BEMやSMACSSといった設計手法、余白の設計、スタイルガイド、SassやAutoprefixer、PostCSSなどを使ったビルド、ユーティリティファーストという考え方。Web制作・開発に多種多様な選択肢がある中で、プロジェクトの要件と状況に応じて最適なCSS設計を導き出すための「思考」を鍛える内容となっています。

●本書の構成

本書はトピックごとに分かれた短い24の章で構成されています。

●対象とする読者

「この本の読者として想定したのは、フロントまわりの実装を主業務とする会社に入ってきた、新しいメンバーである。新しいメンバーと言っても、すでに高いスキルを持っているような人物は想定していない。まだWebの技術にそこまで詳しくはなく、これから開発のスキルを高めていこうと考えているような人物を想定している。そのような人に対し、実務で覚えろ、経験だと丸投げするわけにはいかない。この能力は単純に何かを暗記したり、仕組みを理解するだけでは成り立たない部分がある。なので、とりあえず参考書としてこの本を読んで下さい。そう言って渡したい内容をまとめたのがこの本である。

・こういうことを知っていてくれたら、仕事を頼む側としてはすごい助かる
・こういうことを知っていたら、きっとあなたはCSS設計を行う役割として、周りと適切にコミュニケーションをとっていける

そんな内容にしたいと考えた。」(著者「はじめに」より)

長らくWebサイト制作/アプリケーション開発の現場に身を置いてきた著者が、その経験を踏まえてまとめた本書を、ぜひご活用ください!

書誌情報

  • 著者: 高津戸 壮
  • 発行日: (紙書籍版発行日: 2021-12-23)
  • 最終更新日: 2021-12-23
  • バージョン: 1.0.0
  • ページ数: 272ページ(PDF版換算)
  • 対応フォーマット: PDF
  • 出版社: マイナビ出版

対象読者

著者について

高津戸 壮

株式会社ピクセルグリッド テクニカルディレクター
Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。数多くのWebサイト、WebアプリケーションのHTML、CSS、JavaScript実装に携わってきた。受託案件を中心にフロント周りの実装、設計、テクニカルディレクションを行う。スケーラビリティを考慮したHTMLテンプレート設計・実装、JavaScriptを使った込み入ったUIの設計・実装を得意分野とする。
著書に『改訂版 Webデザイナーのための jQuery入門』(技術評論社)がある。

目次

第1回 CSSを書くということについて

第2回 CSS設計が無いと困ること

第3回 とりあえずBEM

第4回 BEMのB = Block

第5回 BEMのE = Element

第6回 BEMのM = Modifier

第7回 BEMその他

第8回 SMACSS: Baseルール

第9回 SMACSS: Layoutルール

第10回 SMACSS: Themeルール

第11回 ユーティリティクラス

第12回 名前空間的接頭辞

第13回 Block間の余白の設計: 前編

第14回 Block間の余白の設計: 中編

第15回 Block間の余白の設計: 後編

第16回 プロジェクトの中でうまく立ち回る

第17回 スタイルガイドのススメ

第18回 ビルドしてCSSを作る: 書いたCSSはそのまま使わない

第19回 ビルドしてCSSを作る: Sass

第20回 ビルドしてCSSを作る: Autoprefixer

第21回 ビルドしてCSSを作る: PostCSS

第22回 もっとコンポーネント: 汎用的なBlock、限定的なBlock

第23回 もっとコンポーネント: Blockの入れ子

第24回 ユーティリティファースト

Home 書籍一覧 ざっくりつかむ CSS設計 ▲ ページトップへ戻る