Webデザインの新しい教科書<改訂新版>基礎から覚える、深く理解できる。 FavoriteLoadingあとで読む

: 事務局
Webデザイン・Webサイト制作の「本当に必要な正しい基礎」を伝える入門書の改訂版です。赤間講師共著「Webデザインの新しい教科書<改訂新版>基礎から覚える、深く理解できる。」。基礎が一通り書かれているのですべてのウェブ担当者・ウェブディレクターに目を通しておいて欲しい1冊です。

  • Web制作

Webデザインの新しい教科書 改訂新版
基礎から覚える、深く理解できる。
〈HTML5、CSS3、レスポンシブWebデザイン〉

  • Web制作入門書のロングセラー。
  • 「背景」や「理由」を知ることで、一生役立つ応用力が身につく。

著者:赤間公太郎 こもり まさあき
出版社:エムディエヌコーポレーション
発売日:2016/2/2

詳細ページへ移動します[MdN]

どんな人におすすめですか?

Webデザイン・Webサイト制作の「本当に必要な正しい基礎」を伝える入門書の改訂版。
wwwやインターネットの仕組みを始まりに、サイト制作のワークフロー、HTML・CSSの技術的な解説、Webサイトを公開・運用するまでの基礎知識を、系統立てて解説しています。

プロのWebデザイナーを目指す方はもちろん、Webにかかわるすべての方に知ってほしい内容を集約した1冊です。

改訂された部分はどのようなところですか?

改訂版ではHTML5をベースにした内容に改変し、
レスポンシブWebデザインに対応した簡単なサンプルサイトを制作する章を新たに加えたほか、
SVGやサイトデータのバージョン管理に関する解説も追加しました。

【赤間講師より】今回の書籍で、特に届けたいノウハウを一つだけピックアップして具体的に教えてください

今回の書籍は、テクニックやスキルに特化したような内容ではなく、あくまで「なぜそうするのか」「そもそもどのような意図なのか」にフォーカスした内容となっています。

Web制作の方だけではなく、ディレクションや印刷をメインに業務をされている方にも役立つ本です。

インターネット上には、その情報は多様なWebサイトで解釈され、発信されています。そんななかで、「徹底的に基礎にこだわる」内容となっており、根底の知識を得るに最適な書籍です。

と同時に、時代に応じた「レスポンシブWebデザイン」が新章として追加されました。こもりまさあきさんによる新章をぜひご覧ください。

■Lesson 1 Webデザインの世界を知る

01 インターネットとWWWの歴史
02 WebページがWebブラウザに表示されるまでの仕組み
03 多様化するWebブラウザのことを知ろう
04 Webデザインって何をすること?
05 実際のWebサイトができるまで
06 Webサイト制作にはどんな人たちが関わるのか?
07 Webサイト制作のために必要な技術
08 Webサイト制作に必要なツール
09 これからのWebデザイン

■Lesson 2 Webサイトを設計する

01 Webサイトは何のためにあるのか?
02 Webサイト全体の構成を見てみよう
03 Webページの構造を分析してみよう
04 Webページを一般的な文書に置き換えてみよう
05 文書のアウトラインを考えてみよう
06 情報を多様な環境で取得しやすくすることの大切さ
07 情報の意味を伝えるために必要なHTML
08 ワイヤーフレームを使って情報を視覚的に配置する
09 HTMLをデザイン・レイアウトするCSS
10 高度なインタラクションを追加するJavaScript
11 これからのWebサイト設計
12 レスポンシブWebデザインとは

■Lesson 3 HTMLの役割とできること

01 HTMLとはどんなもの?
02 テキスト情報に意味を与えるマークアップ
03 HTMLファイルをWebブラウザで表示してみよう
04 要素(タグ)と属性の違い
05 HTMLの基本構造
06 head要素とbody要素の違い
07 head要素の中に入る要素
08 body要素内の構造と要素の性質の違い
09 見出しを表すh要素と段落を意味するp要素
10 文字列の特定部分に意味を与える要素
11 引用や出典を示す要素
12 強制改行を意味するbr要素と水平罫線を表すhr要素
13 情報の削除を示すdel要素と修正を意味するins要素
14 画像を挿入するimg要素
15 文書同士をつなげるa要素
16 文書の制作者などを示す要素
17 情報をグループ化するdiv要素とspan要素
18 リストを表現する要素
19 表組みを作るための要素
20 フォームを作るための要素
21 文章をマークアップしてみよう
22 HTML5の特徴
23 HTML5で新しく加わったWebページの構造を示す要素
24 HTML5のフォームに関連するtype属性値と属性

