（ご注意）
本書は、動画講義視聴主体の参考書です。お読みになるには、ある程度の大きさのカラーディスプレイを備えたデバイスが必要です。動画の閲覧には、インターネットへの接続環境が必要になります。また、kindle paper whiteでの読書には適していません。詳しくは、無料サンプルをダウンロードして、ガイダンス動画をご覧になって判断してください。動画リンクをタップしても表示に時間がかかる場合は、リロード（再読み込み）をしてください。
本書は、HTML5 & CSS3を使ってWebサイトを構築する方法を動画を見ながら学べる書籍です。動画講義の時間は、実に20時間にも及びます。これは、有名スクールで行われている通学コースの時間に匹敵します。
本書の学習対象となるのは以下の方々です。
・HTMLの学習経験がなく、この機会にWeb制作を基礎から学習したい方
・予備知識はあるが、最新のHTMLによるマークアップを学習したい方
・Webサイト構築を学習して、ビジネスに役立たい方
etc・・・・
本書の特徴は以下のような点があげられます。
■動画なので、理解できるまで何度でも復習できます！
通学のハンズオン形式のセミナーでは、直接講師から教えてもらえますが、難しい論点になると1回ではほとんど理解できないことが往々にしてあります。しかし、動画セミナーでは、自分のペースでわかるまで何度も気兼ねなく復習できるのが利点です。
■eラーニングと書籍のいいとこ取りを目指しました！
いくら動画による学習が視覚的に理解しやすくても、理解を深めるときには遠回りになることがあります。8割程度理解した箇所を復習する場合、わからなかった箇所まで動画の頭出しをするのは面倒です。トータルに復習する場合でも、理解できているところを早送りするのも面倒です。
そこで、本書では、後述する特典として動画講義のエッセンスを漏れなく記述した講義レジェメを配布することにしました。逆に、レジェメだけを読んでスムーズに理解できるところは、いちいち動画を見ないで次へ学習を進めることができます。理解が曖昧な個所だけを確認するのにも便利です。
つまり、書籍だけでも不十分。動画だけでも不十分。両方合わせることで、短期間でのスキルアップが可能になるのです。
■特典の講義レジェメを配布
前述した講義レジェメは、メールアドレスの登録など一切不要でダウンロード可能ですので、安心してご利用いただけます。
※全ての講義レジェメの配信完了は2016年12月中旬～下旬を予定しております。
■20時間の動画講義を、誰でもお求めいただける価格で提供することを実現しました！
有名スクールの受講料金は中々手が出ない人もいると思います。向上心旺盛なあなたが、未来への自己投資ができないならば、これ以上不条理な現実はありません。しかし、本書では徹底したコストダウンによって専門書1冊程度の価格でのご提供を実現しました。もう、自分の将来への投資を諦める必要などありません。
■サポートサイトでスキルアップができる！
ＨＴＭＬ５やCSS3と言っても、幅広い範囲に及びます。市販本では、多様な読者に満足してもらおうとするあまり、細かい知識・Tipsが随所に散りばめられています。しかし、これが初心者にとっては理解の妨げになることがあります。全くの初心者にとっては、サイト完成までの最短距離をはじめに知ることが重要です。細かい知識や、スキルアップの技術は後回しで学習すればよいのです。
本書では、サイト構築に絞って丁寧な動画解説を行っています。その上で、サポートサイトにスキルアップのためのコンテンツを公開しています。
つまり、本書とサポートサイトを併用することで、初心者でも無理なくHTML5の基本を学習し、さらにレベルアップを図れます。
サポートサイトは、余計な個人情報の登録など一切不要で全てのコンテンツをどなたでも閲覧することができるので安心です。この２段階の設計による快適な学習を体感してください。
※サポートサイトは、本書の補完的役割を果たすもので、動画講義に関する個別の質問対応はできかねますことを予めご了承ください。
文字だけの学習では、すぐに忘れてしまいます。動画を目で見て、解説音声を聞く、五感をより刺激する学習のほうがスムーズな理解が得られて、記憶にも定着しやすいのです。あなたも本書でHTML5 & CSS3をスピーディにマスターしてください。
【目次】
序章 実習前の準備
0-1 拡張子の表示
0-2 Bracketsのインストール
0-3 Google Chromeのインストール
0-4 画像素材の解凍
第1章 HTML入門
1-1 HTMLファイルの基本構造
1-2 HTMLファイルの作成
1-3 文字コード
1-4 見出しタグ
1-5 改行
1-6 画像の種類
1-7 画像のパス
1-8 画像の挿入
1-9 a要素
1-10 リンク
1-11 リスト（箇条書き）
1-12 タグの親子関係
第2章 トップページのマークアップ
2-1 サイトマップ
2-2 サイトの全体構造
2-3 フォルダの作成
2-4 headのコーディング
2-5 headerの範囲
2-6 headerのコーディング1
2-7-1 headerのコーディング２前半
2-7-2 headerのコーディング２後半
2-8 セクショニング・コンテンツ
2-9 navigationのコーディング
2-10 コメントとインデント
2-11 キービジュアルの配置
2-12-1 メインとasideの概要1
2-12-2 メインとasideの概要2
2-12-3 メインとasideの概要3
2-13-1 メインとasideの骨組み1
2-13-2 メインとasideの骨組み2
2-14 articleの全体構造
2-15 figure要素について
2-16 article要素のマークアップ
2-17 定義リスト
2-18 新着情報
2-19-1 サイドコンテンツ1
2-19-2 サイドコンテンツ2
2-20 footerのマークアップ
第3章 CSSによるデザイン
3-1 CSS概要
3-2 CSSファイルの作成
3-3 ボックスモデル
3-4 body,h,pの調整
3-5 ショートハンド
3-6 ページ内の余白
3-7 セレクタの種類
3-8 CSSの単位
3-9-1 CSSの上書き・優先順位
3-9-2 id・class属性
3-9-3 疑似クラス
3-9-4 ブロックレベル要素・インライン要素1
3-9-5 ブロックレベル要素・インライン要素2
3-10-1 色の指定1
・・・・・
3-10-4 色の指定4
3-11 h1の装飾 border-radius
3-12 h2の装飾
3-13 h3の装飾
3-14 floatプロパティ
3-15 headerレイアウト
3-16 header補足
3-17-1 ナビゲーション1
3-17-2 ナビゲーション2
3-18 overflow hiddenの補足
3-19 疑似クラスhover
3-20 transition解説
3-21 transitionデモ
3-22 メニューへのtransition
3-23 イメージ画像の調整
3-24 2カラムレイアウトの概要
3-25 2カラムレイアウトのコーディング
3-26 ベンダープレフィックス
3-27 2色線形グラデーション
3-28 linear-gradient
3-29 行間の調整
3-30 figure要素のデザイン
3-31 定義リスト調整
3-32-1 aside調整1
・・・・・
3-32-4 aside調整4
3-33-1 footerデザイン1
3-33-2 footerデザイン2
3-33-3 footerデザイン3
第4章 他のページの制作
4-1-1 メニューページの作成1
4-1-2 メニューページの作成2
4-2-1 プランページの作成1
4-2-2 プランページの作成2
4-3 アクセスページの作成
4-4-1 フォームページの作成1
・・・・・・
4-4-7 フォームページの作成7
第5章 レスポンシブデザイン入門
5-1 ビューポート
5-2-1 メディアクエリ1
5-2-2 メディアクエリ2
5-2-3 メディアクエリ3
5-3 box-sizingプロパティ
5-4 レスポンシブ対応
・・・・・・
5-13 レスポンシブ対応10
第6章 サイトの公開
6-1 FTPソフトのインストール
6-2 公開
第7章 特典 講義レジェメについて
第8章 サポートサイトについて
本書は、動画講義視聴主体の参考書です。お読みになるには、ある程度の大きさのカラーディスプレイを備えたデバイスが必要です。動画の閲覧には、インターネットへの接続環境が必要になります。また、kindle paper whiteでの読書には適していません。詳しくは、無料サンプルをダウンロードして、ガイダンス動画をご覧になって判断してください。動画リンクをタップしても表示に時間がかかる場合は、リロード（再読み込み）をしてください。
本書は、HTML5 & CSS3を使ってWebサイトを構築する方法を動画を見ながら学べる書籍です。動画講義の時間は、実に20時間にも及びます。これは、有名スクールで行われている通学コースの時間に匹敵します。
本書の学習対象となるのは以下の方々です。
・HTMLの学習経験がなく、この機会にWeb制作を基礎から学習したい方
・予備知識はあるが、最新のHTMLによるマークアップを学習したい方
・Webサイト構築を学習して、ビジネスに役立たい方
etc・・・・
本書の特徴は以下のような点があげられます。
■動画なので、理解できるまで何度でも復習できます！
通学のハンズオン形式のセミナーでは、直接講師から教えてもらえますが、難しい論点になると1回ではほとんど理解できないことが往々にしてあります。しかし、動画セミナーでは、自分のペースでわかるまで何度も気兼ねなく復習できるのが利点です。
■eラーニングと書籍のいいとこ取りを目指しました！
いくら動画による学習が視覚的に理解しやすくても、理解を深めるときには遠回りになることがあります。8割程度理解した箇所を復習する場合、わからなかった箇所まで動画の頭出しをするのは面倒です。トータルに復習する場合でも、理解できているところを早送りするのも面倒です。
そこで、本書では、後述する特典として動画講義のエッセンスを漏れなく記述した講義レジェメを配布することにしました。逆に、レジェメだけを読んでスムーズに理解できるところは、いちいち動画を見ないで次へ学習を進めることができます。理解が曖昧な個所だけを確認するのにも便利です。
つまり、書籍だけでも不十分。動画だけでも不十分。両方合わせることで、短期間でのスキルアップが可能になるのです。
■特典の講義レジェメを配布
前述した講義レジェメは、メールアドレスの登録など一切不要でダウンロード可能ですので、安心してご利用いただけます。
※全ての講義レジェメの配信完了は2016年12月中旬～下旬を予定しております。
■20時間の動画講義を、誰でもお求めいただける価格で提供することを実現しました！
有名スクールの受講料金は中々手が出ない人もいると思います。向上心旺盛なあなたが、未来への自己投資ができないならば、これ以上不条理な現実はありません。しかし、本書では徹底したコストダウンによって専門書1冊程度の価格でのご提供を実現しました。もう、自分の将来への投資を諦める必要などありません。
■サポートサイトでスキルアップができる！
ＨＴＭＬ５やCSS3と言っても、幅広い範囲に及びます。市販本では、多様な読者に満足してもらおうとするあまり、細かい知識・Tipsが随所に散りばめられています。しかし、これが初心者にとっては理解の妨げになることがあります。全くの初心者にとっては、サイト完成までの最短距離をはじめに知ることが重要です。細かい知識や、スキルアップの技術は後回しで学習すればよいのです。
本書では、サイト構築に絞って丁寧な動画解説を行っています。その上で、サポートサイトにスキルアップのためのコンテンツを公開しています。
つまり、本書とサポートサイトを併用することで、初心者でも無理なくHTML5の基本を学習し、さらにレベルアップを図れます。
サポートサイトは、余計な個人情報の登録など一切不要で全てのコンテンツをどなたでも閲覧することができるので安心です。この２段階の設計による快適な学習を体感してください。
※サポートサイトは、本書の補完的役割を果たすもので、動画講義に関する個別の質問対応はできかねますことを予めご了承ください。
文字だけの学習では、すぐに忘れてしまいます。動画を目で見て、解説音声を聞く、五感をより刺激する学習のほうがスムーズな理解が得られて、記憶にも定着しやすいのです。あなたも本書でHTML5 & CSS3をスピーディにマスターしてください。
【目次】
序章 実習前の準備
0-1 拡張子の表示
0-2 Bracketsのインストール
0-3 Google Chromeのインストール
0-4 画像素材の解凍
第1章 HTML入門
1-1 HTMLファイルの基本構造
1-2 HTMLファイルの作成
1-3 文字コード
1-4 見出しタグ
1-5 改行
1-6 画像の種類
1-7 画像のパス
1-8 画像の挿入
1-9 a要素
1-10 リンク
1-11 リスト（箇条書き）
1-12 タグの親子関係
第2章 トップページのマークアップ
2-1 サイトマップ
2-2 サイトの全体構造
2-3 フォルダの作成
2-4 headのコーディング
2-5 headerの範囲
2-6 headerのコーディング1
2-7-1 headerのコーディング２前半
2-7-2 headerのコーディング２後半
2-8 セクショニング・コンテンツ
2-9 navigationのコーディング
2-10 コメントとインデント
2-11 キービジュアルの配置
2-12-1 メインとasideの概要1
2-12-2 メインとasideの概要2
2-12-3 メインとasideの概要3
2-13-1 メインとasideの骨組み1
2-13-2 メインとasideの骨組み2
2-14 articleの全体構造
2-15 figure要素について
2-16 article要素のマークアップ
2-17 定義リスト
2-18 新着情報
2-19-1 サイドコンテンツ1
2-19-2 サイドコンテンツ2
2-20 footerのマークアップ
第3章 CSSによるデザイン
3-1 CSS概要
3-2 CSSファイルの作成
3-3 ボックスモデル
3-4 body,h,pの調整
3-5 ショートハンド
3-6 ページ内の余白
3-7 セレクタの種類
3-8 CSSの単位
3-9-1 CSSの上書き・優先順位
3-9-2 id・class属性
3-9-3 疑似クラス
3-9-4 ブロックレベル要素・インライン要素1
3-9-5 ブロックレベル要素・インライン要素2
3-10-1 色の指定1
・・・・・
3-10-4 色の指定4
3-11 h1の装飾 border-radius
3-12 h2の装飾
3-13 h3の装飾
3-14 floatプロパティ
3-15 headerレイアウト
3-16 header補足
3-17-1 ナビゲーション1
3-17-2 ナビゲーション2
3-18 overflow hiddenの補足
3-19 疑似クラスhover
3-20 transition解説
3-21 transitionデモ
3-22 メニューへのtransition
3-23 イメージ画像の調整
3-24 2カラムレイアウトの概要
3-25 2カラムレイアウトのコーディング
3-26 ベンダープレフィックス
3-27 2色線形グラデーション
3-28 linear-gradient
3-29 行間の調整
3-30 figure要素のデザイン
3-31 定義リスト調整
3-32-1 aside調整1
・・・・・
3-32-4 aside調整4
3-33-1 footerデザイン1
3-33-2 footerデザイン2
3-33-3 footerデザイン3
第4章 他のページの制作
4-1-1 メニューページの作成1
4-1-2 メニューページの作成2
4-2-1 プランページの作成1
4-2-2 プランページの作成2
4-3 アクセスページの作成
4-4-1 フォームページの作成1
・・・・・・
4-4-7 フォームページの作成7
第5章 レスポンシブデザイン入門
5-1 ビューポート
5-2-1 メディアクエリ1
5-2-2 メディアクエリ2
5-2-3 メディアクエリ3
5-3 box-sizingプロパティ
5-4 レスポンシブ対応
・・・・・・
5-13 レスポンシブ対応10
第6章 サイトの公開
6-1 FTPソフトのインストール
6-2 公開
第7章 特典 講義レジェメについて
第8章 サポートサイトについて
