自分のHTMLやCSSのコーディング環境がベストか見直してみよう！作業を効率化する技術やツールの導入・使い方がよく分かるオススメの本

SassやLESSなどのCSSプリプロセッサ、OOCSSやBEMを使ったCSSの設計、Gitでのバージョン管理、gulpを使ったタスクランナー、Bootstrapなどのフレームワークの導入など、ここ数年でコーディング業界にさまざまな新しい技術やツールが登場しました。

なんだか便利そうなのは分かるけど、どこから手をつければよいのか分からない。似たようなものがあるけど、どれが自分にあっているのか？ コーディング業界で現在主流となっているテクニックや考え方の基本から導入・使い方などを実際に仕事で使うシーンを想定した形で紹介しているオススメの本を紹介します。

それら技術やツール、そして考え方がWeb制作のどの工程に関わり、どう効率化されるのか、導入の手順はどんな感じなのかがよく分かります。
また、HTML5の新しい要素、CSSのセレクタ・アニメーション、SVGの使い方など、コーディングする上でこれから重要視されるポイントもしっかり解説されています。

Kindle版は、お値段が少しお安めです。

• HTML+CSSコーディングの最新常識 Kindle版

5/11には発売記念イベントがありますが、チケットは開始早々販売終了になってしまいました。

• イベントの申込みページ

では、そんな本書の中身を紙面のキャプチャで少しだけご紹介。

本書はHTMLとCSSのコーディングに的を絞り、コーディングのさまざまな技術、作業を効率化するツール、プロジェクトを円滑に進めるワークフローなど、現在主流となっているテクニックを幅広く、そしてちょっと深く知ることができます。

B5判の少し大きめの本書はフルカラー。テキストはイエローでハイライトされており、重要な箇所を見逃すことがない親切デザインです。

テキストや画像だけでは分かりにくいポイントは、図やイラストが豊富に掲載されています。

Adobe Edge Inspectって便利そうだけどよく分からない、、、基本的な知識をはじめ、導入の手順、利用方法などがコンパクトにまとめられています。また、他のツールの説明も同じフォーマットで掲載されているので、比較する際にも分かりやすいですね。

考え方的なものも悩みどころ。HTML5非対応ブラウザへの対応はどれでいこうか？ それぞれのやり方、メリットとデメリットを改めて確認するとよいでしょう。

SVGやCanvas、音声や動画、HTML5の新しいフォームの機能やカスタムデータ属性など、すぐに使わないかもしれないけど、頭の片隅に入れておいて損はないです。

Sass, Compass, LESS, StylusなどのCSSプリプロセッサ、何が違うのか、自分にはどれが合うのか、実際のコードをベースにしたフローでそれぞれの使い方を知ることで、検討の材料になります。

CSS3で追加されたプロパティは、単にコードの紹介だけでなく、実装例もあり、簡単に把握できます。

そして、ブラウザには同じように表示されても実装方法はさまざまです。どう違うのか？ どういう効果があるのか？ 覚えておきたいですね。

最近は、OOCSS, SMACCS, BEM, FLOCCSなどのCSS設計の手法も注目されています。CSSの管理がしやすく簡単で、将来的にも破綻しにくいよう設計されています。

ツール類も非常に充実しています。主要な各ジャンルのツールの特徴や機能を比較し、自分に合ったものを選択することで、作業は今までより快適に楽しくなるはずです！

HTML+CSSコーディングの最新常識の目次

0. INTRODUCTION　最近のコーディングの潮流

   現在の現場におけるモダンなワークフロー

1. 目的に合わせたコーディングの環境整備

   Node.jsとRubyの環境を整える

   バージョン管理システムGitのインストールと使い方

   検証を楽にしてくれるツール

   仮想環境を構築する

   パッケージマネージャーの使い方

2. HTMLコーディング

   HTML5でのマークアップ

   短縮記法で高速コーディング

   フォーム関連の新機能

   HTML5カスタムデータ属性の有効活用

   SVGでベクターグラフィックを描画する

   音声と映像をWebページに埋め込む

   Canvasで広がる新しい表現の世界

   セマンティックWebのための構造化マークアップ

   SNSのシェアボタンを設定する

   HTML5でのマルチデバイス対応

   今から始めるWebアクセシビリティ

3. CSSコーディング

   Sass・LESSなどのCSSプリプロセッサ

   スタイルガイドを作成する

   レガシーブラウザへの対応

   CSSのセレクタを使いこなす

   CSS3で追加されたプロパティ

   Webフォントを活用する

   CSS3のアニメーションを活用する

   Media Queriesを使ったレスポンシブWebデザイン

   CSSフレームワークの導入方法と使い方

   管理しやすく破綻しないCSS設計の手法

4. 最適化・検証

   タスクランナーで定型作業を自動化する

   表示パフォーマンスを最適化する

   ブラウザに搭載されている検証ツールを利用する

5. そのほかよく利用される技術・ツール

   HTMLテンプレートのためのテンプレートエンジン

   静的サイトジェネレータで高速Web開発

   効率よくコーディングを進めるエディタ（IDE）紹介

   作業の手間を軽減する便利ツール

   最近のJavaScriptの動向を理解する

数多くある技術やツールが網羅されており、基本情報や導入方法・使い方などを比較しながら検討することができます。
新しいものに踏み出すのは敷居が高いと感じることもありますが、知ってみるとそうでもないな、と思うかもしれません。

献本の御礼

最後に、献本いただいたMdNコーポレーションの担当者さまに御礼申し上げます。

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

• お問い合わせ｜コリス