Webデザインの新しい教科書　改訂3版　基礎から覚える、深く理解できる。

試し読み

Webデザインの新しい教科書　改訂3版　基礎から覚える、深く理解できる。

こもりまさあき　著/赤間公太郎　著

定価 2,750円
（本体 2,500円＋税10%） ※電子書籍の価格は各販売ストアにてご確認ください｡

紙の本を買う

紙の書籍を購入

電子版を買う

電子書籍版を購入
- Kindle
- 楽天kobo

発売日	：2021-05-28
仕様	：B5判／304P
ISBN	：978-4-295-20107-6

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

改訂3版では、制作現場ではマルチデバイス対応の必須化が進み、レスポンシブWebデザインやモバイルファーストなどの制作技法が主流化していることを踏まえ、内容を全面的にアップデート。FlexboxやCSS Grid Layoutといった、新しい技術仕様の解説も加えました。

本書の一番の特長は基本知識や制作技術の解説とともに、「なぜ、そうするのか？」といった「背景」や「理由」にも踏み込んで説明している点です。Web・Webデザインの根本的な仕組みや、技術の裏側にある背景を深く理解することで、ツールやテクニックの変化に左右されない「自分で考える力」、「ずっと役立つ応用力」を養うことを目的にしています。

プロのWebデザイナーを志望する方はもちろん、Webにかかわるすべての方に読んでいただきたい内容です。

■ページ見本

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

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

■Lesson3　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　Webページの構造を示す要素
24　フォームに関連するtype属性値と属性

■Lesson4　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　要素を回り込ませるCSS float
25　意図した場所にブロックを配置する
26　要素を横方向に並べるCSS Flexbox
27　要素を縦横に並べるCSS Grid Layout
28　CSSによるレイアウトの実践
29　displayプロパティで要素の表示状態を切り替える
30　リストを装飾する
31　テーブルを装飾する
32　フォームを装飾する
33　CSS3でデザインの細部を調整する

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

■Lesson6　Webサイトを表現する色
01　カラーモードの違い
02　色の三属性
03　色指定の方法
04　代表的な配色技法

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

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

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

用語索引