More Related Content
Similar to Web development fundamental_v2 (20)
Web development fundamental_v2
- 2. About Me
• 熊谷卓也(@taukuma)
• 宮城県出身
• 工業高校を卒業して直ぐに4年間アメリカへ留学
• バイクの免許を取って2週間後に日本一周の旅に出る
• 2011年、コニカミノルタに入社
• Web屋(業務は生産現場で使うWebシステムの提案・開発・導入等)
• バイク2台(ハーレーXL1200L白とエストレヤ白)
• ねこ5匹
2
- 3. • HTMLの役割
Webページを作るための言語 (文章の構造や意味)
• CSSの役割
Webページを作るための言語 (見た目)
• JavaScriptの役割
ブラウザで表示しているものを動的にイジくったりするための言語
• PHPの役割
動的にWebページを表示するための言語(サーバー上で動く)
• Ajaxの役割
動的にページの一部を変更する枠組み
この資料でカバーする項目
3
- 4. アジェンダ
Session 1
• Webページをデザインする ( HTML , CSS )
Session 2
• Webページを操作する ( JavaScript , jQuery )
Session 3
• 動的にWebページを表示する ( PHP )
Session 4
• ダイナミックにページの一部を変更する ( Ajax )
4
- 9. HTML
• 学習に役立つサイト
• HTMLクイックリファレンス (www.htmq.com/)
• W3C School - HTMLTutorials (http://www.w3schools.com/html/)
• 文法チェックサービス (Validation)
• W3C MarkupValidation Service (http://validator.w3.org/)
9
- 35. 覚えておくと便利なプロパティ
• margin
• padding
• display
• position
• float
• clear
• height
• width
• background
• border
• outline
• color
• font-family
• font-size
• font-weight
• content
• text-align
• vertical-align
• overflow
35
- 73. 覚えておくと便利なAPI
• addClass()
• removeClass()
• animate()
• attr()
• css()
• width()
• height()
• eq()
• bind()
• click()
• toggle()
• dblclick()
• hover()
• hide()
• show()
• append()
• remove()
• empty()
• text()
• val()
• html()
• parent()
• parents()
• children()
• keydown()
• keypress()
• keyup()
• is()
• on()
• off()
• length
73
- 77. PHPとは?
• Hypertext Preprocessor
• 動的にWebページを作る、サーバー側で動作するプロ
グラム
• 開発に必要なもの
• サーバー (Apache HTTP Server v2.2+)
• PHP (PHP v5.3+)
• ブラウザ (Google Chrome)
• テキストエディタ
77
- 78. PHP
• 入手先
• http://www.php.net のDownloadから
• 公式サイト
• http://www.php.net
• 学習に役立つサイト
• http://www.php.net/manual/ja/index.php (公式ドキュメント)
• http://www.php.net/ja/introduction.php (公式チュートリアル)
78
- 106. Ajaxとは?
• Asynchronous JavaScript + XMLの略
• クライアントとサーバーを非同期通信で接続し、
ダイナミックにページの一部を書き換える
• 開発に必要なもの
• サーバー (Apache HTTP Server v2.2+)
• PHP (PHP v5.3+)
• ブラウザ (Google Chrome)
• テキストエディタ
106