就労移行支援事業所でWEBデザインをゼロから学んでみた!

新横浜の就労移行支援事業所でWEBデザイン、PhotoshopやIllustratorといったソフトの使い方からHTML5/CSS3/jQuery、スマートフォンサイト用のコーディング方法、ワイヤーフレーム・デザインカンプの作り方までをゼロから一通り学んだ過程を記録しておきたくて。

就労移行支援事業所でHTMLを学ぶ①(文書構造)(第2回)

就労移行支援事業所にはじめて通うことになった、minminです

WEBデザインをゼロから学ぶことになり、オンライン授業するschooのコンテンツを使うことに相談して決まりました。

ちょうど、WEBデザイナーマスターコースとして、様々なスキルを基礎から学べるように体系だっているようです。

ただ何より先にWEBページの骨格となるHTML、さらにバージョンが新しくなりHTML5を学ぶのが最優先とのこと。

 

それでは始めていきましょう!

最初に始めたのがこちら。


全5回構成になっていて、1回60分ですから結構長いしボリューム多い気もするのですが。

 気を取り直して、第1回は

「HTM入門 文書構造を形作る」

今日学んでいく内容はこんな感じでした。

 
  • htmlとは何か
  • 04:20
 
  • Webページを構成する3つの言語: html、cssJavaScriptについて
  • 08:16
 
  • htmlを書くために必要な道具
  • 03:13
 
  • 【実践】エディタを起動しよう
  • 03:47
 
  • 【実践】エディタでhtmlを書いてみよう
  • 02:28
 
 
  • 【実践】<body>タグを書いてみよう
  • 05:22
 
  • 実践で書いたコードの解説
  • 03:35
 
  • インデントして書いてみよう
  • 02:14
 
  • htmlのテンプレートとなる構造を作る
  • 04:01
 
  • セクショニング構造

 

 

ワードやエクセルとかは使いこなせていたのですが、目次だけで知らない言葉がてんこ盛り。いきなり最初からつまずかないかと大丈夫かと思いきや,初めて見ると意外とスーと理解できました。

エディタでhtml5を実際に書いてみると意外と面白いかも。
ariclieタグとsectionタグの違いがちょっとよく分かりませんが、使っていけばなんとなくわかってくるかもと思い進めました。

html5は正しい作法というか、文法があって、それを間違えるといくら画面上はきれいに見えていても、googleが正しく認識してくれないから上位に上がらない。それに人間の目にきれいに見えるように整えていく、次に学ぶCSS3がきれいに当たらないという残念なことも起きてしまう。

どこまでゼロからhtml5で実際書くのか、世の中にはきれいなテンプレートもあるからそれに則って作っていくこともできるのでしょうが、それすら、どんなコードで書かれているかを理解するためには、html5のことを理解していないと、本当の意味で使いこなせないのかと思ったりしました。

次も頑張っていこう!

f:id:minmin999:20161222090214p:plain