Submit Search
Upload
Web勉強会(HTML+CSS+JS入門の入門)
•
18 likes
•
9,072 views
Noriaki UCHIYAMA
Follow
2012/11/16 Web勉強会(HTML+CSS+JS入門の入門)
Read less
Read more
Technology
Report
Share
Report
Share
1 of 25
Download now
Download to read offline
Recommended
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-
Yossy Taka
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1
Karino Kyohei
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
Recommended
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-
Yossy Taka
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1
Karino Kyohei
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
Hidetaka Okamoto
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Takahiro Nakahata
Webの仕組みとプログラミング言語
Webの仕組みとプログラミング言語
Yossy Taka
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Mori Kazue
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
Kitani Kimiya
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
yoshikawa_t
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
Mignon Style
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
WordBench 東京 とは
WordBench 東京 とは
Mignon Style
WordCamp Tokyo2012 handson Portfolio
WordCamp Tokyo2012 handson Portfolio
regret raym
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
Hidekazu Ishikawa
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
Go Imai
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
Saeki Tominaga
メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門
Atsushi Tadokoro
More Related Content
What's hot
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
Hidetaka Okamoto
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Takahiro Nakahata
Webの仕組みとプログラミング言語
Webの仕組みとプログラミング言語
Yossy Taka
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Mori Kazue
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
Kitani Kimiya
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
yoshikawa_t
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
Mignon Style
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
WordBench 東京 とは
WordBench 東京 とは
Mignon Style
WordCamp Tokyo2012 handson Portfolio
WordCamp Tokyo2012 handson Portfolio
regret raym
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
Hidekazu Ishikawa
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
Go Imai
What's hot
(20)
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Webの仕組みとプログラミング言語
Webの仕組みとプログラミング言語
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
WordPressってブログじゃないの?
WordPressってブログじゃないの?
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
WordBench 東京 とは
WordBench 東京 とは
WordCamp Tokyo2012 handson Portfolio
WordCamp Tokyo2012 handson Portfolio
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
Viewers also liked
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
Saeki Tominaga
メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門
Atsushi Tadokoro
最速HTML勉強会
最速HTML勉強会
Chisa Youzaka
情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門
Atsushi Tadokoro
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
Htmlのコトバ
Htmlのコトバ
Masakazu Muraoka
HTML
HTML
Jun Chiba
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Yusuke Hirao
2016年12月冥炎強化月間
2016年12月冥炎強化月間
paul01647
芸術情報演習デザイン(web) 第2回:HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門
Atsushi Tadokoro
Drupal 8 へのスタンドアロン behat の導入
Drupal 8 へのスタンドアロン behat の導入
tom_konda
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
三角ポップ大作戦!!(京大CARP)
三角ポップ大作戦!!(京大CARP)
pj_wcj
持続可能な里山とは?~里山保全の同時代史と里山ガバナンスの今後
持続可能な里山とは?~里山保全の同時代史と里山ガバナンスの今後
marrmur
PtengienのヒートマップとOptimizelyとの連携
PtengienのヒートマップとOptimizelyとの連携
Ptmind_jp
短期間+大規模ゲーム開発でも破綻しないHTML・SCSS
短期間+大規模ゲーム開発でも破綻しないHTML・SCSS
Shogo Iwano
HTMLデザインを崩さないテンプレートエンジンの作り方
HTMLデザインを崩さないテンプレートエンジンの作り方
kwatch
Ptengineの使い方
Ptengineの使い方
Ptmind_jp
D D Mapで守り隊!伊都はいいとこPJ(九大CARP)
D D Mapで守り隊!伊都はいいとこPJ(九大CARP)
pj_wcj
まちづくり門前
まちづくり門前
Takahiro Inoue
Viewers also liked
(20)
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門
最速HTML勉強会
最速HTML勉強会
情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Htmlのコトバ
Htmlのコトバ
HTML
HTML
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
2016年12月冥炎強化月間
2016年12月冥炎強化月間
芸術情報演習デザイン(web) 第2回:HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門
Drupal 8 へのスタンドアロン behat の導入
Drupal 8 へのスタンドアロン behat の導入
マークアップ講座 01b HTML
マークアップ講座 01b HTML
三角ポップ大作戦!!(京大CARP)
三角ポップ大作戦!!(京大CARP)
持続可能な里山とは?~里山保全の同時代史と里山ガバナンスの今後
持続可能な里山とは?~里山保全の同時代史と里山ガバナンスの今後
PtengienのヒートマップとOptimizelyとの連携
PtengienのヒートマップとOptimizelyとの連携
短期間+大規模ゲーム開発でも破綻しないHTML・SCSS
短期間+大規模ゲーム開発でも破綻しないHTML・SCSS
HTMLデザインを崩さないテンプレートエンジンの作り方
HTMLデザインを崩さないテンプレートエンジンの作り方
Ptengineの使い方
Ptengineの使い方
D D Mapで守り隊!伊都はいいとこPJ(九大CARP)
D D Mapで守り隊!伊都はいいとこPJ(九大CARP)
まちづくり門前
まちづくり門前
Similar to Web勉強会(HTML+CSS+JS入門の入門)
東京では語れないHTML5[仮題]
東京では語れないHTML5[仮題]
Yu Morita
2012: A Web Odyssey
2012: A Web Odyssey
Fuminori Mori
ドメイン駆動設計を実践するプログラマーの悩み
ドメイン駆動設計を実践するプログラマーの悩み
haljik Seiji
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
Fuminori Mori
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Masakazu Muraoka
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]
Koichiro Matsuoka
CodeIgniterでXMLを処理してみる
CodeIgniterでXMLを処理してみる
智之 大野
html5とcss3実例紹介とデモ
html5とcss3実例紹介とデモ
Akihiro Sugiyama
JavaScript 研修
JavaScript 研修
Yuki Ishikawa
HTML5とCSS3でWebが変わる!でも導入は簡単!
HTML5とCSS3でWebが変わる!でも導入は簡単!
Toshihito Gamo
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
Masakazu Muraoka
うちの開発におけるXD利用法
うちの開発におけるXD利用法
Kazuma Sekiguchi
ソーシャルゲーム開発における運用とそのツール
ソーシャルゲーム開発における運用とそのツール
Yoshiaki Sugimoto
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
xyz corporation
iPhone/Android アプリをまとめて省エネ開発する技術
iPhone/Android アプリをまとめて省エネ開発する技術
vaccho
俺たちの自分戦略 - namikawa (DevLOVE Conference 2012)
俺たちの自分戦略 - namikawa (DevLOVE Conference 2012)
Yuuki Namikawa
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
Shuhei Iitsuka
ソニーでElectronアプリをリリースしてみた
ソニーでElectronアプリをリリースしてみた
Yasuharu Seki
World Plone Day 2012 Tokyo about my-handai
World Plone Day 2012 Tokyo about my-handai
Manabu Terada
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
Naoki Kanazawa
Similar to Web勉強会(HTML+CSS+JS入門の入門)
(20)
東京では語れないHTML5[仮題]
東京では語れないHTML5[仮題]
2012: A Web Odyssey
2012: A Web Odyssey
ドメイン駆動設計を実践するプログラマーの悩み
ドメイン駆動設計を実践するプログラマーの悩み
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]
CodeIgniterでXMLを処理してみる
CodeIgniterでXMLを処理してみる
html5とcss3実例紹介とデモ
html5とcss3実例紹介とデモ
JavaScript 研修
JavaScript 研修
HTML5とCSS3でWebが変わる!でも導入は簡単!
HTML5とCSS3でWebが変わる!でも導入は簡単!
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
うちの開発におけるXD利用法
うちの開発におけるXD利用法
ソーシャルゲーム開発における運用とそのツール
ソーシャルゲーム開発における運用とそのツール
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
iPhone/Android アプリをまとめて省エネ開発する技術
iPhone/Android アプリをまとめて省エネ開発する技術
俺たちの自分戦略 - namikawa (DevLOVE Conference 2012)
俺たちの自分戦略 - namikawa (DevLOVE Conference 2012)
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
ソニーでElectronアプリをリリースしてみた
ソニーでElectronアプリをリリースしてみた
World Plone Day 2012 Tokyo about my-handai
World Plone Day 2012 Tokyo about my-handai
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
Recently uploaded
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Recently uploaded
(8)
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Web勉強会(HTML+CSS+JS入門の入門)
1.
Web勉強会(HTML+CSS+JS入門の入門)
- どうやって学び、何に役立つのか - 内山 紀明 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 1
2.
自己紹介
• 内山 紀明(うちやま のりあき) – 株式会社リクルートホールディングス – 株式会社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
3.
今日のお題
• HTML+CSS+JSでどんなことができるのか • これらを取り巻くキャリアにはどんなものがあるのか • 習うより慣れろ。実際に作ってみる「世界のナベアツ」 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 3
4.
HTML+CSS+JSで
どんなことができるのか 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 4
5.
HTMLって?
タグとかでなんか書くと ホームページができるんでしょ 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 5
6.
CSSって?
スタイルシートって言うんでしょ。 なんかデザインで使うらしいよ 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 6
7.
Javascriptって?
こう画面がぐいーんって動いたり アニメーションしたりするんでしょ 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 7
8.
だいたいあってる 2012/11/16
Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 8
9.
HTML+CSS+JSでできること
• UI(サイト、ブログ、キャンペーンページ) Gmail 演奏できるロゴ http://jsfiddle.net/noriaki/eT9k7/show/ 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 9
10.
HTML+CSS+JSでできること
• メール 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 10
11.
HTML+CSS+JSでできること
• スマホアプリ、ゲーム R25アプリ Game by Unity PhoneGap(Cordova) 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 11
12.
[まとめ] HTML+CSS+JSでどんなことができるのか
• 原則 – HTML • Webページやアプリの文書構造を規定する言語 – CSS • Webページやアプリの見た目を規定する言語 – Javascript • ロジックや機能、動的な演出を記述する言語 あくまでも手段なのでこれらを使って何をするのかが大切 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 12
13.
取り巻くキャリアには
どんなものがあるのか 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 13
14.
デザイナー・・・HTML, CSS
• デザインの絵をつくる人。 • たくさんいるから競争激しい。 • HTMLも分かっててあたりまえ。 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 14
15.
コーダー・・・HTML, CSS, JS
• デザイナーの絵をHTMLに変換する人。 • デザイナーを兼ねてることもある。 • 競争激しい。 • SEOに有利なHTMLや動きのあるページを作 れる人もいる。 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 15
16.
プログラマ、エンジニア・・・HTML, JS
• ページの仕組み、ロジックをつくる人。 • JSを中心に扱い、アプリやゲームなどをつくる ことが多い。 • 決められた仕様に従ってつくれる人はたくさ んいる • 設計やHTMLコーディングができる人もいる 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 16
17.
ディレクター・・・ぜんぶ
• プロジェクトの進行・管理をする人。 • デザイナー、コーダー、プログラマを兼ねてい ることもある。 • スケジュールやコスト、プロダクトの品質まで 管理できる 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 17
18.
プロデューサー・・・ぜんぶ+ビジネス
• ディレクターに加えて、ビジネス企画やマネタ イズ方法まで考える • ときには営業を兼ねていることもある。 • 企画やプロジェクトと中長期計画やビジネス 戦略を描けるとなお良い 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 18
19.
[まとめ] 取り巻くキャリアにはどんなものがあるのか
• スキルとしてのHTML,CSS,JS • 単一知識や技術をもっていることそのものに は、そんなに市場価値があるわけじゃない • 複数を組み合わせられること、組み合わせて 実現できるものに価値がある 知識や技術を知っていると判断・決定が早くなる あくまでも手段なのでこれらを使って何ができるのかが大切 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 19
20.
習うより慣れろ。
実際に作ってみる「世界のナベアツ」 演習 http://jsdo.it/noriaki/mxGb 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 20
21.
これから先もっと知りたいときは 2012/11/16
Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 21
22.
入門の次
• できるだけ新しい情報にふれる。 – 本を買うにしても発行が新しいもの – Webページでも更新日が新しいもの • 本は読むだけじゃダメ。 – サンプルコードを丸写し(写経)する • 写経できる素材がある無料サイトもあるよ。 – ドットインストール • 3分動画で学ぶ初心者向けプログラミング学習サイト • http://dotinstall.com/ – HTMLの基礎、CSSの基礎、Javascriptの基礎 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 22
23.
中級 とにかくパクってみる
• 自分で「良い」「真似したい」と思うサイトを分解してみる – HTMLはどのように書かれているか • 見た目とタグの関係を理解できる – CSSの構造を分解してみる • どのHTMLタグに、どんな順番で、どんなスタイルが適用されているか 理解できる – Javascriptの動作を追いかけてみる • ページ読み込み時に動いてるコード、ボタンを押したときに動いてる コード、ドラッグ&ドロップしたときに動いてるコードを分類できる • それらのコードがどんな動作をしているか理解できる もちろん読むだけじゃダメ。 コードを丸写し(写経)する ※部分だけ表示しても良い 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 23
24.
上級・応用 キーワードから自分で調べてみる
• 自分の興味がある分野のキーワードを調べて、 中級のことをやってみる – さらに、できればその勉強の過程やそこで分かったこ とを公開してみる ※写経したページそのものは公開したらダメ。著作権 • キーワード例 – jQuery – レスポンシブWeb – HTML5(Canvas, LocalStorage, Geolocation) – CSS3(Gradient, Radius) – Twitter bootstrap 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 24
25.
まとめ
• HTML, CSS, JSはWebサイトやサービスを構成するための技術 – どんなことを実現できるのかをいくつか見た • ホットな分野なのでスキルを持った人は多い – 競争が激しいが突出したスキルや複合的なスキルを持っていると強い • 知識・技術を持っていて、かつ、やりたいこと・実現したいことを考え られると非常に価値が高い – 知識・技術があると判断・意思決定スピードがあがる • HTML, CSS, JSの世界は広い。ずっと勉強。だから、とにかく手を動か すことが学びにつながる。 • 今日学んだ入門コードを拡張してみる。とにかくパクってみる。自分 の知ったことを公開してみる。 2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 25
Download now