Web勉強会（HTML+CSS+JS入門の入門）

Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved.

Web勉強会（HTML+CSS+JS入門の入門） - どうやって学び、何に役立つのか -

内山紀明

2012/11/16 1


• 内山紀明（うちやまのりあき）

– 株式会社リクルートホールディングス

– 株式会社Media Shakers

• 普段『R25』のデジタル企画（主にアプリ）やってます

• R25（アールニジュウゴ）

– web R25 http://r25.yahoo.co.jp/

– R25 for Smartphone http://r25rd.jp/spapp

• 趣味でプログラミングもしています

– Heroku + Rails + jQuery

• http://guevara.27th.celebration-day.com/

• http://shusei.27th.celebration-day.com/

自己紹介

2012/11/16 2

@noriaki

noriaki.uchiyama

http://r25.yahoo.co.jp/

http://r25rd.jp/spapp

http://guevara.27th.celebration-day.com/



http://shusei.27th.celebration-day.com/



http://twitter.com/noriaki

http://twitter.com/noriaki

https://twitter.com/noriaki

http://www.facebook.com/noriaki.uchiyama

http://www.facebook.com/noriaki.uchiyama


今日のお題

• HTML+CSS+JSでどんなことができるのか

• これらを取り巻くキャリアにはどんなものがあるのか

• 習うより慣れろ。実際に作ってみる「世界のナベアツ」

2012/11/16 3


HTML+CSS+JSで

どんなことができるのか

2012/11/16 4


HTMLって？

2012/11/16 5

タグとかでなんか書くと

ホームページができるんでしょ


CSSって？

2012/11/16 6

スタイルシートって言うんでしょ。

なんかデザインで使うらしいよ


Javascriptって？

2012/11/16 7

こう画面がぐいーんって動いたり

アニメーションしたりするんでしょ


だいたいあってる

2012/11/16 8


HTML+CSS+JSでできること

• UI（サイト、ブログ、キャンペーンページ）

2012/11/16 9

Gmail

演奏できるロゴ

http://jsfiddle.net/noriaki/eT9k7/show/

http://jsfiddle.net/noriaki/eT9k7/show/



• メール

2012/11/16 10



• スマホアプリ、ゲーム

2012/11/16 11

R25アプリ Game by Unity

PhoneGap(Cordova)


[まとめ] HTML+CSS+JSでどんなことができるのか

• 原則

– HTML

• Webページやアプリの文書構造を規定する言語

– CSS

• Webページやアプリの見た目を規定する言語

– Javascript

• ロジックや機能、動的な演出を記述する言語

2012/11/16 12

あくまでも手段なのでこれらを使って何をするのかが大切


取り巻くキャリアには

どんなものがあるのか

2012/11/16 13


デザイナー・・・HTML, CSS

• デザインの絵をつくる人。

• たくさんいるから競争激しい。

• HTMLも分かっててあたりまえ。

2012/11/16 14


コーダー・・・HTML, CSS, JS

• デザイナーの絵をHTMLに変換する人。

• デザイナーを兼ねてることもある。

• 競争激しい。

• SEOに有利なHTMLや動きのあるページを作れる人もいる。

2012/11/16 15


プログラマ、エンジニア・・・HTML, JS

• ページの仕組み、ロジックをつくる人。

• JSを中心に扱い、アプリやゲームなどをつくることが多い。

• 決められた仕様に従ってつくれる人はたくさんいる

• 設計やHTMLコーディングができる人もいる

2012/11/16 16


ディレクター・・・ぜんぶ

• プロジェクトの進行・管理をする人。

• デザイナー、コーダー、プログラマを兼ねていることもある。

• スケジュールやコスト、プロダクトの品質まで管理できる

2012/11/16 17


プロデューサー・・・ぜんぶ＋ビジネス

• ディレクターに加えて、ビジネス企画やマネタイズ方法まで考える

• ときには営業を兼ねていることもある。

• 企画やプロジェクトと中長期計画やビジネス戦略を描けるとなお良い

2012/11/16 18


[まとめ] 取り巻くキャリアにはどんなものがあるのか

• スキルとしてのHTML，CSS，JS

• 単一知識や技術をもっていることそのものには、そんなに市場価値があるわけじゃない

• 複数を組み合わせられること、組み合わせて実現できるものに価値がある

2012/11/16 19

知識や技術を知っていると判断・決定が早くなる

あくまでも手段なのでこれらを使って何ができるのかが大切


習うより慣れろ。

実際に作ってみる「世界のナベアツ」

2012/11/16 20

演習 http://jsdo.it/noriaki/mxGb

http://jsdo.it/noriaki/mxGb


これから先もっと知りたいときは

2012/11/16 21


入門の次

• できるだけ新しい情報にふれる。 – 本を買うにしても発行が新しいもの

– Webページでも更新日が新しいもの

• 本は読むだけじゃダメ。 – サンプルコードを丸写し（写経）する

• 写経できる素材がある無料サイトもあるよ。 – ドットインストール

• ３分動画で学ぶ初心者向けプログラミング学習サイト

• http://dotinstall.com/ – HTMLの基礎、CSSの基礎、Javascriptの基礎

2012/11/16 22

http://dotinstall.com/


中級とにかくパクってみる

• 自分で「良い」「真似したい」と思うサイトを分解してみる – HTMLはどのように書かれているか

• 見た目とタグの関係を理解できる

– CSSの構造を分解してみる • どのHTMLタグに、どんな順番で、どんなスタイルが適用されているか理解できる

– Javascriptの動作を追いかけてみる

• ページ読み込み時に動いてるコード、ボタンを押したときに動いてるコード、ドラッグ＆ドロップしたときに動いてるコードを分類できる

• それらのコードがどんな動作をしているか理解できる

2012/11/16 23

もちろん読むだけじゃダメ。

コードを丸写し（写経）する ※部分だけ表示しても良い


上級・応用キーワードから自分で調べてみる

• 自分の興味がある分野のキーワードを調べて、中級のことをやってみる

– さらに、できればその勉強の過程やそこで分かったことを公開してみる ※写経したページそのものは公開したらダメ。著作権

• キーワード例 – jQuery

– レスポンシブWeb

– HTML5（Canvas, LocalStorage, Geolocation)

– CSS3（Gradient, Radius） – Twitter bootstrap

2012/11/16 24


まとめ

• HTML, CSS, JSはWebサイトやサービスを構成するための技術

– どんなことを実現できるのかをいくつか見た

• ホットな分野なのでスキルを持った人は多い

– 競争が激しいが突出したスキルや複合的なスキルを持っていると強い

• 知識・技術を持っていて、かつ、やりたいこと・実現したいことを考えられると非常に価値が高い

– 知識・技術があると判断・意思決定スピードがあがる

• HTML, CSS, JSの世界は広い。ずっと勉強。だから、とにかく手を動かすことが学びにつながる。

• 今日学んだ入門コードを拡張してみる。とにかくパクってみる。自分の知ったことを公開してみる。

2012/11/16 25

Technology

Web勉強会（HTML+CSS+JS入門の入門）