22
HTML HTML HTML HTML と と CSS CSS CSS CSS の 社内勉強会 社内勉強会 社内勉強会 社内勉強会を を主催 主催 主催 主催した した した した話 suno (すの) / @suno88 2013.9.22(Sun) (株)ケイケンシステム 研修室

HTML と CSS の社内勉強会を主催した話

  • Upload
    suno88

  • View
    607

  • Download
    3

Embed Size (px)

DESCRIPTION

2013 年 9 月 22 日開催の NSEG 第 43 回勉強会で発表した「HTML と CSS の社内勉強会を主催した話」のスライドです。

Citation preview

Page 1: HTML と CSS の社内勉強会を主催した話

HTML HTML HTML HTML と と と と CSS CSS CSS CSS のののの

社内勉強会社内勉強会社内勉強会社内勉強会をををを主催主催主催主催したしたしたした話話話話

suno (すの) / @suno882013.9.22(Sun) (株)ケイケンシステム 研修室

Page 2: HTML と CSS の社内勉強会を主催した話

自己紹介

● 春原 宏保 (すのはら ひろやす)

● 長野市在住プログラマー (Win32/Web)

● 最近は FuelPHP にハマっています

夢中になってる?

つまづいて先に進めない?

どっちも!!

Page 3: HTML と CSS の社内勉強会を主催した話

勤務するのはこんな会社

● ごくごくフツーの SIer

● 採用面接でプログラミング能力は聞かれない

● 開発はウォーターフォール

● 仕様書は Excel 方眼紙

● テストは手動

● ……

● 一部の社員には不満と危機感

(イメージ)

Page 4: HTML と CSS の社内勉強会を主催した話
Page 5: HTML と CSS の社内勉強会を主催した話

各回の内容

● #1PHP とは何か/インストール/言語仕様(1)

● #2言語仕様(2)/HTML と PHP/例題: 九九の表

● #3変数と配列の詳細/関数/例題: 住所録

● #4フォーム変数/セッション/例題: 住所録 V2

Page 6: HTML と CSS の社内勉強会を主催した話

4 回やって自然消滅

● 理由

● 熱心に受講していた社員が他社に常駐

● 最初のうちは物珍しさで参加していた管理職社員も、そのうち飽きて来なくなる

● 各プロジェクトの多忙化

● それよりも──

● 無計画な講座内容 (Bartary 的な進め方)

● 講師の準備不足

Page 7: HTML と CSS の社内勉強会を主催した話

時は流れ、2009 年春

● 長野営業所にも新人が一人配属される

● プログラミングはまったくの素人

● 長野に縁もゆかりもないので、友達も同期も知り合いもいない

● 他社常駐は私だけ

● 他の社員も基本的にヒマ

Page 8: HTML と CSS の社内勉強会を主催した話

久しぶりに社内勉強会でもやるか!

Page 9: HTML と CSS の社内勉強会を主催した話

前回の反省を踏まえて

● 最初に回数を決める

● ダラダラ続くと学習意欲が萎えるので、「全 10 回」と最初に宣言

● 内容も最初から公表

● 公式ウェブを作り、各回の内容を明記

● 予習内容も指示

● 堅苦しい「勉強」の場にはしない

● お茶菓子を用意し、つまみながら進める(まっちゃメソッド)

Page 10: HTML と CSS の社内勉強会を主催した話

(実際に使ったページ)

Page 11: HTML と CSS の社内勉強会を主催した話

各回の内容 (#1~#2)

● #1HTML とは何か / HTML の歴史 / ヘッダ部の書式 / 基本的なタグ(h1~h6 p blockquote ul ol dl)

● #2その他のタグ(div span em strong ほか) / font タグにさようなら / 物理マークアップと論理マークアップ

Page 12: HTML と CSS の社内勉強会を主催した話

このような文書を HTML で書いてもらい、論理マークアップとは何かを学んでもらった。

Page 13: HTML と CSS の社内勉強会を主催した話

このような文書を HTML で書いてもらい、論理マークアップとは何かを学んでもらった。

箇条書き

引用

大見出し

小見出し

Page 14: HTML と CSS の社内勉強会を主催した話

各回の内容 (#3~#4)

● #3文書構成とデザインの分離 / 簡単なスタイル / スタイルの指定方法 / CSS の「C」はどんな意味?

● #4CSS とフォント / ボックスモデルを理解する / ブロックレベル要素とインライン要素 / マージンとパディング

Page 15: HTML と CSS の社内勉強会を主催した話

各回の内容 (#5~#7)

● #5スタイルの指定とセレクタ / ボーダー / 背景

● #6テーブル関連のスタイル / 要素の回り込み / 擬似クラス

● #7フロートを深く知る / フロートによる段組(固定幅) / フロートによる段組(可変幅)

Page 16: HTML と CSS の社内勉強会を主催した話

各回の内容 (#8~#10)

● #8CSS によるメニューボタンの実装 / display プロパティ / min-width と IE6

● #9CSS ロールオーバー / 属性セレクタ / 擬似クラスふたたび / IE6 で見てみると

● #10XHTML ってなんだろう / こまったさんの IE6 / 次のステージを目指して / ウェブ制作のヒント

IE6 との闘いの時代

Page 17: HTML と CSS の社内勉強会を主催した話

全 10 回を終えて

● 全講座出席者は 2 名(新人含む)

● 積極的に学ぼうという意欲のあるグループ(前述の全出席者)と「気が向かないが先輩社員が講師なので出ておくか」という義務感ミエミエのグループの二極分化

● 来てほしかった層は最初から来ない

Page 18: HTML と CSS の社内勉強会を主催した話

やってよかった

● 新人が会社に馴染めた

● 私の評価がちょっとだけ上がった

● 東京事務所でも同じ内容の講座が開催された(2 年目社員が持ち回りで講師役)

● 勉強会の時間を残業申請するようにと東京の部長職社員からお達しが出た

● プログラマーに理解のある管理職

● 管理職の中では浮いているとの噂

Page 19: HTML と CSS の社内勉強会を主催した話

やっぱり変わらないことも

● 相変わらず CSS のコピペコーディング

● 切羽詰まるとすぐ <font> 要素に逃げる

● 要素技術の勉強は大事だね、という社風にはそう簡単にはならない

● 勉強しない人は何をやっても変わらない

Page 20: HTML と CSS の社内勉強会を主催した話

次の野望

● 「PHP オンライン勉強会」の開催

● 「私が勝手にテキストを公開するので、勉強したい奴は勝手に勉強してくれ」というスタイル

● 今は他社常駐組が多数派なので、集まって何かを勉強するのは難しい

Page 21: HTML と CSS の社内勉強会を主催した話

「はじめに」の文章 (予定稿)

 本講座「PHP オンライン勉強会」は、PHP を学ぶための講座ではあ

りません。PHP の学習を通じて、次に挙げるようなモダンなプログラ

ミング手法やプログラミングの常識、作法などを身につけることが目

的の講座です。• IDE (統合開発環境)とデバッガーの使い方• オブジェクト指向の考え方• 変数名、関数名、クラス名の重要性• データベース設計の基本• ユニットテスト

 プロジェクトで PHP を使う予定のない人にも有意義な講座となるこ

とを保証します。

喧嘩を売る気

マンマン!

Page 22: HTML と CSS の社内勉強会を主催した話