職業訓練校のHTMLの基礎授業は17日間（課題制作やレスポンシブは含まず）だった。
HTML学習初日からメモってた簡易記録を記事化。
教える側の人のなにかの参考になれば、あるいはこれから学ぶ人の何かの参考になれば。
HTMLにはじめて出会ってからの17日間
箇条書きでメモってたものをほぼそのまま掲載。ただの学習内容から思ったことまで。
※昔の自分へのコメントを書きたくなってしまったので囲みにて。
1日目：HTMLの概要
- HTML概要、構造の理解（タグや要素、属性、ドキュメントツリー、DOCTYPE宣言）。
- 1つのWEBページはHTML文書１ページで作成するのかー、なるほどイメージと違った。
- タグ、要素、属性など言葉が出てきてすぐには区別がつかない。がそれを前提に説明が進むので困る。
- 要素の入れ子、ドキュメントツリーなどは図解しやすいのですぐわかった。
タグとか要素とかの用語を当然のように使われても、そりゃわかんないんだよなあ…その日にはじめて聞いたんだから。
2日目：実際にHTMLでマークアップしてみる
- ブロックレベルとインラインレベルという概念が出てくる。（でもタグの使い方もおぼつかないのでよくわからん…）
- 実際に写真入りの簡単な紹介ページを作る。テキスト通りにやればできるのでそれはそれで楽しい。でもぜんぜんわかってない。わかっているタグはh1とPくらい。
3日目：前日の続きで簡単な紹介ページ作り
- 見出しや段落のマークアップをしっかり覚えるのが大事らしい、箇条書きリストなども練習すること。
- divはわかるがsectionはよくわからない・・・
- ブロックとインライン、まだよくわからない。
- 改行、強調、画像の挿入、リンクなどはそれほど難しくない。が、PCを使っていない人はリンク先のパスの書き方などが理解できず苦戦するようだ。
ブロック要素とインライン要素、苦戦してたんだなあ…しみじみ
4日目：ページ作り続き パスや文字参照 表とフォームの設置
- テキストボックスの設置などの実習はみんな順調。
- チェックツールを使うと間違いだらけ。
HTMLチェックツールで確認したとき、ほんとに×だらけでこれは向いてないかもなと思ったのをよく覚えてます…笑
5日目：cssの概要説明 前日書いたHTMLにcssを当ててみる
- 授業の冒頭で簡単な復習（これのことを何という？→答え「要素」とか）をするがみんなほとんど答えられず、いかに基本の用語に慣れていないかわかる。
- インライン、内部参照、外部参照というCSSをHTMLにつなげる概念で混乱する。
- セレクタ、プロパティ、値といった用語がでてきて、どれがどれだかわからない（※追記 ３日後くらいに馴染んだ）。
- 色指定はフォトショ等で16進数などの表現に慣れていたのでスムーズ。
- 実習は書いてある通りにやればできるが、プロパティなどたくさん出てきて英単語にもまだ慣れない。
- HTMLとcssの書き方の違い（コロンや大なり小なり）に慣れない どっちがどっちだかわからなくなる。
これは懐かしい！CSSにHTMLのタグ<>を書こうとしたり、テキストエディタでどっちがHTMLでどっちがCSSか区別がつかなかった…笑
6日目：セレクタ cssの継承と詳細度
- グループや子孫セレクタの説明があるが、実習不足過ぎて使い方はわからない、意味はわかるが。
- 単位、絶対と相対、emとremの違いはかなり丁寧に時間をかける。
- カスケーディングの意味、継承と詳細度についての説明。
- ようやくタグと要素といった用語の区別がつき、代表的なタグなどはすぐにわかるようになる。これができていない最初の期間はテキストや先生の説明でこれらの言葉をすぐに把握できないのがきつかった。
7日目：cssの実習の続きをやりながらポイントを覚えていく
- タイトル、リンク、見出しなどの設定。色やセンターなどは簡単。
- 属性セレクタや疑似クラスなどの説明があるが、よくわからない（※追記 4,5日後に読んだら意味はわかった。使いどころはわからないが）。
- ショートハンドはわかった。
- ボーダーやバックグラウンドなどは慣れてきた。
疑似クラスとか使えるようになったのだいぶ後だし…笑、そりゃ７日目じゃわかんないよなあ…
8日目：前日の続き
- 入力フォームのスタイリングなどはわかりやすいので楽しい。
- レイアウトの種類などはさらっと進む。
9日目：floatとposition
- 最初どっちがライトでどっちがレフトかとかよくわからない。
- 特にフロートの解除で同じ階層にあるかどうかなどはよくわからなかったので、いろいろ授業外に試して何となく理解（※追記 別階層にあるフロートの解除はよくわからなかったが、３日後くらいによくわかった）。
- カラム落ちなどはわかる。
- positionで絶対配置と相対配置はそんなに難しくない。
でた、最初の関門float。ああ、そういえばpositionは最初から自分のお気に入りだった。
10日目：ゼロベースで見本のページを記述してみる
- 最初のcss紐づけなどで苦戦する生徒が半数くらい。
- ゴールがはっきり見えないのでHTMLの骨格をしっかり作れなかった・・・
- このタイミングでゼロベースで作るのは勉強になるし、各自の理解の度合いに応じて学習できる。
11日目：セクション関連の新要素、コンテンツモデルとcssの実習
- section要素にすれば間違いないのでとりあえずそれでいいやと思う。
- 文書のアウトラインで従来のマークアップとセクション要素を使った文書構造をやるが、要は従来ので問題ないのでとりあえずそれでいいやと思う。
- 上記２点はこだわらずにいろいろ作り、思い出したらまた復習しよう。
- コンテンツモデルはかなり漠然とした理解、従来との概念の違いくらいしかわからない。
- 文字の装飾等はできたが、覚えるのにはいろいろ繰り返さないとだめそう。
すごく性格が出てしまっているメモ。後日実務でアクセシビリティ対応サイト制作時に勉強して、ようやくHTML5の特徴が少しだけわかってきた。
12日目：画像をランダムに配置する課題
- a要素とトランスペアレント。
- 背景画像。
- cssアニメーション。
- 画像を自由配置する課題。
13日目：課題続き コーディング設計の理論 課題
- 画像の自由配置以外のリンクや最小化のところが難しかった。
- コーディング理論は1ｈくらいでけっこうざっくりと（テキスト30p分）。
- 設計の実践に入る。
14日目：displayプロパティを活用したレイアウト
- 途中で違うcssファイルに手を加えはじめたので反映されなくてたいへんだった。
何を書いても反映されないのにずっと書いてたりした…
15日目：cssスプライトの仕組みを理解→前日のdisplayでのレイアウトと同じものをつくる
（上の一行しかメモなし）
16日目：アニメーションや２カラムの復習
（上の一行しかメモなし）
たしかこの時点ではまだ2カラムにするfloatで苦戦してたような気がする…
17日目：前日続き、キーフレームアニメーションなどの例題を少しだけ
（上の一行しかメモなし）
キーフレームアニメーションなぜかハマった…笑
その後の概要
一応その後の授業概要を補足。
18日目～24日目：2ページのサイト制作
7日間で学んだことを生かして制作、その後発表。制作期間中のメモには以下。
- 設計はきちんとして、重なりなどがないようにする。
- トラブったときは一つずつコメントアウトしていき、原因となっているCSSを特定。
そういえば、ワイヤーフレームもなしに適当に書き始めてた。たしか強引に書いてたので、いろいろレイアウトが重なっちゃったりでずっと調整してた気が…
この頃はまだデベロッパーツールを全く使えていなかった。
25～31日目：レスポンシブデザイン
4日間で学習。後半3日で別のテキストに沿って、具体的な課題制作。
今思うとレスポンシブ短い…気もする。カリキュラム上仕方ないのかも…重要度的にもう少し時間が欲しかった。
まとめ
記録を振り返ると意外なところでつまづいたりしている。逆に難しそうなところはスムーズにできていたり。
ただこの辺は人によって違う気がする。なぜなら他のクラスメイトもそれぞれつまづきポイントが違ったので。
つまづいたところは数日後に理解できたり、馴染んできたら何でもないと感じることが多い。なので完璧主義よりもだいたいの理解でどんどん先に進むこと。実践しながら自分の中になじませていくのが一番はやい。
コメント