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

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

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

本の表紙

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

本の表紙

現場のプロが教える
HTML+CSSコーディングの最新常識
[Amazonでみる]
[楽天でみる]

著:
大竹 孔明、小川 裕之、高梨 ギンペイ、中江 亮
企画:
株式会社まぼろし
出版社:
MdNコーポレーション
発売日:
2015/3/25

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コーディングの最新常識の目次

  1. INTRODUCTION 最近のコーディングの潮流
    現在の現場におけるモダンなワークフロー
  2. 目的に合わせたコーディングの環境整備
    Node.jsとRubyの環境を整える
    バージョン管理システムGitのインストールと使い方
    検証を楽にしてくれるツール
    仮想環境を構築する
    パッケージマネージャーの使い方
  3. HTMLコーディング
    HTML5でのマークアップ
    短縮記法で高速コーディング
    フォーム関連の新機能
    HTML5カスタムデータ属性の有効活用
    SVGでベクターグラフィックを描画する
    音声と映像をWebページに埋め込む
    Canvasで広がる新しい表現の世界
    セマンティックWebのための構造化マークアップ
    SNSのシェアボタンを設定する
    HTML5でのマルチデバイス対応
    今から始めるWebアクセシビリティ
  4. CSSコーディング
    Sass・LESSなどのCSSプリプロセッサ
    スタイルガイドを作成する
    レガシーブラウザへの対応
    CSSのセレクタを使いこなす
    CSS3で追加されたプロパティ
    Webフォントを活用する
    CSS3のアニメーションを活用する
    Media Queriesを使ったレスポンシブWebデザイン
    CSSフレームワークの導入方法と使い方
    管理しやすく破綻しないCSS設計の手法
  5. 最適化・検証
    タスクランナーで定型作業を自動化する
    表示パフォーマンスを最適化する
    ブラウザに搭載されている検証ツールを利用する
  6. そのほかよく利用される技術・ツール
    HTMLテンプレートのためのテンプレートエンジン
    静的サイトジェネレータで高速Web開発
    効率よくコーディングを進めるエディタ(IDE)紹介
    作業の手間を軽減する便利ツール
    最近のJavaScriptの動向を理解する

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

本の表紙

現場のプロが教える
HTML+CSSコーディングの最新常識
[Amazonでみる]
[楽天でみる]

著:
大竹 孔明、小川 裕之、高梨 ギンペイ、中江 亮
企画:
株式会社まぼろし
出版社:
MdNコーポレーション
発売日:
2015/3/25

献本の御礼

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

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

top of page

©2018 coliss