MdNCORPORATION

初心者からちゃんとしたプロになる HTML+CSS実践講座

相原 典佳 著/草野 あけみ 著/サトウ ハルミ 著/塚口 祐司 著
定価 2,860円
(本体 2,600円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2020-08-28
仕様 B5変形判/296P
ISBN 978-4-295-20021-5
本書は、HTML・CSSの基本をひと通り身につけた方を主な対象に、制作現場でプロとして活躍するために必要なWebコーディングの技術を解説したものです。 HTML・CSSのコーディング初心者を脱して間もないレベルと、制作現場の第一線で活躍できる技術レベルの間には、当然ですが大きなギャップがあります。 本書は、このギャップを少しでも埋められるような内容を目指しました。 全7章構成の前半では、テキストエディターの設定、Node.jsやGulp、バージョン管理システムの導入といった効率的な開発環境を構築・整備する方法とともに、フロントエンド技術周辺の必要知識を解説。 より効率的にコーディングするための環境を整えていきます。 後半では、デザインカンプやWebサイトを題材に、現場の実践的なコーディングを学んでいきます。 Webページのレイアウトを「コンポーネント」単位で捉える視点を身につけ、事前のマークアップ設計やCSS設計を行った上でコーディングを進めるノウハウを習得できます。 解説及びサンプルには、BEMやSass(SCSS記法)、初歩的なVue.jsを取り入れました。

■ページ見本






目次


------------------------------------------------------------
■Lesson 1 現場のコーディングとツール
------------------------------------------------------------
01 Webサイト制作の現場で使う技術
02 Webサイト制作のワークフロー
03 デザインツールと制作ワークフロー
04 CSS設計を意識したコーディング
05 コーディングに最適なテキストエディター
06 デベロッパーツールを使いこなそう

------------------------------------------------------------
■Lesson 2 フロントエンド技術の“いま”
------------------------------------------------------------
01 レスポンシブWebデザインとモバイルファースト
02 画像フォーマットと軽量化
03 セマンティックWebを構築するための技術
04 モバイル環境への最適化
05 構造化データとリッチスニペット
06 Webアクセシビリティの考え方と基準

------------------------------------------------------------
■Lesson 3 開発環境の構築
------------------------------------------------------------
01 コマンドラインツールと操作方法
02 フロントエンド開発に必要なNode.jsのインストール
03 Web開発の作業を自動化するGulpを導入する
04 Gulpプラグインを利用して作業を効率化する
05 Webサーバーとドメインについて
06 Webサイトのデータをサーバーに送受信する仕組み
07 Gitを利用したバージョン管理システムの導入

------------------------------------------------------------
■Lesson 4 カンプからのコーディング設計
------------------------------------------------------------
01 コーディング設計
02 完成形とデザイン仕様の確認
03 情報構造にもとづいてマークアップを検討する
04 レイアウトに必要な枠を追加する
05 CSSを設計する
06 デザインカンプから素材とデータを抽出

------------------------------------------------------------
■Lesson 5 BEMを使ったCSS設計
------------------------------------------------------------
01 完成形を確認する
02 HTML制作の準備
03 コンポーネントの設計
04 ブレイクポイントの設計
05 コンポーネントのCSS設計
06 コーディングのポイント
07 JavaScriptライブラリの実装

------------------------------------------------------------
■Lesson 6 Sass(SCSS)を取り入れる
------------------------------------------------------------
01 完成形と全体構造の確認
02 基本となるHTMLの作成
03 基本となるCSSをSassで作成する
04 レスポンシブ対応のヘッダーを作成する
05 メインビジュアル部分にスライドショーを実装する
06 ページ中部のコンテンツ部分を作成する
07 ページ下部のカルーセルを実装する

------------------------------------------------------------
■Lesson 7 Vue.jsを取り入れる
------------------------------------------------------------
01 完成形と全体構造の確認
02 基本となるHTMLとCSSの作成
03 Vue.jsを使って写真の一覧を作成する
04 Vue.jsのプラグインでギャラリーサイト機能を追加

用語索引

ダウンロードデータ

『初心者からちゃんとしたプロになる HTML+CSS実践講座』
サンプルのダウンロードデータ
このたびは,『初心者からちゃんとしたプロになる HTML+CSS実践講座』を
ご購読いただきまして、誠にありがとうございます。

以下に、本書のLesson3〜7の解説で使用したサンプルデータをご用意しましたので、ご利用ください。
(Lesson1・2のサンプルデータははじめから含まれておりません)


▼サンプルデータ
chan-pro04.zip(約205MB)


【ダウンロードにあたってのご注意】

ダウンロードファイルは、ZIP形式で圧縮されています。

Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。
解凍したフォルダ内には、本書のLesson3〜7の解説で使用しているサンプルのデータが、各Lessonのフォルダに分かれて収録されています。

フォルダ内に「readme.txt」が同梱されていますので、ご使用の前に必ずお読みください。

【ダウンロードファイル解凍時のご注意】

Windowsをご利用の場合は、ダブルクリックしてもダウンロードファイルを正しく解凍できない場合があります。
リンク画像が表示されないなど、サンプルファイルの閲覧に問題がある場合は、次の手順でファイルの解凍をお試しください。

[1]ダウンロードしたファイルを右クリック
[2]表示されたメニューから[すべてを展開...]を選択
[3]ファイルを解凍するダイアログが表示されるので、保存場所を選択して実行
[4]指定した場所にファイルが解凍される


※弊社Webサイトからダウンロードできるサンプルデータは、本書の解説内容をご理解いただくために、ご自身で試される場合にのみ使用できる参照用データです。その他の用途での使用や配布などは一切できませんので、あらかじめご了承ください。ただしサンプルデータ中に含まれるJavaScriptのプラグインなどの一般に公開されているライブラリ類については、各ライブラリのライセンス条件に従います。

※弊社Webサイトからダウンロードできるサンプルデータの著作権は、それぞれの制作者に帰属します。

※弊社Webサイトからダウンロードできるサンプルデータを実行した結果につきましては、著者および株式会社エムディエヌコーポレーションは一切の責任を負いかねます。お客様の責任においてご利用ください。

※本書に掲載されているHTML、CSS、JavaScriptなどのコメントや改行位置などは、紙面掲載用として加工していることがあります。ダウンロードしたサンプルデータとは異なる場合がありますので、あらかじめご了承ください。

※サンプルのなかには、Webサーバーの機能を利用しているなどの理由から、ローカル環境上では正しく動作しないものがあります。このようなサンプルの場合は、Webサーバ上に設置したうえで機能をお試しください。

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

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