MdNCORPORATION

現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4

現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4

大竹 孔明 著/小川 裕之 著/高梨 ギンペイ 著/中江 亮 著/株式会社まぼろし 企画
定価 2,530円
(本体 2,300円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2015-03-25
仕様 B5判/192P
ISBN 978-4-8443-6493-1
近年のWebコーディングはスマートフォンをはじめとする対応デバイスが劇的に増えたことから、非常に手間のかかる工程になりました。検証や最適化まで含めたすべてを手作業でこなすのは無理が生じてきており、さまざまな制作支援ツールやフレームワークを活用しながら進めるなど、従来のワークフローから大きく変化を遂げています。 本書ではこのような“モダン”なHTML+CSSコーディングのあり方と、作業の効率化&適正化を図る手法・技術・ツールを網羅的に解説しました。「環境構築」→「HTMLコーディング」→「CSSコーディング」→「最適化・検証」とワークフローに沿って必要な情報を紹介していますので、タスクランナーやCSSメタ言語といった最近よく聞く技術がどの工程に関わり、どのような作業を楽にするものなのかが秩序立ててわかります。 もちろんツール類の解説だけにとどまらず、HTML5の新要素、CSSのセレクタ、CSS設計といった普遍的なトピックも盛り込んでいますので、さまざまな場面でお役立ていただけます。いまHTML+CSSを書くうえで知っておかなければならない「現場の常識」が凝縮された一冊です。

→サンプルデータのダウンロードはこちら

→訂正とお詫びはこちら



■ページ見本










目次

●Introduction 最近のコーディングの潮流
01 現在の現場におけるモダンなワークフロー

●CHAPTER1 目的に合わせたコーディングの環境整備
01 Node.jsとRubyの環境を整える
02 バージョン管理システムGitのインストールと使い方
03 検証を楽にしてくれるツール
04 仮想環境を構築する
05 パッケージマネージャーの使い方

●CHAPTER2 HTMLコーディング
01 HTML5でのマークアップ
02 短縮記法で高速コーディング
03 フォーム関連の新機能
04 HTML5カスタムデータ属性の有効活用
05 SVGでベクターグラフィックを描画する
06 音声と映像をWebページに埋め込む
07 Canvasで広がる新しい表現の世界
08 セマンティックWebのための構造化マークアップ
09 SNSのシェアボタンを設定する
10 HTML5でのマルチデバイス対応
11 今から始めるWebアクセシビリティ

●CHAPTER3 CSSコーディング
01 Sass・LESSなどのCSSプリプロセッサ
02 スタイルガイドを作成する
03 レガシーブラウザへの対応
04 CSSのセレクタを使いこなす
05 CSS3で追加されたプロパティ
06 Webフォントを活用する
07 CSS3のアニメーションを活用する
08 Media Queriesを使ったレスポンシブWebデザイン
09 CSSフレームワークの導入方法と使い方
10 管理しやすく破綻しないCSS設計の手法

●CHAPTER4 最適化・検証
01 タスクランナーで定型作業を自動化する
02 表示パフォーマンスを最適化する
03 ブラウザに搭載されている検証ツールを利用する

●CHAPTER5 そのほかよく利用される技術・ツール
01 HTMLテンプレートのためのテンプレートエンジン
02 静的サイトジェネレータで高速Web開発
03 効率よくコーディングを進めるエディタ(IDE)紹介
04 作業の手間を軽減する便利ツール
05 最近のJavaScriptの動向を理解する

APPENDIX コマンドライン操作

INDEX

お詫びと訂正

現場のプロが教えるHTML+CSSコーディングの最新常識
知らないと困るWebデザインの新ルール4

お詫びと訂正のお知らせ



このたびは、『現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4』をご購入いただきまして、誠にありがとうございます。本書の解説内容に誤りがございました。該当箇所は下記になります。



●13ページ:本文「nodebrewのインストール」6~7行目

(誤)
インストールしたデータにパスを通すために「export PATH=$HOME/.nodebrew/current/bin:$PATH ~/.bashrc」と入力する。

(正)
インストールしたデータにパスを通すために「echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bashrc」と入力する。

※echoコマンドと>>の記号が抜けておりました




●13ページ:本文「nodebrewのインストール」13~14行目

(誤)
開かれた編集画面に、先ほどの「export PATH=$HOME/.nodebrew/current/bin:$PATH ~/.bashrc」を入力して保存する。

(正)
開かれた編集画面に、「export PATH=$HOME/.nodebrew/current/bin:$PATH」を入力して保存する。

※記述するパスの最後に不要な「 ~/.bashrc」が入っておりました




●14ページ:本文「WindowsでNode.jsのバージョン管理」右段6~14行目

(誤)
表示されたダイアログで[変数名:NODE_PREFIX]、[変数値:C:¥Users¥ユーザー名¥nodist]に設定、適用して環境変数を追加する。次に「システム環境変数」の一覧にある「Path」をクリックして選択し、[編集]をクリック。変数値の先頭に「%nodist%/bin;」を追記しよう。環境によるが、これで外部コマンドエラーが出る場合は、再度「システム環境変数」で[新規]をクリックし、[変数名:nodist]、[変数値:C:¥Users¥ユーザー名¥nodist]の環境変数を追加すると動作する場合がある。


(正)
表示されたダイアログで[変数名:NODIST_PREFIX]、[変数値:C:¥Users¥ユーザー名¥nodist]に設定、適用して環境変数を追加する。次に「システム環境変数」の一覧にある「Path」をクリックして選択し、[編集]をクリック。変数値の先頭に「C:¥Users¥ユーザー名¥nodist¥bin;」を追記しよう。

※現在のnodistでは変数名を「NODIST_PREFIX」とする必要がありました。また、「Path」に直接「C:¥Users¥ユーザー名¥nodist¥bin;」と指定すれば変数「nodist」の追加は不要です




●150ページ:本文「ファイル結合」5~6行目、10~11行目

(誤)
ファイル結合
 ファイルを取得すると通信コストがかかる。ファイルを結合して通信の数を減らすことで、読み込みを速めることができる。通信パフォーマンスについては、P.152も参照してほしい。
 gulpの場合は、プラグインではなく通常のnpmパッケージを使う。

■ grunt-contrib-concat
 https://www.npmjs.com/package/grunt-contrib-concat
■ concat
 https://www.npmjs.com/package/concat


(正)
ファイル結合
 ファイルを取得すると通信コストがかかる。ファイルを結合して通信の数を減らすことで、読み込みを速めることができる。通信パフォーマンスについては、P.152も参照してほしい。

■ grunt-contrib-concat
 https://www.npmjs.com/package/grunt-contrib-concat
gulp-concat
 https://www.npmjs.com/package/gulp-concat

※gulp上でのファイル結合にはgulp-concatを利用します




修正した状態のページPDFを用意させていただきましたので、ご利用いただけますようお願い申し上げます。

修正PDFのダウンロード
teisei_6493.pdf(676KB)

このたびはご迷惑をおかけいたしまして、誠に申し訳ございません。訂正して深くお詫び申し上げます。

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