■Lesson 4 CSSの役割とできること

01 CSSとはどんなもの?
02 CSSで情報をデザインする
03 HTMLはWebブラウザにどう表示されている?
04 HTMLにCSSを適用するには?
05 セレクタとはどんなもの?
06 よく使われるセレクタ
07 覚えておきたいCSSのルール
08 CSSを書いてWebブラウザで表示してみよう
09 プロパティを性質の違いで大きく2 つに分類してみる
10 文字や背景に色をつけてみよう
11 背景に画像を表示する
12 文字のサイズを設定する
13 書体(フォント)を指定する
14 文字の行間や開始位置を調整する
15 リンクの色を変更する
16 マウスの状態に応じてリンクのスタイルを変える
17 疑似要素の使い方と効果
18 CSSを書く前に覚えておきたいボックスモデル
19 内容の幅と高さを指定する
20 情報の含まれるブロックにボーダーを設定する
21 パディングを調整する
22 隣接するブロックとの間隔を調整する
23 情報をブロック単位で並べる
24 文書構造順に積み木感覚でブロックを配置
25 floatプロパティによる回り込みの解除
26 意図した場所にブロックを配置する
27 CSSによるレイアウトの実践
28 displayプロパティで要素の表示状態を切り替える
29 リストを装飾する
30 テーブルを装飾する
31 フォームを装飾する
32 CSSの最新バージョン「CSS3」について

■Lesson 5 Webサイトを構成する素材

01 Webサイトで使う素材
02 著作権とライセンス
03 テキストと文字コード
04 Webサイトの標準的な色空間
05 画像を構成する単位「ピクセル」
06 Webサイトで使う画像フォーマット
07 ベクター形式の画像フォーマット「SVG」
08 Webサイトで使う映像素材や音声素材

■Lesson 6 Webサイトを表現する色

01 カラーモードの違い
02 色の三属性
03 色指定の方法
04 代表的な配色技法

■Lesson 7 Webサイトを公開する

01 ホスティングサービスの種類と選び方
02 Webサイトの公開前に確認すること
03 Webサイトの品質を確認する
04 ローカル環境でWebサイトをチェックする
05 サーバーとクライアントの関係
06 制作したWebデータの送信に利用するFTP
07 FTPクライアントでデータをアップロードする
08 Webブラウザで表示を確認する
09 Webサイトデータのバージョン管理

■Lesson 8 Webサイトを運用する

01 ソーシャルメディアと連携する
02 Googleにサイトを登録するには?
03 アクセス解析でWebサイトの効果を測定する
04 Webサイトの調査、改善を行うには?
05 サーバーソフトウェアのアップデートとセキュリティ対策

■Lesson 9 Webサイトを制作する

01 HTMLをコーディングする前の制作準備
02 ページのHTMLファイルを制作する
03 ベースとなるモバイル用のCSSを作る
04 タブレットとPCサイズのスタイルを指定する

著者プロフィール

赤間 公太郎: 宮城県出身。IT系の専門学校を卒業後、仙台のデザイン会社に入社。Webサイトのデザイン・コーディングに従事。2002年退職後すぐにマジカルリミックスを創業。2007年に法人化で株式会社マジカルリミックスを設立。Web運用全般のコンサルティング、セミナー出演、執筆などがおもな業務。専門学校デジタルアーツ仙台の非常勤講師も担当。

出版社:株式会社エムディエヌコーポレーション(略称:MdN)

株式会社エムディエヌコーポレーションは、雑誌・書籍・イベントを通して、グラフィックデザイン、およびWebデザインのノウハウと可能性を伝える事業を展開しています。デザインとグラフィックの総合情報誌『MdN』をはじめ、多数のデザイン関連書籍を発行しています。 www.mdn.co.jp/

事務局
この記事を書いた人: 事務局

「ムダな情報で頭脳を消耗することなく考える時間を確保する」
ウェブのノウハウだけに限らず、広告やマーケティング全般の知識、時には組織論や時事に至るまで、最先端や未来予測などみなさんにとって本当に必要な情報だけをお届けします。