DESIGNMAP

『現場のプロが本気で教えるHTML/CSSデザイン講義』(SBクリエイティブ)

記事公開日:2016年09月25日

ブックガイド

カフェのトップページとキャンページを実際にコーディングしながら、CSS設計、Flex box、Sassを学んでいく。満遍なくHTMLやCSSを解説した本ではない。現場のある場面を切り取って、CSSの設計手法や考え方を解説した本である。著者はヤフーのエンジニアとデザイナーが担当している。

CSSはコンポーネント単位で設計

CSSの設計はBEMをベースに独自の工夫を加えている。BEMはページをコンポーネント単位でCSSを書いてゆく設計手法である。厳密にはBEMはCSSだけでなく、JavaScriptまでを含めた広い設計ツールである。JavaScriptでコンポネーントのデータを定義して、コマンドでHTMLを生成するような仕組みを提供している。本書ではBEMのCSSの設計部分に焦点をあてている。

BEMはコンポーネントをBlock、Element、Modifierの3要素にわけて名前をつけていく。Blockはコンポーネントの大枠で、ElementはBlockの中の要素を指す。Blockの中にBlockを入れ子でいれることができる。ModifierはElementの一部が変化している箇所に使う。例えばナビゲーションの現在位置を示しているとかである。

本書ではヘッダーであれば以下のようなコーディングをしている。BlockはHeaderとMenuで、頭文字は大文字で書き、Elementは「Block__Element」という書き方になる。Elementの名前もhead、body、footなどのようにパターン化しているのも優れている。

<header class="Header">
    <div class="Header__head"></div>
    <nav class="Header__body">
        <ul class="Menu">
            <li><a class="Menu__item" href="#">Service</a></li>
        </ul>
    </nav>
</header>

BEMだけではカバーしにくいレイアウト用のCSSは、違う名前のルールをつけて管理している。CSSのレイアウトはfloatをまったくつかわず全て「Flex box」を採用している。

このBEMを効率的に書くためにCSSの記述はSassを採用している。SassはCSSを機能拡張した言語で、本書ではネスト、&、変数、mixinだけに機能を絞って使っている。これだけならほぼCSSの記述と変わらないので、CSSに慣れている人でもすんなりSassに移行しやすい。

Gulpで定型作業を自動処理

CSSのファイルはコンポーネント単位にファイルを分けている。これは最後Gulpで結合させる。Gulpは定型作業を自動でやってくれるNode.js製の開発ツールである。SassをCSSに変換したり、Webブラウザの更新を行う。Gulpを使えば、手作業でコマンドを打ってSassをコンパイルしたり、Webブラウザを更新する必要がない。ファイルを保存すると裏側でGulpが仕事をしてくれる。ただしNode.jsやGulp自体は詳しい解説はなく、ダウンロードしたGulpファイルを使用して実行する。Gulpに実際に触れておくことは重要である。

Webサービス業界のフロントエンドのコーディング手法を明らかにした貴重な一冊

まとめると、本書はまったくの初心者向けというよりは、古い制作環境でやっているHTML、CSSの中級者におすすめしたい。現在のWebサービス業界のフロントエンドのコーディング手法を明らかにした貴重な一冊といえる。ここまで1冊にまとめていただけたことに感謝したい。このシリーズはエンジニアが書いていて内容が実践的なので、今後も続刊が楽しみだ。

付記

個人的にハマッたのが本書序盤のGulpの実行のところである。エラーがでてしまった。もともとはいっていたNode.jsのバージョンが問題だった。Node.jsのバージョンを最新版に上げて、モジュールをすべて削除して、再度npm installをやり直したら動作した。あとCSSのリセット処理でsanitize.cssを使用するのだが、バージョンが上がっているので、実際に書いてゆくと途中のスクリーンショットとの画面図とは微妙に違っている。ただある程度慣れている人なら問題ないだろう。

↑このページの上に戻る