CSS設計完全ガイド ~詳細解説+実践的モジュール集 [単行本]
    • CSS設計完全ガイド ~詳細解説+実践的モジュール集 [単行本]

    • ¥3,608109 ゴールドポイント(3%還元)
    • 在庫あり2025年4月28日月曜日までヨドバシエクストリームサービス便(無料)がお届け
100000009003247614

CSS設計完全ガイド ~詳細解説+実践的モジュール集 [単行本]

  • 4.0
価格:¥3,608(税込)
ゴールドポイント:109 ゴールドポイント(3%還元)(¥109相当)
フォーマット:
お届け日:在庫あり今すぐのご注文で、2025年4月28日月曜日までヨドバシエクストリームサービス便(無料)がお届けします。届け先変更]詳しくはこちら
出版社:技術評論社
販売開始日: 2020/02/27
お取り扱い: のお取り扱い商品です。
ご確認事項:返品不可
店舗受け取りが可能です
マルチメディアAkibaマルチメディア梅田マルチメディア博多にて24時間営業時間外でもお受け取りいただけるようになりました

CSS設計完全ガイド ~詳細解説+実践的モジュール集 の 商品概要

  • 要旨(「BOOK」データベースより)

    SMACSS、BEM、PRECSSなどさまざまな手法の考え方がわかる。ボタン、ラベル、カード、テーブル…実例コードを多数掲載。CSSの理解を深め、8つのポイントで設計!
  • 目次

    ------------------------------------------------
    Chapter 1 CSSの歴史と問題点
    ------------------------------------------------
    1-1 CSSの始まり
    CSSの役割と目的
    1-2 CSSの問題点
    「カオス」になるCSS
    CSSはすべてがグローバルスコープ
    1-3 複雑化するWeb開発
    変更不可能なHTML/CSSと付き合う
    増加するページ数
    頻繁に変更される「状態」
    1-4 解決策として生まれたCSS設計
    1-5 CSS設計とデザインシステムとの連携

    ------------------------------------------------
    Chapter 2 CSS設計の基本と実践
    ------------------------------------------------
    2-1 【CSS設計の前に】CSSの基本 詳細度とセレクター
    セレクターの種類と、本書における呼称
    カスケーディングの基礎
    詳細度の基礎
    2-2 【CSS設計の前に】リセットCSS
    ブラウザのデフォルトスタイル
    ハードリセット系CSS
    ノーマライズ系CSS
    リセットCSSはCSS設計にどのような影響を及ぼすか?
    2-3 【CSS設計の前に】英単語を結合する方式の名前
    2-4 よいCSS設計が目指す4つのゴール
    予測できる
    再利用できる
    保守できる
    拡張できる
    2-5 CSS設計の実践と8つのポイント
    1. 特性に応じてCSSを分類する
    2. HTMLとスタイリングが疎結合である
    3. 影響範囲がみだりに広すぎない
    4. 特定のコンテキストにみだりに依存していない
    5. 詳細度がみだりに高くない
    6. クラス名から影響範囲が想像できる
    7. クラス名から見た目・機能・役割が想像できる
    8. 拡張しやすい
    2-6 モジュールの粒度を考える
    改めてモジュールとは
    モジュールの粒度のばらつきが引き起こす問題
    モジュール粒度の指針
    2-7 CSS設計の必要性

    ------------------------------------------------
    Chapter 3 さまざまな設計手法
    ------------------------------------------------
    3-1 本Chapterの前提
    3-2 OOCSS
    ストラクチャーとスキンの分離
    コンテナとコンテンツの分離
    OOCSSのまとめ
    3-3 SMACSS
    ベースルール
    レイアウトルール
    モジュールルール
    ステートルール
    テーマルール
    SMACSSのまとめ
    3-4 BEM
    BEMの基本
    Blockの基本
    Elementの基本
    Modifierの基本
    Blockのネスト
    Mix
    Mixでは対処できない場合
    Modifier名は省略してはいけない
    BEMのその他の命名規則
    BEMのまとめ
    3-5 PRECSS
    基本的な指針
    ベースグループ
    レイアウトグループ
    モジュールグループ
    ヘルパーグループ
    ユニークグループ
    プログラムグループ
    オリジナルグループ
    PRECSSのまとめ

    ------------------------------------------------
    Chapter 4 レイアウトの設計
    ------------------------------------------------
    4-1 Chapter 4~Chapter 7のコードの前提
    使用するリセットCSS
    独自に定義したベーススタイル
    使用する設計手法
    4-2 本Chapterで扱うサンプル
    4-3 ヘッダー
    ①.header__inner / .ly_header_innerに対するスタイリング
    4-4 フッター
    ①ボーダーの実装方法の違い
    ヘッダーの内側とフッターの内側のスタイリングは共通化すべきか?
    4-5 コンテンツエリア
    1カラム設計
    2カラム設計

    ------------------------------------------------
    Chapter 5 CSS設計モジュール集① 最小モジュール
    ------------------------------------------------
    5-1 本Chapter以降のモジュール集の進め方
    拡張パターンについて
    バリエーションについて
    BEMとPRECSSの差違について
    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 最小モジュールと複合モジュールの組み合わせ
    ボタン + 画像半分サイズメディア
    ボタン + CTAエリア
    ラベル + ポストリスト
    7-3 複合モジュール同士の組み合わせ
    FAQ + リスト
    アコーディオン + カード + CTAエリア

    ------------------------------------------------
    Chapter 8 CSS設計をより活かすためのスタイルガイド
    ------------------------------------------------
    8-1 スタイルガイドとは
    8-2 なぜスタイルガイドが必要か?
    8-3 スタイルガイドを作成する
    スタイルガイドジェネレーターを使用する
    手動で作成する
    8-4 スタイルガイドを作成する方針のまとめ

    ------------------------------------------------
    Chapter 9 CSS開発に役立つその他の技術
    ------------------------------------------------
    9-1 CSS開発を効率化する、ミスを減らす
    Sass
    Browsersync
    Autoprefixer
    9-2 人による差異をなくす
    CSScomb
    EditorConfig
    Prettier
    9-3 リファクタリングのヒントを得る
    Stylelint
    CSS Stats
    9-4 CSSを軽量化する
    CSS MQPacker
    cssnano
    9-5 HTML開発を効率化する
    Nunjucks
    EJS
    Pug
    9-6 開発にまつわるタスクを自動処理する
    Prepros
    Gulp
    webpack
  • 内容紹介

    CSS設計は多くの現場で導入されていますが、いまだに悩みがつきません。プロジェクトの大小や性質によって最適解も変わってきます。
    そこで本書は、CSSのさまざまな設計手法を紹介しつつ、考え方や実践のポイントを明確化します。そのうえでボタン、ラベル、カード、テーブル…といったウェブの定番的なモジュールを網羅的に取り上げ、さらにはそれらの組み合わせ方まで、実践的なコードを紹介します。
    代表的な設計手法である「BEM」と、著者が開発した設計手法「PRECSS」によって対比的な解説を加えており、思考をなぞることで最適解が炙り出されることでしょう。
    駆け出しのウェブ開発者、フロントエンドエンジニアの方に、ぜひ読んでいただきたい1冊です。
  • 著者紹介(「BOOK著者紹介情報」より)(本データはこの書籍が刊行された当時に掲載されていたものです)

    半田 惇志(ハンダ アツシ)
    株式会社24‐7/テクニカルディレクター・株式会社パンセ/シニアエンジニア
  • 著者について

    半田 惇志 (ハンダ アツシ)
    半田惇志(はんだ あつし)
    株式会社24-7/テクニカルディレクター・株式会社パンセ/シニアエンジニア。
    主に受託制作のフロントエンドの開発から業務全体のワークフロー設計・改善、マーケティングオートメーション、コンテンツ制作まで幅広く業務を行う。特に強い専門領域はHubSpot CMSとCSS設計。好きな言葉は人間万事塞翁が馬。

    著作物 : Webのための次世代エディタ Bracketsの教科書(Kindle版のみ取り扱い)
    PRECSS(http://precss.io/ja/)
    ブログ : Thinking Salad(https://thinkingsalad.com/)
    Twitter : @assialiholic

CSS設計完全ガイド ~詳細解説+実践的モジュール集 の商品スペック

商品仕様
出版社名:技術評論社
著者名:半田 惇志(著)
発行年月日:2020/03/11
ISBN-10:429711173X
ISBN-13:9784297111731
判型:B5
対象:専門
発行形態:単行本
内容:電子通信
言語:日本語
ページ数:511ページ
縦:23cm
横:19cm
他の技術評論社の書籍を探す

    技術評論社 CSS設計完全ガイド ~詳細解説+実践的モジュール集 [単行本] に関するレビューとQ&A

    商品に関するご意見やご感想、購入者への質問をお待ちしています!