ほんきでHTML講座がスタート!

初めまして!本講座の補助講師をさせてもらうことになりました綿村と申します。私がHTMLやCSSを学ぶ際につまずいた点やもっと早く知っておきたかった事など、授業を通じて受講生のみなさんにお伝えしていければと思っております。

そして今回は29日から開講した全8回の「ほんきでHTML」の内容や様子を私がレポートしていきますのでよろしくお願いします。

html

第1回目は自己紹介から始まりました。
過去にWEBデザインの勉強されもう一度基礎からやり直したいという方、運用しているECサイトのデザインをカスタマイズしたい方、CSSを基礎からやり直して表現方法を広げたいなど様々な思いを持った計6名の方たちがいらっしゃいました。

自己紹介を終え、早速授業に入っていきます。

html

第1回目の内容

  • 基本的なHTMLタグとは
  • HTMLとCSSとJavascriptの役割について
  • 実際にHTMLでマークアップしてみよう
  • CSSでスタイリング
  • メニューの作成

まず、実際のWEB制作でよく使われるHTMLタグを用例とともに説明し、CSSとJavascriptの役割について解説していきました。

  • HTML = 文章構造
  • CSS = スタイル(見た目)
  • Javascript = インタラクティブ(動き)

ですね。

html

実際にHTMLでマークアップしてみよう

次は、こちらで用意した原稿を基に実際にHTMLでマークアップしていきました。
HTMLマークアップは文章の構造を理解する必要があります。
このタイトルと文章の関係は?、ここは箇条書きになっているからリストタグだな、ここは節になっているからsectionタグで囲んでみよう、などなど数多あるHTMLタグの中から文章構造にあったタグを選択していきます。

ちなみに、クスールの講座は実際にコードを書いて覚えてみようという方針です。
百聞は一見にしかずと云いますが、コードも同様で百聞は一コーディングにしかず。
授業内でもたくさんコードを書いて覚えていきます。
(慣れない作業で大変だと思いますが、講師 補助講師がしっかりサポートします!)

html

CSSでスタイリング

休憩を挟んだ後に、CSSを使ってスタイリングをしていきます。

  • font-size
  • color
  • border
  • background-color

実際にコードを書いてブラウザで検証しながら、ブロック要素とインライン要素とは、背景色やフォントサイズなどの説明に入ります。
※エディターはATOM、ブラウザはGoogle Chromeを使用します。

説明を終えたところで、覚えたCSSで某有名サイトのメニューを真似て縦型のメニューを作ってみようという事で小一時間もくもくと作業。

たくさん質問を頂きながら、みなさん形になってきました。
「分からないところが分からない」という状況でも声を掛けていただければ出来る限りサポートするので、ぜひ質問してくださいね。(受講生のみなさん)

最後に、全8回を通して覚えた技術で受講者のみなさんに制作していただく企画の概要を説明し、次回はそのプレゼンを行っていただきます。

そんなこんなで第1回目は終了し、次回は本格的にCSSを学んでいく予定です。

html

本講座は日曜日開催ですが、前日の土曜日にはiPhoneアプリ講座が開講されています。
ご興味がある方は見学も受け付けているので、ご気軽にお問い合わせ下さい。