オーディオ教材

01 はじめに

• この耳デミーで学べることの簡単な説明。
• この講座の簡単な特徴

02 学び方

• 耳デミーの使い方の説明。
• 耳デミーは、とりあえず、１周目は聞くだけ。
• ２周目ぐらいから、本を参考に読んだり、実際に手を動かす。

03 HTMLの歴史

• HTMLの歴史を知っておくと記憶力が上がる。
• HTML発祥の地は？なぜ、生まれたのか？その後の発展は？

04 コード化

• （コード化・通信・再構築）
• 「人間のコミュニケーション」・「音楽」から「Webサイトが表示される」までを知る。
• コード＝HTMLでルールが決まっているので、読めないことはないことを理解する。

05 コードの実例

• 実物でWebページがどのように表示されるかを理解する。実際のWebページとHTMLソースを行き来して、どのように対応しているかを知る。
• 一見、短いプログラミングも、「要素の検証」をすると、よくわかるようになっている。
• Webサイトは、HTML、CSS、Javascriptをうまく解析して、表示されていることを知る。

06 ブラウザとは

• ブラウザの語源、ブラウザの歴史の推移、現在のブラウザの種類について知る。

07 ブラウザまとめ

• 業界標準に則ったルールに沿ったコードを書けば、うまく表示する時代、サイトを作りやすい時代になった。

08 ルールとは

• HTMLのルールは、人間が考えた良いと思われるアイディアをである。

09 ルールの学び方

• ルールを素早く理解するコツ３つについて説明しています。ICTの学び方のコツです。

10 HTMLのルール

• ルールを理解する初歩です。

11 タグとは

• ＜と＞で囲まれたものがタグです。タグ、属性、値、小要素について説明しています。

12 タグとは(デモ)

• 実際にやっている様子を見てみましょう。

13 headタグ

• headタグとは「設定」を書くところです。

14 boilerplate

• boilerplate（雛形）を実際に使ってみましょう。

15 Bodyの中

• bodyの中身は「本文」です。そこで使う「タグ」は、使いながら覚えましょう。

16 ルールのルール

• boilerplate（雛形）を使っている様子を見ながら、ルールのルールの理解を深めましょう。

17 HTMLタグを学ぶ方法

• 「W3Schools」を勉強してみましょう。

18 w3schools

• 「W3Schools」を実際に使ってHTMLを学びましょう。

19 主なタグ1

<h1>～<h6>、<p>、<b>、<strong>、<em>、<mark>、<small>、<del>、<ins>、<sub>、<sup>、<blockquote>、<ul><li> ヘッダー1～6、パラグラム、太字、強調、斜体、マーカー、縮小、取り消し線、アンダーライン、下付け、上付け、引用、箇条書きのタグを知りましょう。（覚える必要はありません）

20 主なタグ2

<table><tr><th><td>、embed（埋め込みの仕方）（タグなし）、表（列、項目、内容）、動画や音声の埋め込みのやり方を知りましょう。（覚える必要はありません）

21 主なタグ3

<a href=“”>、リンクの表示のやり方を知りましょう。（覚える必要はありません）

22 主なタグ4

<img src=“”>、画像の表示のやり方を知りましょう。（覚える必要はありません）

23 HTML5のタグ

• HTML5から増えた新しいタグを知りましょう。（覚える必要はありません）

24 セマンティックWebとHTML5

• 自然言語処理について。HTML5になって増えた用語・削除された用語があります。

25 CSS

• CSSとは、について学びます。→スタイル(装飾）を決定するものである。

26 CSSのルール1

• 実際にCSSを書いてみましょう。
  

  の中に書く内容を知りましょう。

27 IDとクラスによる指定

• idとclassを使った装飾方法の分類について知りましょう。

28 色々な指定方法

• 他にも＋、．、等を組み合わせて、他の装飾方法があることを知りましょう。（覚える必要はありません）

29 テンプレートで作る

• 「HTML5 UP」というサイトのテンプレートを使って、HTMLやCSSを勉強しましょう。

30 HTM5UPとは

• 「HTML5 UP」を使ってみた学生さんのサンプル紹介。

31 小さな改良から始める

• 「HTML5 UP」を使って、「小さな変更」を実際に一緒ににやってみましょう。

32 改良方法と学び方

• 「要素の検証（Control+Alt+i）」で、組み合わせて、どの様な装飾をしているのかを見ながら、変更してみましょう。

33 リンクとページ

• リンクとページの関係をテンプレートを学び、リンクを増やすなどの編集をしてみましょう。

34 HTLテンプレートまとめ

• HTMLテンプレートは、1ページものなどの少ないページなどで使うものです。ここまでの知識でWord Pressは十分編集できます。

35 CSSフレームワーク

• CSSとは、について学びます。→スタイル(装飾）を決定するものである。フレームワークを勉強するため、Bootcamp、UiKid、Foundotion、その他色々を紹介します。勉強の仕方を紹介します。

36 CSSフレームワーク追加情報

• 学びやすいCSSフレームワーク（シンプル、変更しやすい）を選びましょう。UiKidやBulmaがオススメです。

37 学び方

• CSSフレームワークの学び方は、全体像を知る→小さく試してみる→採用する（調べながら使う）。
• 共通の用語や概念を説明しています。

38 CSSフレームワークの裏側

• KANSOテーマがどのようなCSSで動いているのかを知りましょう。

39 共通概念

• どのCSSフレームワークでも使う、ナビ（縦）、ナビバー（水平）、グリッド（格子）、コンテナー、コンポーネント、エレメントなどを知りましょう。

40 導入の仕方

• CSSフレームワークの4つの紹介をします。共通の概念・裏の仕組みを感じ取りましょう。
• Get Started(Getting Start)などカラスターとして、Starter TemplateをHYMLに組み込むことが大事です。

41 ファイル、フォルダ、指定

• CSSフレームワークのフォルダをダウンロードする方法を学びましょう。

42 導入の仕方の実例

• 実際のやり方を見てみましょう。実践は２回目、3回目以降で結構です。

43 コンテナとは

• サイト内の余白を自然に調節してくれる機能です。実践は２回目、3回目以降で結構です。

44 グリッドとは？

• グリッド（格子）の機能の説明です。実践は２回目、3回目以降で結構です。

45 コンポーネント

• コンポーネント（部品）の説明です。スライドショー（カルーセル）、Carｄや、様々な装飾があります。どんなパーツがあるかをざっと見ておいて、組み合わせて使いましょう。

46 エレメント

• HTMLのシンプルなパーツ（リンクのタグ、アラートなど）です。。どんなパーツがあるかをざっと見ておいて、組み合わせて使いましょう。

47 CSSフレームワークの学び方

• サンプルWebサイトで、「要素の検証（副クリック）」を利用しながら、どのようなCSSフレームワークを使っているのかを調査して、応用してみましょう。

48 WordPressをカスタマイズする

• KANSOテーマのCSSを解説して、実際にカスタマイズしてみましょう。

49 まとめ

• HTML、CSS、CSSフレームワークを使う適切な状況、学び方の総まとめです。

---