Movatterモバイル変換

自己紹介 • 内山紀明（うちやまのりあき） – 株式会社リクルートホールディングス – 株式会社Media Shakers • 普段『R25』のデジタル企画（主にアプリ）やってます • R25（アールニジュウゴ） – web R25 http://r25.yahoo.co.jp/ – R25 for Smartphone http://r25rd.jp/spapp @noriaki • 趣味でプログラミングもしています noriaki.uchiyama – Heroku + Rails + jQuery • http://guevara.27th.celebration-day.com/ • http://shusei.27th.celebration-day.com/2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 2

[まとめ] HTML+CSS+JSでどんなことができるのか • 原則 – HTML • Webページやアプリの文書構造を規定する言語 – CSS • Webページやアプリの見た目を規定する言語 – Javascript • ロジックや機能、動的な演出を記述する言語あくまでも手段なのでこれらを使って何をするのかが大切2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 12

[まとめ] 取り巻くキャリアにはどんなものがあるのか • スキルとしてのHTML，CSS，JS • 単一知識や技術をもっていることそのものには、そんなに市場価値があるわけじゃない • 複数を組み合わせられること、組み合わせて実現できるものに価値がある知識や技術を知っていると判断・決定が早くなるあくまでも手段なのでこれらを使って何ができるのかが大切2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 19

入門の次 • できるだけ新しい情報にふれる。 – 本を買うにしても発行が新しいもの – Webページでも更新日が新しいもの • 本は読むだけじゃダメ。 – サンプルコードを丸写し（写経）する • 写経できる素材がある無料サイトもあるよ。 – ドットインストール • ３分動画で学ぶ初心者向けプログラミング学習サイト • http://dotinstall.com/ – HTMLの基礎、CSSの基礎、Javascriptの基礎2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 22

中級とにかくパクってみる • 自分で「良い」「真似したい」と思うサイトを分解してみる – HTMLはどのように書かれているか • 見た目とタグの関係を理解できる – CSSの構造を分解してみる • どのHTMLタグに、どんな順番で、どんなスタイルが適用されているか理解できる – Javascriptの動作を追いかけてみる • ページ読み込み時に動いてるコード、ボタンを押したときに動いてるコード、ドラッグ＆ドロップしたときに動いてるコードを分類できる • それらのコードがどんな動作をしているか理解できるもちろん読むだけじゃダメ。コードを丸写し（写経）する ※部分だけ表示しても良い2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 23

上級・応用キーワードから自分で調べてみる • 自分の興味がある分野のキーワードを調べて、中級のことをやってみる – さらに、できればその勉強の過程やそこで分かったことを公開してみる ※写経したページそのものは公開したらダメ。著作権 • キーワード例 – jQuery – レスポンシブWeb – HTML5（Canvas, LocalStorage, Geolocation) – CSS3（Gradient, Radius） – Twitter bootstrap2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 24

まとめ • HTML, CSS, JSはWebサイトやサービスを構成するための技術 – どんなことを実現できるのかをいくつか見た • ホットな分野なのでスキルを持った人は多い – 競争が激しいが突出したスキルや複合的なスキルを持っていると強い • 知識・技術を持っていて、かつ、やりたいこと・実現したいことを考えられると非常に価値が高い – 知識・技術があると判断・意思決定スピードがあがる • HTML, CSS, JSの世界は広い。ずっと勉強。だから、とにかく手を動かすことが学びにつながる。 • 今日学んだ入門コードを拡張してみる。とにかくパクってみる。自分の知ったことを公開してみる。2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 25

Movatterモバイル変換

Change Language

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

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

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

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