実務を学びたいコーダーへ！【書籍】現場のプロから学ぶCSSコーディングバイブル

はじめに

8月27日に発売されたばかりの「現場のプロから学ぶ CSSコーディングバイブル」を読んでみました。

この本は「現場から学ぶ」ということもあって、実際の現場で活用されている記述方法・ファイルの管理方法などが詳しく記載があります。
私たちフリーランスでわが道を進んでいる方や、1年ほど勤務しているけどまだ完璧に管理しきれていない・・・という方にすごくお勧めできる書籍です。

反対に、HTML,CSSを学んで半年です！とか、まだ実際の案件に触れたことがない！という方には理解が難しい箇所も出てきます。

ただ、案件をこなしていくうちにこまめに確認をしたりできる相方として、良いと思いました。

この記事では、書籍に登場するチャプター1～4までの説明を、私の言葉でご紹介したいと思います！
（語弊や、勘違いなどあるかもしれません）

チャプター1

ここでは、以下の記載があります。

• CSSの書き方
• CSSの優先度
• CSSの問題点
• CSS設計

もうこのブログ記事をご覧になっている方はある程度知識のある方かと思うので流してご紹介をします。

CSSの問題点

昨今のWebスクール演習問題や、模写では、1～3ページ程度の課題などが多く、多数のページをコーディングする機会は少ないのではないでしょうか？

実務では、10ページのコーディングは普通レベルです。
しかしながら、10ページをコーディングしていると、トップページ・下層ページのクラス名が被ってしまい、意図しないスタイルが適用されてしまいます。

そこで、「CSS設計」という考え方が大切になってきます。

CSS設計

問題点であったように、如何にしてクラス名が意図せず被らないようにするか。管理しやすくするか等ということを考えながらクラス名付けなどを考えていきます。

本書では、CSSの記法である「BEM」や、「SMACSS」などの説明がなされています。

BEMの簡単な説明

BEMは、CSS記法の1つで、Block,Element,Modifierの3語の頭文字をとったものになります。

HTMLを記述していく中で、トップページ内や、下層ページにも流用する部品ってありますよね？

例えば、見出しのH2だったり、リストだったり・・・このブログだと、見出しや、pタグ、リストをすべて流用していますね！

実務ではデザインが届いたら、流用できる部品をデザインから探し、ElementやBlockという扱いにします。

任意の要素をBlock要素にした場合、「bl_header_item」などと、Blockの頭文字である、bl_をクラス名の頭につけてわかりやすくしたりするものです。

チャプター2

ここでは、以下の記載があります。

• CSSの基礎知識
• CSSコーディングのトラブルシューティング
• 様々なブラウザへの対応

CSSコーディングのトラブルシューティング

CSSってたまに言うことを聞かないってことありませんか？

そんな時に実務で冷静に対処できる方法が載っています。

ここでは、フレックスボックスを使って子要素の高さが揃わないけどなんで？

どうやって解決するの？というよくある問題点を例にとっているので、普段CSSを書いている方なら「あ～～あるある！でもこういう順序で解決するんだ！」と思えるはずです。

様々なブラウザへの対応

safariやieが特に言うこと聞かないですよね。ただ、 言うことを聞かないからと言ってそのブラウザの対応をしません！なんて言っていたら依頼も来なくなってしまいますよね・・・

そこで、「どこまでのレベルで（ブラウザのバージョンや種類）対応を行っていくか」という基準、選び方が記載されています。

どこで折り合いをつけるのかというのがとても分かりやすく、今までChromeのみでしかコーディング確認をしていなかった方にもしっかり読んでいただきたいセクションになっています。

チャプター3

ここでは、CSSを効率的に書くSassということで、以下の記載があります。

• Sassの基本
• Sassの基本機能

このチャプターから、中級以上の内容になってきており、理解できない箇所が多くなってくると思います。

Sassの基本

本書では、Sass→Scssの意味として取り上げられています。（このブログでも同じく、Sass→Scssの意）

SassはCSSですが、プログラミングを取り入れたCSSなので、通常のCSSのようにブラウザには認識されません。

そのため、Sassを書いたらCSSに変換をする「コンパイル」の方法が丁寧に記載されています。

なので、Sassを触ったことのない方でも本書をきっかけにぜひ挑戦してみていただければ効率爆上がり！！だと思います。

しかも本書では、新しい書き方であるDars Sassで紹介されているので、これからSassを取り入れたい。今までのnode-Sassから変更したいという方にもとても最適だと思います！

チャプター4

ここでは、おおまかに以下の記載があります。

• コーディング作業の考え方と準備
• コーディングガイドラインを考える
• サンプルデータからCSS設計を行い、コーディングをする

このチャプターで、今まで1~3で学んだことを生かしCSSを記載していくことになります。

コーディング作業の考え方と準備

デザインデータが手元に届いたら、どのように確認し、どのような手順でコーディングを行うのかの流れが、細かに記載があります。

特に、CSSコードを明瞭にするため、ヘッダー・フッター・レイアウトなどの大枠の共通見極めから、小さな部品のブロック・コンポーネントの分類基準の説明があります。

まだ分類でふわっとしている方でも理解のしやすいものになっていると思います。

サンプルデータからCSS設計を行い、コーディングをする

実際のXDデータ・aiデータを用い、よくあるコーポレートサイトの実務コーディングを学んでいきます。

※ここから書籍の説明はすべてピュアなCSSではなく、Sassでの説明になっています。

• チームで作成する際の留意点
• CSS記述方法
• コーディングファイルの管理方法（ディレクトリ構造）
• デザインデータからの共通部分確認方法

など、CSS設計の基本となる考え方から、

• レイアウトの作成
• ヘッダーの作成
• メインカラムレイアウトの作成
• エレメントの作成

といった、筆者が実務で行っている手順で説明がなされています。

それぞれの手順では、膨大なコードとともに、なぜこのような命名にしたのか。多くの箇所で使うエレメント部分ではpxではなく、vw,remを使用したほうが良いなど理由を交え記載があります。

また、本書で出てきた、HTML,CSS,Sassデータは、マイナビ書籍サポートURLよりダウンロードもできるため、実際に見比べながら命名やファイル管理も可能です。

さいごに

私はコーディングを基本1人で行ってきました。

改めて、実務での立ち位置・流れ・コーディング方法・CSS設計を学べ、コーディングスキルが確実にアップしたと感じています。

コーディングをしているけど、先輩がいない・誰に意見をもらったらよいのかわからない。といった方にはぜひお勧めしたい書籍になっています。

現場のプロから学ぶ CSSコーディングバイブル [ 田村 章吾 ] 価格：3289円（税込、送料無料) (2021/8/31時点) 楽天で購入