SlideShare a Scribd company logo
1 of 37
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




                                                                     #01
N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




•        "
• HTML CSS   "
• CMS                       "
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




•                                    "
• HTML + CSS                                     "
                                      OK"
   
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




•                                                  "
      JavaScript   "
                                                                  "
• 
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




•                  "
•    "


• 
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




事前条件	
                              事後条件
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




•        "
•        "
             "
                     "
                 "
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




         D

•            "
• 
     "
• 
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




•            "
            "
                           "
•                              "
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




• http://goo.gl/D0k8l"
•                                                 "
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




• HTML CSS     "
• CMS                   "
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




Hyper Text Markup Language (HTML)
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




HTML


• 
       "
•                                                         "
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




<em>               HTML</em>
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




<em>               HTML</em>
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




<em>               HTML</em>
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




<em>               HTML</em>
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




<em>               HTML</em>
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




<a href=“http://www.sfc.keio.ac.jp/”>"
     SFC                                       "
                </a>
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




<a href=“http://www.sfc.keio.ac.jp/”>"
     SFC                                       "
                </a>
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




•        "
•    "
•                 "
•            "
•            "
•                 "
• 
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




1-1-1                                              "
        20                        "
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




Cascading Style Sheets (CSS)
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




CSS

•                                                        "
                                  "
                                       "
•        HTML                 

                                                  "
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




body{"
 font-family: “       ”, Meiryo, sans-serif;"
 font-size: 12pt;"
 color: #101010;"
 background-color: #fefefe;"
}"
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




body{"
 font-family: “       ”, Meiryo, sans-serif;"
 font-size: 12pt;"
 color: #101010;"
 background-color: #fefefe;"
}"
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




body{"
 font-family: “       ”, Meiryo, sans-serif;"
 font-size: 12pt;"
 color: #101010;"
 background-color: #fefefe;"
}"
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




      1-1-2                                      "
CSS                                          

N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




1-1-3                                     "
                                                "
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




WordPress
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




1-2
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22
N.Shimizu (chiko@sfc.keio.ac.jp / @chikoski)   2011/09/22




SFC-SFS

More Related Content

Similar to ronpro2011f01

Similar to ronpro2011f01 (9)

論理思考とプログラミング2011s#10
論理思考とプログラミング2011s#10論理思考とプログラミング2011s#10
論理思考とプログラミング2011s#10
 
論理思考とプログラミング2011s#09
論理思考とプログラミング2011s#09論理思考とプログラミング2011s#09
論理思考とプログラミング2011s#09
 
ronpro2011s#11
ronpro2011s#11ronpro2011s#11
ronpro2011s#11
 
メディア表現技法a2011 #05
メディア表現技法a2011 #05メディア表現技法a2011 #05
メディア表現技法a2011 #05
 
Shukutoku ipl 2011_12
Shukutoku ipl 2011_12Shukutoku ipl 2011_12
Shukutoku ipl 2011_12
 
メディア表現技法a2011#03
メディア表現技法a2011#03メディア表現技法a2011#03
メディア表現技法a2011#03
 
ronpro2011#12
ronpro2011#12ronpro2011#12
ronpro2011#12
 
Alloy20110922 01
Alloy20110922 01Alloy20110922 01
Alloy20110922 01
 
Alloy20110909
Alloy20110909Alloy20110909
Alloy20110909
 

More from Noritada Shimizu

More from Noritada Shimizu (20)

20160803 devrel
20160803 devrel20160803 devrel
20160803 devrel
 
20160713 webvr
20160713 webvr20160713 webvr
20160713 webvr
 
20160601 devtools
20160601 devtools20160601 devtools
20160601 devtools
 
20150512 webgl-off-the-main-thread
20150512 webgl-off-the-main-thread20150512 webgl-off-the-main-thread
20150512 webgl-off-the-main-thread
 
20160428 html5jwebplat
20160428 html5jwebplat20160428 html5jwebplat
20160428 html5jwebplat
 
asm.js x emscripten: The foundation of the next level Web games
asm.js x emscripten: The foundation of the next level Web gamesasm.js x emscripten: The foundation of the next level Web games
asm.js x emscripten: The foundation of the next level Web games
 
Mozilla とブラウザゲーム
Mozilla とブラウザゲームMozilla とブラウザゲーム
Mozilla とブラウザゲーム
 
2016 gunma.web games-and-asm.js
2016 gunma.web games-and-asm.js2016 gunma.web games-and-asm.js
2016 gunma.web games-and-asm.js
 
20151224-games
20151224-games20151224-games
20151224-games
 
20151128 firefoxos-handson
20151128 firefoxos-handson20151128 firefoxos-handson
20151128 firefoxos-handson
 
20151117 devtools
20151117 devtools20151117 devtools
20151117 devtools
 
Inspection & Tweak: Firefox を使ったフロント開発
Inspection & Tweak: Firefox を使ったフロント開発Inspection & Tweak: Firefox を使ったフロント開発
Inspection & Tweak: Firefox を使ったフロント開発
 
20150822 osc-shimane
20150822 osc-shimane20150822 osc-shimane
20150822 osc-shimane
 
20150829 firefox-os-handson
20150829 firefox-os-handson20150829 firefox-os-handson
20150829 firefox-os-handson
 
20150829 firefox-os
20150829 firefox-os20150829 firefox-os
20150829 firefox-os
 
20150727 Development tools for Firefox OS apps
20150727 Development tools for Firefox OS apps20150727 Development tools for Firefox OS apps
20150727 Development tools for Firefox OS apps
 
Firefox OS でアプリを作るときに気をつけたい N 個のこと
Firefox OS  でアプリを作るときに気をつけたい N 個のことFirefox OS  でアプリを作るときに気をつけたい N 個のこと
Firefox OS でアプリを作るときに気をつけたい N 個のこと
 
Firefox OSアプリ開発ハンズオン(Hello World編)
Firefox OSアプリ開発ハンズオン(Hello World編)Firefox OSアプリ開発ハンズオン(Hello World編)
Firefox OSアプリ開発ハンズオン(Hello World編)
 
WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)
WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)
WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)
 
Application submission, management and manetization in Firefox Marketplace
Application submission, management and manetization in Firefox MarketplaceApplication submission, management and manetization in Firefox Marketplace
Application submission, management and manetization in Firefox Marketplace
 

Recently uploaded

Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
FIDO Alliance
 

Recently uploaded (20)

Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxCyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 

ronpro2011f01