自分のHTMLやCSSのコーディング環境がベストか見直してみよう!作業を効率化する技術やツールの導入・使い方がよく分かるオススメの本
Post on:2015年4月28日
SassやLESSなどのCSSプリプロセッサ、OOCSSやBEMを使ったCSSの設計、Gitでのバージョン管理、gulpを使ったタスクランナー、Bootstrapなどのフレームワークの導入など、ここ数年でコーディング業界にさまざまな新しい技術やツールが登場しました。
なんだか便利そうなのは分かるけど、どこから手をつければよいのか分からない。似たようなものがあるけど、どれが自分にあっているのか? コーディング業界で現在主流となっているテクニックや考え方の基本から導入・使い方などを実際に仕事で使うシーンを想定した形で紹介しているオススメの本を紹介します。

それら技術やツール、そして考え方がWeb制作のどの工程に関わり、どう効率化されるのか、導入の手順はどんな感じなのかがよく分かります。
また、HTML5の新しい要素、CSSのセレクタ・アニメーション、SVGの使い方など、コーディングする上でこれから重要視されるポイントもしっかり解説されています。
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コーディングの最新常識の目次
-
- INTRODUCTION 最近のコーディングの潮流
- 現在の現場におけるモダンなワークフロー
-
- 目的に合わせたコーディングの環境整備
- Node.jsとRubyの環境を整える
- バージョン管理システムGitのインストールと使い方
- 検証を楽にしてくれるツール
- 仮想環境を構築する
- パッケージマネージャーの使い方
-
- HTMLコーディング
- HTML5でのマークアップ
- 短縮記法で高速コーディング
- フォーム関連の新機能
- HTML5カスタムデータ属性の有効活用
- SVGでベクターグラフィックを描画する
- 音声と映像をWebページに埋め込む
- Canvasで広がる新しい表現の世界
- セマンティックWebのための構造化マークアップ
- SNSのシェアボタンを設定する
- HTML5でのマルチデバイス対応
- 今から始めるWebアクセシビリティ
-
- CSSコーディング
- Sass・LESSなどのCSSプリプロセッサ
- スタイルガイドを作成する
- レガシーブラウザへの対応
- CSSのセレクタを使いこなす
- CSS3で追加されたプロパティ
- Webフォントを活用する
- CSS3のアニメーションを活用する
- Media Queriesを使ったレスポンシブWebデザイン
- CSSフレームワークの導入方法と使い方
- 管理しやすく破綻しないCSS設計の手法
-
- 最適化・検証
- タスクランナーで定型作業を自動化する
- 表示パフォーマンスを最適化する
- ブラウザに搭載されている検証ツールを利用する
-
- そのほかよく利用される技術・ツール
- HTMLテンプレートのためのテンプレートエンジン
- 静的サイトジェネレータで高速Web開発
- 効率よくコーディングを進めるエディタ(IDE)紹介
- 作業の手間を軽減する便利ツール
- 最近のJavaScriptの動向を理解する
数多くある技術やツールが網羅されており、基本情報や導入方法・使い方などを比較しながら検討することができます。
新しいものに踏み出すのは敷居が高いと感じることもありますが、知ってみるとそうでもないな、と思うかもしれません。
献本の御礼
最後に、献本いただいたMdNコーポレーションの担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors