-
-
1.1イントロダクション
1.2 3つのポイント
2.1 ウォーミングアップ
2.2 知識シェアの様子
3.1 HTMLの概要
3.2 タグと属性をみわけよう（説明&ワーク）
3.2 綺麗な箱で作る（説明&ワーク）
3.3 今の知識でWebページを改良しよう
4.1 CSSの仕組み（説明＆ワーク）
4.2 CSSの使い所
5.1 CSSフレームワークとは
5.2 CSSフレームワークの例
6.1 まとめ
-
資料
最新HTMLを知ろう
事前準備
-
ログインしてください
オーディオブックがありません
この教材にはオーディオブックがありません。順次追加中です。しばらくお待ちください。
01 はじめに
この耳デミーで学べることの簡単な説明。 この講座の簡単な特徴
02 学び方
耳デミーの使い方の説明。 耳デミーは、とりあえず、１周目は聞くだけ。 ２周目ぐらいから、本を参考に読…
03 HTMLの歴史
HTMLの歴史を知っておくと記憶力が上がる。 HTML発祥の地は？なぜ、生まれたのか？その後の発展は…
04 コード化
（コード化・通信・再構築） 「人間のコミュニケーション」・「音楽」から「Webサイトが表示される」ま…
05 コードの実例
実物でWebページがどのように表示されるかを理解する。実際のWebページとHTMLソースを行き来して…
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
20 主なタグ2
21 主なタグ3
22 主なタグ4
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 …
35 CSSフレームワーク
CSSとは、について学びます。→スタイル(装飾）を決定するものである。フレームワークを勉強するため、…
36 CSSフレームワーク追加情報
学びやすいCSSフレームワーク（シンプル、変更しやすい）を選びましょう。UiKidやBulmaがオス…
37 学び方
CSSフレームワークの学び方は、全体像を知る→小さく試してみる→採用する（調べながら使う）。 共通の…
38 CSSフレームワークの裏側
KANSOテーマがどのようなCSSで動いているのかを知りましょう。
39 共通概念
どのCSSフレームワークでも使う、ナビ（縦）、ナビバー（水平）、グリッド（格子）、コンテナー、コンポ…
40 導入の仕方
CSSフレームワークの4つの紹介をします。共通の概念・裏の仕組みを感じ取りましょう。 Get Sta…
41 ファイル、フォルダ、指定
CSSフレームワークのフォルダをダウンロードする方法を学びましょう。
42 導入の仕方の実例
実際のやり方を見てみましょう。実践は２回目、3回目以降で結構です。
43 コンテナとは
サイト内の余白を自然に調節してくれる機能です。実践は２回目、3回目以降で結構です。
44 グリッドとは？
グリッド（格子）の機能の説明です。実践は２回目、3回目以降で結構です。
45 コンポーネント
コンポーネント（部品）の説明です。スライドショー（カルーセル）、Carｄや、様々な装飾があります。ど…
46 エレメント
HTMLのシンプルなパーツ（リンクのタグ、アラートなど）です。。どんなパーツがあるかをざっと見ておい…
47 CSSフレームワークの学び方
サンプルWebサイトで、「要素の検証（副クリック）」を利用しながら、どのようなCSSフレームワークを…
48 WordPressをカスタマイズする
KANSOテーマのCSSを解説して、実際にカスタマイズしてみましょう。
49 まとめ
HTML、CSS、CSSフレームワークを使う適切な状況、学び方の総まとめです。
-
-
現在、ワークショップのアーカイブビデオがありません。
