Schooで「HTMLに一切触れたことがない初心者のための60分」の講師をしました【生放送】

ABOUTこの記事をかいた人

 1988年生まれ。映像&WEB專門の旅人。
 大学中退後に起業。事業が安定し拡大を考える矢先、実家のある熊本で地震発生。「人はいつ死ぬかわからん。一番したいことを今やろう」と思い、私物をカバン2つに減らして世界一周へ。

 Macとドローンを持って旅しながら、世界を旅する1分動画「TR1P(トリップ)」と当ブログ「Back Pack Hack(バックパックハック)」を運営。人気講習「WordPressキャンプ」では400名以上を対面で講習済。
→ 詳しいプロフィールはこちらから。

HTMLに一切触れたことがない初心者のための60分

先日、株式会社スクーさんに出演依頼を頂いていた、

「HTMLに一切触れたことがない初心者のための60分」の生放送授業が、無事終わりました。

内容は以下のとおり↓

schooのライブ授業に出演します

今回教えた内容

今回は、全くの初心者を対象に、「HTMLとは何か?」から始まり、

基本的なタグ等を中心に「始めてのHTML」を書いてみて「おお、なるほどね楽しい」と終わることを目標としました。

 

実際やってみると、意外と時間押し押しで、一部「次回に続く」になりましたが!

作成するページ

60分で、こんな感じの、各自簡単な自己紹介作ってみよう!というのを目標としました。

書くコード

用意したHTMLコードはこんな感じ。

けっこうなボリュームにも見えますが、動画をコピペで挿入したりする所もあるので、かなり初心者向けです。

基本的かつ、理解しやすいタグを中心に教えていきます。

CSSはこんな感じ。今回はHTMLメインなので、CSSはその仕組みだけ触りました。

 

講習内容のテキスト全文はコチラから。↓

全体の流れ

放送の全体の流れはこんな感じでした。

  • 講師自己紹介
  • そもそもHTMLとは何か
  • 世界一周をした理由
  • HTMLを書いてみよう①
  • 先生の失敗談
  • HTMLを書いてみよう②

授業のようす

実際の放送のキャプチャ画像で授業のようすをご紹介。

 

「こんにちはキラです。ライダース着てきたぜぇ、ワイルドだろぉ〜?」

 

「こんな感じでね、世界一周して旅の1分動画作ったんスよ、次はウユニ撮りたいっスね」

 

「でも今日はね、HTMLの講座なんで、その話しますね。

こんな感じの、簡単な自己紹介ページを一緒につくりましょう」

 

「HTMLというのはウェブサイトの構造を決めます。CSSは見た目を定義するモノなんですねー」

 

「はい、実際に書いてみましょう。動画とかもパーンと貼ってみると楽しいっすよね」

 

「なんか生徒さんの中にザーボンさんのアイコンの人おるwwぶははww」

 

「ろくろはねー、こうやって回すとツボが綺麗にできるんすよー」

 

「テンション上がってきた、ジャケット脱いだろ」

 

「ろくろはね!やっぱりこう!こう回さなきゃ!」

てなわけで、ろくろについてアツく語った60分になりました。

受講者のコメントを紹介

というのはもちろんで、実際ちゃんとHTMLやりましたよい。

 

放送内で、受講者さんから実際に入ったコメントは以下の通り。

実名の引用はNGですが、一部紹介してここでコメントを返しますw

講師自己紹介について

めっちゃ良い動画ですね。海外行きたいなー(T.H.さん)
きらこう

いやー嬉しいっすね。ぜひこの辺からいろいろご覧になってください。

そして、ぜひドローン持って旅してみてください。最高ですよ!

 

ドローン始めたきっかけがかっこいい・・・(R.T.さん)

きらこう
褒められたww「世界一周しながら映像が撮りたかった」的なことを言った気がします。

 

平井堅?(K.H.さん)
きらこう
おい誰がPOP★STARや

引用:http://www.pinups.co.jp/hirai/

授業内の感想

出来上がっていく感じが楽しい!!(T.A.さん)

感動する~(M.T.さん)

すっごい(M.H.さん)

天才!!!(Y.I.さん)

ミニコーナーが楽しいw(J.T.さん)

初心者にやさしい吉良先生!(R.T.さん)

先生のお話もっと聞きたかったです。今日はありがとうございました。(K.K.さん)

めっっっっちゃたのしい!(H.O.さん)

