初心者からちゃんとしたプロになる　Webデザイン基礎入門　改訂2版

試し読み

初心者からちゃんとしたプロになる　Webデザイン基礎入門　改訂2版

栗谷幸助　著/相原典佳　著/藤本勝己　著/村上圭　著/吉本孝一　著

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

紙の本を買う

紙の書籍を購入

電子版を買う

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

発売日	：2023-09-22
仕様	：B5変形判／344P
ISBN	：978-4-295-20545-6

WebデザインやWeb制作の「プロ」を目指す人が、最初に選ぶ定番ロングセラーの改訂2版。

「1日30分からはじめる」をテーマに、Webデザイン・制作の基本知識やHTML・CSSのコーディング技術を、やさしくしっかり解説しています。

本書の解説では実制作のフローに沿い、Webデザインの概論と制作に必要なツールや素材について学んだあと、HTML・CSSの基礎とサイト制作の実践を習得し、公開や運用に関する知識を学びます。

初学者の方がプロの制作者を目指す上で必要となる一連の知識と技術を体系的に学べる内容です。

実践パートで学習用サンプルとして制作するのは、シングルページのシンプルなお店のサイトと、レスポンシブWebデザインを取り入れたサイトの2つです。

手順に沿ってやってみるチャレンジパートもあるほか、学習用サンプルはダウンロードデータとして提供。

本書では各記事ごとに学習時間の目安を記載しており、授業や独習で学習教材として活用しやすい構成を目指しました。

“ちゃんとしたプロ”のWebデザイナー、マークアップエンジニアとしてスタート地点に立つための知識と技術が、最短コースで身につきます！

■ページ見本

------------------------------------------------------------
■Lesson1　Webサイトの成り立ち
------------------------------------------------------------
01　Webページが表示されるまでの仕組み
02　Webブラウザの役割と種類を知ろう
03　「Webデザイン」って何をすること？
04　Webサイト制作のワークフローを知ろう
05　Webサイト制作に携わるさまざまな職種
06　Webサイトを作るために必要な技術
07　Webサイトを作るために必要なツール

------------------------------------------------------------
■Lesson2　Webサイトの枠組みを知る
------------------------------------------------------------
01　Webサイトはどんな目的で作るのか？
02　WebユーザビリティとWebアクセシビリティ
03　Webサイトの基本的な構造と要素
04　Webページに必要な情報と文書構造
05　文書構造をアウトライン化してみる
06　文書に「意味づけ」を行うHTML
07　Webページの見た目や配置を指定するCSS
08　レスポンシブWebデザインを理解する
09　ワイヤーフレームとプロトタイプ
10　JavaScriptを使った動的な表現の実装

------------------------------------------------------------
■Lesson3　Webデザインの特性を知る
------------------------------------------------------------
01　印刷物とWebの違い
02　ページ構成の考え方と情報の見せ方
03　2つのカラーモード「RGB」と「CMYK」
04　色の三属性を理解する
05　配色のポイントとWebアクセシビリティ
06　Webサイトで色を表現するには？
07　Webサイトのフォント（書体）

------------------------------------------------------------
■Lesson4　Webデザインに必要な素材
------------------------------------------------------------
01　Webサイトで使う素材はどんなもの？
02　テキスト情報の文字コードと改行コード
03　コードエディターの選び方
04　デジタル画像を構成する単位「ピクセル」
05　Webサイトで使う画像の形式
06　ビットマップ画像とベクター画像
07　動画素材や音声素材の使い方
08　Webサイトの素材と著作権
チャレンジしてみよう！ Web用の画像を書き出してみよう

------------------------------------------------------------
■Lesson5　HTMLをマスターする
------------------------------------------------------------
01　HTMLについて知ろう
02　テキスト情報に意味を与えるマークアップ
03　Webブラウザで表示してみよう
04　タグと属性
05　HTMLの基本構造
06　＜head＞タグの中に記述する情報
07　＜body＞タグで使うタグの性質とルール
08　ページの構造を示すタグ
09　見出しタグ＜h1＞～＜h6＞と段落タグ＜p＞、強制改行＜br＞
10　リンクを示す＜a＞タグ
11　画像を挿入する＜img＞タグ
12　箇条書きリストと番号つきリスト
13　テーブルを構成するタグ
14　3つのタグで作る説明リスト
15　文章の一部分を強調するタグ
16　連絡先や注釈を示すタグ
17　フォームの仕組み
18　フォームを構成する部品
19　情報を整理する＜div＞タグと＜span＞タグ
チャレンジしてみよう！文章をマークアップしてみよう

------------------------------------------------------------
■Lesson6　CSSをマスターする
------------------------------------------------------------
01　CSSについて知ろう
02　CSSの役割
03　CSSの基本形
04　よく使われるセレクタ
05　CSSの適用方法
06　CSSのルール
07　新しいCSSプロパティとリセットCSS
チャレンジしてみよう！簡単なCSSを書いてみよう
08　プロパティを目的別に2つに分ける
09　文字や背景に色をつける
10　フォントの指定
11　行間（行高）や文字揃えの指定
12　テキストリンクの装飾
13　マウスホバーでスタイルを変える
14　疑似要素
15　レイアウトの基本「ボックスモデル」
16　幅と高さの指定
17　内余白（パディング）の指定
18　境界線（ボーダー）の指定
19　ボックス同士の間隔（マージン）を指定する
20　背景に画像を指定する
21　要素の性質を切り替えるdisplayプロパティ
22　ブロックをレイアウトするさまざまな方法
23　flexboxを使ったレイアウト
24　CSS Gridで二次元的レイアウト
25　positionを使った要素の自由配置
チャレンジしてみよう！ CSSで要素をレイアウトしてみよう
26　リストタグでナビゲーションを作る
27　テーブルをデザインする
28　フォームをデザインする
チャレンジしてみよう！背景画像やナビゲーションを表現しよう

------------------------------------------------------------
■Lesson7　シングルページのサイトを作る
------------------------------------------------------------
01　制作現場での進め方を見てみよう
02　完成イメージと全体構造の確認
03　HTMLのマークアップ（1）下準備とページの大枠
04　HTMLのマークアップ（2）各セクションを作り込む
05　CSSのコーディング（1）ページ全体のスタイル指定
06　CSSのコーディング（2）細かなスタイルの指定

------------------------------------------------------------
■Lesson8　レスポンシブ対応サイトを作る
------------------------------------------------------------
01　レスポンシブWebデザインでサンプルサイトを作る準備
02　動物園のサイトを作る（1）共通部分のHTMLとCSS
03　動物園のサイトを作る（2）トップページ
04　動物園のサイトを作る（3）「入園料」ページ
05　動物園のサイトを作る（4）「お問い合わせ」ページ
06　動物園のサイトを作る（5）幅768px以下のスタイル指定

------------------------------------------------------------
■Lesson9　Webサイトを公開してみよう
------------------------------------------------------------
01　Webサーバーとドメイン
02　公開前にテスト環境で確認する
03　Webサイトの品質とバリデーション
04　Webサーバーにデータを転送する仕組み
チャレンジしてみよう！ FTPでデータをアップロードしてみよう
05　Webブラウザで表示を確認しよう
06　Webサイトデータのバージョンを管理する

------------------------------------------------------------
■Lesson10　Webサイトを運用する
------------------------------------------------------------
01　Google Search ConsoleにWebサイトを登録する
02　Webサイトの効果を測定するアクセス解析
03　Google アナリティクス 4を設定してみよう
04　ユーザビリティやアクセシビリティの改善
05　セキュリティ対策の基本はアップデートと情報収集
06　ソーシャルメディアとの連携について

用語索引