初心者がはじめてHTMLを習い苦戦した17日間。その日記。

職業訓練とスクール

HTML学習初日からメモってた簡易記録があるので今日はそれを掲載してみます。

日記の目的は以下でした。

  1. その時点でわからないところを明確にしておく
  2. いつか人に教える機会があったとき役立てる

というわけで自分用メモだったのですが、

初学者の気持ちは、意外とベテランになるほど忘れてしまうものかもしれませんし、教える側の人のなにかの参考になれば。

あとは、これから学ぶ人、今学んでいる人の何かの参考になれば。

と思ってます。

 

HTMLにはじめて出会ってからの17日間

箇条書きでメモってたのを、ほぼそのまま掲載します。

ただの学習内容から思ったことまで入り乱れてますが、せっかくリアルタイムの記録なので。この記事で毎日の見出しにしている部分も、当時自分でつけたその日の総括をそのまま掲載してます。

※日記には数日後に追記したのが含まれているので、それもわかりやすいように編集したうえで掲載。

 

※掲載作業中に昔の自分へのコメントを書きたくなってしまったのでこの囲みで足しました。

1日目:HTMLの概要

  • HTML概要、構造の理解(タグや要素、属性、ドキュメントツリー、DOCTYPE宣言)
  • 1つのWEBページはHTML文書1ページで作成するのかー、なるほどイメージと違った。
  • タグ、要素、属性など言葉が出てきてすぐには区別がつかない。が、それを前提に説明が進むので困る。
  • 要素の入れ子、ドキュメントツリーなどは図解しやすいのですぐわかった。
タグとか要素とかの用語を当然のように使われても、そりゃわかんないんだよなあ…その日にはじめてきいたんだから。

 

2日目:実際にHTMLでマークアップしてみる

  • ブロックレベルとインラインレベルという概念が出てくる。(でもタグの使い方もおぼつかないのでよくわからん…)
  • 実際に写真入りの簡単な紹介ページを作るがテキスト通りにやればできるのでそれはそれで楽しい。でもぜんぜんわかってない。この時点でわかっているタグはh1とPくらい。

 

3日目:前日の続きで簡単な紹介ページ作り

  • 見出しや段落のマークアップをしっかり覚えるのが大事らしい、箇条書きリストなども練習すること
  • divはわかるがsectionはよくわからない・・・
  • ブロックとインライン、まだよくわからない
  • 改行、強調、画像の挿入、リンクなどはそれほど難しくない。が、PCを使っていない人はリンク先のパスの書き方などが理解できず苦戦するようだ。
ブロック要素とインライン要素、苦戦してたんだなあ…しみじみ

 

4日目:ページ作り続き パスや文字参照 表とフォームの設置

  • テキストボックスの設置などの実習はみんな順調
  • 文法チェックツールを使うと間違いだらけ
ツールでみたとき、ほんとに×だらけでこれは向いてないかもなと思ったのをよく覚えてます…笑

 

5日目:cssの概要説明 前日書いたHTMLにcssを当ててみる

  • 授業の冒頭で簡単な復習(これのことを何という?→答え「要素」とか)をするがみんなほとんど答えられず、いかに基本の用語に慣れていないかわかる
  • インライン、内部参照、外部参照というCSSをHTMLにつなげる概念で混乱する
  • セレクタ、プロパティ、値といった用語がでてきて、どれがどれだかわからない(追記:3日後くらいに馴染んだ)
  • 色指定はフォトショ等で16進数などの表現に慣れていたのでスムーズ
  • 実習は書いてある通りにやればできるが、プロパティなどたくさん出てきて英単語にもまだ慣れない
  • HTMLとcssの書き方の違い(コロンや大なり小なり)に慣れない どっちがどっちだかわからなくなる
これは懐かしい!CSSにHTMLのタグ<>を書こうとしたり、テキストエディタでどっちがHTMLでどっちがCSSか区別がつかなかったなあ…笑

 

6日目:セレクタ cssの継承と詳細度

  • グループや子孫セレクタの説明があるが、実習不足過ぎて使い方はわからない、意味はわかるが
  • 単位、絶対と相対、emとremの違いはかなり丁寧に時間をかける
  • カスケーディングの意味、継承と詳細度についての説明
  • ようやくタグと要素といった用語の区別がつき、代表的なタグなどはすぐにわかるようになる これができていない最初の期間はテキストや先生の説明でこれらの言葉をすぐに把握できないのがきつかった

 

