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

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

2. 自己紹介
● 春原 宏保 (すのはら ひろやす)
● 長野市在住プログラマー (Win32/Web)
● 最近は FuelPHP にハマっています
夢中に
なってる?
つまづいて
先に進めない?
どっちも!!

3. 勤務するのはこんな会社
● ごくごくフツーの SIer
● 採用面接でプログラミング能力は聞かれない
● 開発はウォーターフォール
● 仕様書は Excel 方眼紙
● テストは手動
● ……
● 一部の社員には
不満と危機感
(イメージ)

5. 各回の内容
● #1
PHP とは何か/インストール/言語仕様(1)
● #2
言語仕様(2)/HTML と PHP/例題: 九九の表
●
#3
変数と配列の詳細/関数/例題: 住所録
●
#4
フォーム変数/セッション/例題: 住所録 V2

6. 4 回やって自然消滅
● 理由
● 熱心に受講していた社員が他社に常駐
● 最初のうちは物珍しさで参加していた
管理職社員も、そのうち飽きて来なくなる
● 各プロジェクトの多忙化
● それよりも──
● 無計画な講座内容 (Bartary 的な進め方)
● 講師の準備不足

7. 時は流れ、2009 年春
● 長野営業所にも新人が一人配属される
● プログラミングはまったくの素人
● 長野に縁もゆかりもないので、友達も同期も
知り合いもいない
●
他社常駐は私だけ
● 他の社員も基本的に
ヒマ

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

9. 前回の反省を踏まえて
● 最初に回数を決める
● ダラダラ続くと学習意欲が萎えるので、
「全 10 回」と最初に宣言
● 内容も最初から公表
● 公式ウェブを作り、各回の内容を明記
● 予習内容も指示
●
堅苦しい「勉強」の場にはしない
● お茶菓子を用意し、つまみながら進める
(まっちゃメソッド)

10. (実際に使ったページ)

11. 各回の内容 (#1～#2)
● #1
HTML とは何か / HTML の歴史 / ヘッダ部
の書式 / 基本的なタグ(h1～h6 p blockquote
ul ol dl)
●
#2
その他のタグ(div span em strong ほか) /
font タグにさようなら / 物理マークアップ
と論理マークアップ

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

13. このような文書を
HTML で書いて
もらい、
論理マークアップ
とは何かを学んで
もらった。
箇条書き
引用
大見出し
小見出し

14. 各回の内容 (#3～#4)
● #3
文書構成とデザインの分離 / 簡単なスタイ
ル / スタイルの指定方法 / CSS の「C」はど
んな意味?
●
#4
CSS とフォント / ボックスモデルを理解す
る / ブロックレベル要素とインライン要素 /
マージンとパディング

15. 各回の内容 (#5～#7)
● #5
スタイルの指定とセレクタ / ボーダー / 背
景
● #6
テーブル関連のスタイル / 要素の回り込み /
擬似クラス
● #7
フロートを深く知る / フロートによる段組
(固定幅) / フロートによる段組(可変幅)

16. 各回の内容 (#8～#10)
● #8
CSS によるメニューボタンの実装 / display
プロパティ / min-width と IE6
● #9
CSS ロールオーバー / 属性セレクタ / 擬似
クラスふたたび / IE6 で見てみると
● #10
XHTML ってなんだろう / こまったさんの
IE6 / 次のステージを目指して / ウェブ制作
のヒント
IE6 との
闘いの時代

17. 全 10 回を終えて
● 全講座出席者は 2 名(新人含む)
●
積極的に学ぼうという意欲のあるグループ
(前述の全出席者)と「気が向かないが先輩
社員が講師なので出ておくか」という義務感
ミエミエのグループの二極分化
● 来てほしかった層は最初から来ない

18. やってよかった
● 新人が会社に馴染めた
●
私の評価がちょっとだけ上がった
●
東京事務所でも同じ内容の講座が開催された
(2 年目社員が持ち回りで講師役)
●
勉強会の時間を残業申請するようにと
東京の部長職社員からお達しが出た
● プログラマーに理解のある管理職
● 管理職の中では浮いているとの噂

19. やっぱり変わらないことも
● 相変わらず CSS のコピペコーディング
●
切羽詰まるとすぐ <font> 要素に逃げる
●
要素技術の勉強は大事だね、という社風には
そう簡単にはならない
●
勉強しない人は何をやっても変わらない

20. 次の野望
● 「PHP オンライン勉強会」の開催
● 「私が勝手にテキストを公開するので、
勉強したい奴は勝手に勉強してくれ」という
スタイル
● 今は他社常駐組が多数派なので、集まって
何かを勉強するのは難しい

21. 「はじめに」の文章 (予定稿)
本講座「PHP オンライン勉強会」は、PHP を学ぶための講座ではあ
りません。PHP の学習を通じて、次に挙げるようなモダンなプログラ
ミング手法やプログラミングの常識、作法などを身につけることが目
的の講座です。
•
IDE (統合開発環境)とデバッガーの使い方
•
オブジェクト指向の考え方
•
変数名、関数名、クラス名の重要性
• データベース設計の基本
•
ユニットテスト
プロジェクトで PHP を使う予定のない人にも有意義な講座となるこ
とを保証します。
喧嘩を
売る気
マンマン!