はっきりいって私は同業には厳しいのでこういう初心者というのは相手しない、そんな暇じゃないってことに決めていた、つーか「おめーがHTML/CSS〜ぷぷぷ」というレベルなのである。
んだが、あれよあれよと「とりあえずUnityで自称クソゲイを作ったことがある」という子に鼻の下を伸ばしながらHTML/CSS + JavaScriptを教えることになった。しかもWindowsで。しかも高校生。
前職のときは専門学生や実業大学生のインターンシップというのは結構相手したんだけれど、高校生、しかも実業高校生じゃないというのはさすがにはじめての経験。
得た知見をもったいないので記録しておく。
使ったツール
高校生の使っているのはMicrosoft SurfaceだったのでWindowsで使えるものを用意した。そして講義は片手で数えられる日数程度しかないので「ツールに振り回されることがなく」「導入の手間がかからないもの」にした。
- LINE（PC版）
- GitHub
- Windows版公式クライアント
- gh-pages
- Visual Studio Code
- Chrome
- Web Server for Chromeプラグイン
ツール導入でハマったこと
Visual Studio Code
前日に案内してインストールしてきてもらってきたつもりがVisual Studio (not Code)の体験版が入っていた。惜しい。初めての子がナビゲートされるがままにVisual Studioのほうにいったとしたらこれはサイトのせいというべきだろうがハマるかも。
GitHub Widows版公式クライアントツール
おそらくMacOS版もだと思うがあの独特の「Sync」とかといったものがなくなってて私の知ってたころのとだいぶ違ってた！
WindowsとMacOSでのホットキーの違い
違うんだなあ…
Windows版Chromeのメニューバーが出ない！？
これでないの？しょうがないからファイルを開くときは Ctrl + O を教えざるをえなかった。
やらせたこと
やらせたこと is 「ツールの使い方なんで深く考えずに手順通りボタン押してくれ」
- GitHubクライアントでclone
- gh-pagesの設定
- GitHubクライアントでpushするとgh-pagesの機能で世界に公開できる
- こうすれば自分のスマホでも見られる
- Web Server for Chrome プラグインでのブラウザでのプレビューのやりかた
教えたこと & びびったこと
- どうしてあなたのスマホでYoutubeに保存されている動画が見られるのか
- ウェブページは何からできているのか
- ウェブページはどうやってスマホにやってくるのか
- ウェブブラウザ(Chrome)とHTTPサーバの関係
- IPを経由してるのか、ファイルシステムなのか、の違いを超ざっくり
- Visual Studio Code で書いてウェブブラウザでリロードして確認する基本的やりかた
- 「文章構造」と「見た目」の分離がなされているということ
- h1要素の色を変えてみる、背景色を変えてみるまで
- XML・DOMの基本的な書式
- ID指定したオブジェクトをクリックすると、別IDで指定したノードの文字を変更できるところまで
- IDとセレクタについて
- Chrome デベロッパーツールでエラーの確認方法(コンソールログの読み方)
- 「エスケープキー」という言葉がそもそも通じない
- 「リロード」という言葉がそもそも通じない
参考にした、LINEで送った情報
- Web Server for Chrome - Chrome ウェブストア
- HTML5のhead内の記述 - Qiita
- HTMLクイックリファレンス
- idセレクタ－スタイルシートリファレンス
- .onの使い方(jQuery3) - Qiita
- (4) いしかわのもてなし食材 - YouTube