先生おもしろいです(笑)(Y.K.さん)

先生の授業は何時間でも聴けますね。(T.A.さん)

おや!続編あるんですか!やった!(H.O.さん)

きらこう

うおー、こんなに褒められるとやっぱり嬉しいですね。せんせい、カンチガイしちゃうw

 

誰かに似てる?と思った!(M.T.さん)
きらこう
やから誰がPOP★STARや

引用:http://www.pinups.co.jp/hirai/

授業内で答えられなかった質問について

授業内でお答えできなかった質問もあるので、ここでお答えしてみようと思います。

figureとp、sectionとarticleの区別が難しいのですが、このように区別できるという方法があれば教えてください(J.A.さん)
きらこう

お、やや高度な質問ですね。

figureタグは、「その部分が無くても全体の意味は通るけど、補足として入れたい図や表、画像」を入れる時に使われることが多いですね!

sectionやarticleタグは、divが最も意味が無くて汎用性の高いのに対して、目的や意味がややはっきりしています。sectionが、本における「章」だとしたら、articleは、さらに小さな「ひとまとまりの文章」くらいの感じでしょうか。

 

まさかWordファイルでくるとは意外(Y.S.さん)

講座に必要なテキストなど、事前にわかるとさらにうれしいです!ダウンロードするのに、時間かかってアワアワしました・・・初心者なので。でも授業自体は面白かったので、それで集中できなかったのが残念です!(E.M.さん)

きらこう

この辺は、ほんとすみません。

本来テキストなどは無くても良いのですが、できるだけ分かりやすくするために、内容の書き起こしをしたら、授業前ギリギリになっちゃいました!できるだけ早めに用意しますw

 

WEBアプリケーションを作成するに当たり、①HTML + PHP, ②Spring, Struts, Seasar2などがありますが、①の手法は古いとは思っていません。実際のところ、先生はどうお考えでしょうか?(A.O.さん)

きらこう

①の方法がいいと思います。というのも、②の方法だとできる人が少なくて、チームでやったり外注したりする際に余計にコストがかかってしまうかと。

どのようなアプリケーションかにもよりますが、特別な理由がない限りは、共有しやすいやり方でやるほうが、全体での費用対効果が高まると思われます。

個人的な感想やまとめ

今回、生放送&オンラインの授業って初めてだったのですが、やってみての感想は以下の通り。

60分はやっぱり短い!

いやー、やっぱり60分は予想以上に短いですね。自己紹介して、基礎の話して、ちょろっと書いたらあっという間に時間ですw

無駄な内容はほぼなかったと言っていいと思いますが、それでも、出来るコトは限られていましたね!

 

用意していた内容の半分くらいしかできなかったので、次回以降に持ち越しになりました。

ただ、上記の通り、生徒さんの反応は良かったので、悪くはなかったと思います。

生徒さんがかなり意欲的&好意的

これもけっこう意外でしたw顔の見えない授業とかってもっと荒れるのかと思っていたのでw

「進行を無視した高度な質問されたり、悪口言われたりするのかな…」とビビってましたが、全くそんなことはありませんでした。

やはりこの辺は、Schooのユーザー層がしっかりしていて、仕組みもしっかりしている証拠ですね!

生放送って楽しい

そんなワケで、全体的に、とても楽しくて新鮮な体験になりました。めっちゃ褒められたしw

こういう楽しいご依頼は、どんどんお受けしていきたいですね!

 

次回以降の内容も、各SNSや当ブログでお知らせ&レビューしていきたいと思います。

各SNSはこちらからどうぞ!

プロフィール

 

それでは今日はこのへんで。

明日も、良い人生とよい旅を。

WordPressでブログを作ろう!

WordPressブログのつくりかたが分からない!という方のために。
400人以上を対面で教えた内容を、動画講座にしました。


ABOUTこの記事をかいた人

 1988年生まれ。映像&WEB專門の旅人。
 大学中退後に起業。事業が安定し拡大を考える矢先、実家のある熊本で地震発生。「人はいつ死ぬかわからん。一番したいことを今やろう」と思い、私物をカバン2つに減らして世界一周へ。

 Macとドローンを持って旅しながら、世界を旅する1分動画「TR1P(トリップ)」と当ブログ「Back Pack Hack(バックパックハック)」を運営。人気講習「WordPressキャンプ」では400名以上を対面で講習済。
→ 詳しいプロフィールはこちらから。