7日目:cssの実習の続きをやりながらポイントを覚えていく

  • タイトル、リンク、見出しなどの設定 色、センターなどはカンタン
  • 属性セレクタや疑似クラスなどの説明があるが、よくわからない(追記:4,5日後に読んだら意味はわかった。使いどころはわからないが。)
  • ショートハンドはわかる
  • ボーダーやバックグラウンドなどは慣れてきた
疑似クラスとか使えるようになったの最近だし…笑、そりゃ7日目じゃわかんないよなあ…

 

8日目:前日の続き

  • 入力フォームのスタイリングなどはわかりやすいので楽しい
  • レイアウトの種類などはさらっと進む

 

9日目:floatとposition

  • 最初どっちがライトでどっちがレフトかとかよくはわからない
  • 特にフロートの解除で同じ階層にあるかどうかなどはよくわからなかったので、いろいろ授業外に試して何となく理解(追記:別階層にあるフロートの解除はよくわからなかったが、3日後くらいによくわかった)
  • カラム落ちなどはわかる
  • positionで絶対配置と相対配置はそんなに難しくない
でた、最初の関門float。ああ、そういえばpositionは最初から自分のお気に入りだったなあ。でもレスポンシブで崩れてめっきり嫌いになったなあ。

 

10日目:ゼロベースで見本のページを記述してみる

  • 最初のcss紐づけなどで苦戦する生徒が半数くらい
  • ゴールがはっきり見えないのでHTMLの骨格をしっかり作れなかった・・・
  • このタイミングでゼロベースで作るのは勉強になるし、各自の理解の度合いに応じて学習できる

 

11日目:セクション関連の新要素、コンテンツモデルとcssの実習

  • section要素にすれば間違いないのでとりあえずそれでいいやと思う
  • 文書のアウトラインで従来のマークアップとセクション要素を使った文書構造をやるが、要は従来ので問題ないのでとりあえずそれでいいやと思う
  • 上記2点はこだわらずにいろいろ作り、思い出したらまた復習しよう
  • コンテンツモデルはかなり漠然とした理解、従来との概念の違いくらいしかわからない
  • 文字の装飾等はできたが、覚えるのにはいろいろ繰り返さないとだめそう
すごく性格が出てしまっているメモだ。最近アクセシビリティサイト制作で勉強して、ようやくHTML5の特徴が少しだけわかってきたぞ、この頃の自分よ。

 

12日目:画像をランダムに配置する課題

  • a要素とトランスペアレント
  • 背景画像
  • cssアニメーション
  • 画像を自由配置する課題

 

13日目:スイーツの課題続き コーディング設計の理論 課題

  • 画像の自由配置以外のリンクや最小化のところが難しかった
  • コーディング理論は1hくらいでけっこうざっくりと テキスト30p分
  • 設計の実践に入る

 

14日目:displayプロパティを活用したレイアウト

  • 途中で違うcssファイルに手を加えはじめたので反映されなくてたいへんだった
そうそう、初心者あるある、笑…かは知らないけど、何を書いても反映されないのにずっと書いてました。

 

15日目:cssスプライトの仕組みを理解→前日のdisplayでのレイアウトと同じものをつくる

(上の一行しかメモなし)

恥ずかしながら、cssスプライトって何?って思って今ググって調べました。授業でやったことすら覚えてない。

 

16日目:アニメーションや2カラムの復習

(上の一行しかメモなし)

メモないけど、たしかこの時点ではまだ2カラムにするfloatで苦戦してたような気がする…

17日目:前日続き、キーフレームアニメーションなどの例題を少しだけ

(上の一行しかメモなし)

キーフレームアニメーションなぜかハマりました…笑

その後の概要

18日目~24日目:2ページのサイト制作

7日間で学んだことを生かして制作、その後発表がありました。

制作期間中のメモが少しだけあるので一応掲載。

・設計はきちんとして、重なりなどがないようにする

・トラブったときは一つずつコメントアウトしていき、原因となっているCSSを特定

そういえば、ワイヤーフレームもなしに適当に書き始めてました。たしか強引に書いてたので、いろいろレイアウトが重なっちゃったりでずっと調整してた気が…

そうそうこの頃はまだデベロッパーツールを全く使えていなかったなあ。っていうか知らなかった…っけかな?いちいちテキストエディタを編集してました。

 

25~31日目:レスポンシブデザイン

以下の記録しかなかったです。
・4日間で学習。後半3日で別のテキストに沿って、具体的な課題制作。
今思うとレスポンシブ短い…。けどカリキュラム上仕方ないのかな…重要度的に10日くらいは欲しかったです。

お付き合いありがとうございました

ただの記録をお読みいただきありがとうございます。だれかの何かの参考になれば幸いです。

コメント