CSSの実務で役立つスキルが身につく、本気で学びたい人にお勧めの解説書 -現場のプロから学ぶ CSSコーディングバイブル

CSSとSassの基礎知識から実装テクニックまで、実務に役立つスキルを身につけたい人にお勧めの解説書を紹介します。

CSSの設計に重点が置かれており、実装をはじめる前の段階から、仕様策定、デザイン確認、そしてレイアウト作成、エレメント作成、コンポーネント作成、とコーディングのテクニックが詳しくていねいに解説された良書です。

本書は本日、8/27発売です！
CSS、そしてSassの初心者から中級者まで、基礎知識のおさらい、設計、実装テクニックまで徹底的に学べる解説書です。実際の案件に近い形でフローを始めるので、仕様策定から検証まで、制作の現場で役立つ知識が身につきます。

Kindle版も発売されています！

• 現場のプロから学ぶ CSSコーディングバイブル Kindle版

Amazonで書籍版またはKindle版を購入した方には、特典PDFが全員もらえます。申込は、下記ページから（要: 購入時の注文番号）。

『現場のプロから学ぶ CSSコーディングバイブル』購入キャンペーンページ

版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

本書は現場レベルのCSSとSassのテクニックを学べる解説書です。完全に初心者向けではありませんが、CSSやSassの基本的な書き方から、コーディングルールを学ぶことができます。

基礎知識から解説されていますが、初心者向けの解説書とは異なり、設計・実装の最終目的にむかうための知識となっています。そのため、CSSの各プロパティでどんな装飾がされるかといったものは一切なく、セレクタの使い方、優先度、詳細度、オブジェクト指向、モジュール化といったものになります。

例えば、セレクタの結合子の使い方では、よく使用する結合子のHTMLとCSS、そしてどのように適用されるかも表示例で簡単に理解できます。

CSSで実装をはじめるには、CSSリセットを使用します。ブラウザごとに使用されているUAスタイルシートは見出しの余白が異なっていたり、フォントサイズが異なっていたり、フォームのデザインが異なっていたりします。本書では、リセット系とノーマライズ系の両方が解説されています。

• 各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetのまとめ -Chrome, Safari, Firefox, Edge
• 2021年、モダンブラウザに適したCSSリセットのまとめ

また、実装していてうまくいかない時があると思います。本書ではデベロッパーツールを使用して、どのように不具合の原因を見つけていくのかの手順など、解説されています。例えば、boderで枠線を付ける、要素に適用しているスタイルを一つずつコメントアウトする、など多くのデベロッパーが実践しています。

ブラウザで表示をチェックするポイントもまとめられており、通常のワークフローに組み込んでおくとよいでしょう。

第3書は、Sassの基礎知識です。Sassの環境準備、コンパイル方法、記法、基本機能がていねいに解説されています。

最後の第4章は、CSSコーディング。実際のサイトの制作でどのように準備し、設計、実装していくのかです。この第4章が一番ボリュームがあります。

デザインデータを確認し、デザインが意図することを理解し、CSSとHTMLの実装に取り組みます。一貫したコードを提供し、作業効率を上げるためには、最初にコーディングのガイドラインを策定することが重要です。

ターゲットブラウザや仕様が決まったら、実装を開始します。まずは、デザインデータを元に、レイアウト、コンポーネント、エレメント、共通部分を定義し、レイアウトから始めます。全ページで共通するヘッダ・フッタの領域、コンテンツの領域、カラムのパターンなど、一つずつていねいに解説されています。

例えば、ヘッダ。デスクトップとスマホでレイアウトや表示要素が変化します。コンポーネント内の各要素がどのように機能し、それをどのように実装するか、コードレベルでくわしく解説されています。

コンポーネントの実装では、パンくずリスト、ヘッドライン、ページャー、カードなどの実装テクニックが学べます。

最近のCSSでは、数式を使用することも増えてきました。数値だけでなく、言葉で数式が解説されているので、応用が効くと思います。また、それをSassの計算式にするにはどうすればよいのかも。

現場のプロから学ぶ CSSコーディングバイブルの目次

現場のプロから学ぶ CSSコーディングバイブルの目次

現場のプロから学ぶ CSSコーディングバイブルの目次

現場のプロから学ぶ CSSコーディングバイブルの目次

実務レベルで、CSSのコーディングを身につけたい、Sassの実践的なテクニックを学びたい、そんな人にお勧めします。また、現役の人も改めて自分のワークフローを見直したいという時にもお勧めです。

献本の御礼

最後に、献本いただいたマイナビ出版の担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス