MdNCORPORATION

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

栗谷 幸助 著/おの れいこ 著/藤本 勝己 著/村上 圭 著/吉本 孝一 著
定価 2,750円
(本体 2,500円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2019-09-25
仕様 B5変形判/336P
ISBN 978-4-8443-6890-8
WebデザインやHTML・CSSの学習を「1日30分からはじめる」をテーマに、やさしくしっかり解説した書籍。初学者の方が、プロのWebデザイナーを目指す上で必要となる基本的な知識や技術を体系的に学べます。“ちゃんとしたプロ”のWebデザイナーとしてスタート地点に立つために、最初に選んでいただきたい1冊です!

Webサイトの実制作のフローに沿い、本書の解説では、Webデザインの概論と制作に必要となるツールや素材・配色について学んだあと、HTML・CSSの基礎と実践を習得し、サイトの公開や運用に関する知識を身につけます。HTML・CSSの書き方を初歩から教えるだけにとどまらず、サイトを制作し、公開・運用していくために必要な基本知識をすべて解説しています。

また、各記事ごとに学習時間の目安を記載しており、授業や独習で学習教材として活用しやすい作りを目指しました。HTML・CSSの実践部分でサンプルサイトとして制作するのは、シングルページのシンプルなお店のサイトと、モバイルファーストの手法を取り入れたサイトの2つです。サンプルは学習用データとしてダウンロード提供します。

【ダウンロードURLについて】
本書のサンプルは購読者様に限り利用可能としているため、ダウンロードURLを非公開にしております。ダウンロードURLは本書の10ページに掲載しておりますので、10ページをご確認ください。

■ページ見本






目次


------------------------------------------------------------
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 デジタル画像を構成する単位「ピクセル」
04 Webサイトで使う画像の形式
05 ビットマップ画像とベクター画像
06 動画素材や音声素材の使い方
07 2つのカラーモード「RGB」と「CMYK」
08 色の三属性を理解する
09 配色のポイントとWebアクセシビリティ
10 Webサイトで色を表現するには?
11 Webサイトの素材と著作権
チャレンジしてみよう! Web用の画像を書き出してみよう

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

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

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

------------------------------------------------------------
Lesson7 レスポンシブ対応サイトを作る
------------------------------------------------------------
01 レスポンシブWebデザインでサンプルサイトを作る準備
02 水族館のサイトを作る① 共通部分のHTMLとCSS
03 水族館のサイトを作る② トップページ
04 水族館のサイトを作る③ 「営業案内」ページ
05 水族館のサイトを作る④ 「お問い合わせ」ページ
06 水族館のサイトを作る⑤ 幅768px以上のスタイル指定

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

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


巻末:用語索引

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

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