関連サイト
本書の関連ページが用意されています。
内容紹介
本書は大きくCSSとSassについて学ぶChapter1～3と、サンプルサイトの制作プロセスを通じて現場で使えるスキルを養うChapter4の2部構成となっています。
Chpater01 CSSの基本と設計
CSSとはなにか、という話から、CSSの書き方、CSS設計まで解説します。CSS設計ではOOCSS（オーオーシーエスエス）、BEM(ベム)、SMACSS (スマックス)といった手法を解説します。
Chpater02 CSSの基礎知識
CSSを使いこなすために知っておいたいセレクタ、カスケードと継承、詳細度、ボックスモデル、マージンの相殺、デフォルトスタイルシートとリセットCSSなどの事項を取り上げ、解説していきます。
Chapter03 CSSを効率的に書くSass
CSSを管理・運用するのに使われるCSSプリプロセッサの1つ、Sassについて解説します。
Chpater04 サンプルで学ぶCSSコーディング
ここからはサンプルサイトを実際に設計しながら、コーディングのテクニックを学んでいきます。コーディングガイドラインを考え、サイトの仕様を確認し、サイトで共通で使える部分を検討します。それが終わったら、レイアウト作成、エレメント作成、コンポーネント作成、と順次デザイン・制作を進めていきます。
本書はなるべく実際に案件に近い形でサンプルコードを作成し、 制作時に抑えておきたいポイントをまとめています。
Web業界の技術のスピード感は早いと言われますが一度スピードに乗ってしまえば、技術のキャッチアップもスムーズに行えるようになります。
本書を読むことで早い段階で「現場で使えるスキル」が身につき、さらにステップアップができるでしょう。この本が、コーダーを目指す皆様の道しるべとなりますよう、願ってやみません。
（著者まえがきより）
書誌情報
- 著者: 田村 章吾
- 発行日: 2021-08-27 (紙書籍版発行日: 2021-08-27)
- 最終更新日: 2021-08-27
- バージョン: 1.0.0
- ページ数: 360ページ(PDF版換算)
- 対応フォーマット: PDF
- 出版社: マイナビ出版
対象読者
著者について
田村 章吾
ましじめ株式会社 代表 HTML&CSSコーダー
福岡県北九州市在住。物の構造やバックグラウンドを見ることが好きで、自動車整備士の道へ。 その後デジタルハリウッドでWebサイトの制作を学びWeb業界に転職。制作会社、フリーランスを経て、ましじめ株式会社を設立。プロジェクトでは主にフロントエンド開発からCMSを利用したWebサイト制作を担当する。サイトのメンテナンス、CMS構築の情報設計や大規模サイトのCSS設計を得意とする。
目次
Chpater01 CSSの基本と設計
- 1-1 CSS とは
- 1-1-1 Web ページに含まれる要素
- 1-1-2 CSS を取り巻く技術情報
- 1-2 CSS の書き方
- 1-2-1 基本の書き方
- 1-2-2 記述する場所
- 1-2-3 カスケードと継承、優先度と詳細度
- 1-2-4 CSS の問題点
- 1-3 CSS 設計の重要性
- 1-3-1 CSS 設計とは
- 1-3-2 OOCSS（オーオーシーエスエス）
- 1-3-3 BEM( ベム)
- 1-3-4 SMACSS ( スマックス)
- 1-3-5 まとめ
- 1-4 CSS 設計を考える
- 1-4-1 CSS の設計において重要なポイント
- 1-4-2 まとめ
Chpater02 CSSの基礎知識
- 2-1 きちんと理解しておくCSS の基礎知識
- 2-1-1 CSS の基礎知識
- 2-1-2 セレクタ
- 2-1-3 カスケードと継承、詳細度
- 2-1-4 ブロックボックスとインラインボックス
- 2-1-5 ボックスモデル
- 2-1-6 マージンの相殺
- 2-1-7 デフォルトスタイルシートとリセットCSS
- 2-2 CSS コーディングのトラブルシューティング
- 2-2-1 CSS にトラブルはつきもの
- 2-2-2 トラブルシューティング
- 2-3 さまざまなブラウザへの対応
- 2-3-1 ブラウザの種類
- 2-3-2 ターゲットブラウザの選定
- 2-3-3 クロスブラウザ対応
- 2-3-4 ブラウザで表示をチェックするポイント
Chapter03 CSSを効率的に書くSass
- 3-1 Sass の基本
- 3-1-1 Sass とは
- 3-1-2 2 種類の記法
- 3-1-3 Sass のさまざまなコンパイル方法
- 3-1-4 まとめ
- 3-2 Sass の基本機能
- 3-2-1 Sass の機能
- 3-2-2 ネスト（入れ子）
- 3-2-3 コメント
- 3-2-4 変数
- 3-2-5 補完（インターポレーション）
- 3-2-6 演算
- 3-2-7 @ ルール（At-Rules）
- 3-2-8 制御構文
- 3-2-9 まとめ
Chpater04 サンプルで学ぶCSSコーディング
- 4-1 コーディング作業の考え方と準備
- 4-1-1 コーディングをはじめる前に
- 4-1-2 準備する
- 4-1-3 共通部分を見極め、デザインが意図することを考える
- 4-1-4 CSS とHTML を管理する
- 4-1-5 テンプレート / レイアウト / コンポーネント / エレメントを定義する・229
- 4-1-6 確認する環境を準備する
- 4-1-7 常に使うものは準備しておく
- 4-2 コーディングガイドラインを考える
- 4-2-1 一貫したコード、作業効率を上げるために
- 4-3 コーディングガイドライン
- 4-3-1 CSS コーディングスタイルガイド
- 4-4 サイトの仕様を確認する
- 4-4-1 デザイン全体を確認する
- 4-4-2 コーディングの指示を確認する
- 4-5 共通部分を確認する
- 4-5-1 デザインデータを確認し、共通パーツを洗いだす
- 4-5-2 サンプルデザイン
- 4-5-3 デザインを確認してテンプレートを分類する
- 4-5-4 共通設定箇所を探す
- 4-5-5 レイアウトを確認する
- 4-5-6 パーツを確認する
- 4-5-7 ファイル構成とコンパイル
- 4-6 レイアウトを作成する
- 4-6-1 フッターの作成
- 4-6-2 ヘッダーの作成
- 4-6-3 メインカラムレイアウトの作成
- 4-7 エレメントを作成する
- 4-7-1 詳細ページを構成する要素
- 4-7-2 見出し
- 4-7-3 リスト
- 4-7-4 テーブル
- 4-7-5 本文
- 4-7-6 ボタン
- 4-7-7 Q&A
- 4-7-8 画像
- 4-8 コンポーネントを作成する
- 4-8-1 一覧ページを構成する要素
- 4-8-2 パンくずリスト
- 4-8-3 ヘッドライン
- 4-8-4 ページャー
- 4-8-5 カード