introduction to creating websites
TRANSCRIPT
![Page 1: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/1.jpg)
<p>Intro to Creating Websites</p>
ウェブサイトを作成について入門
Brighter IT Career for Women
![Page 2: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/2.jpg)
なぜ?
インターネットを愛してる成長のリミットがない無料自由猫の動画
me
cra
zyfocused
cool
![Page 3: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/3.jpg)
Justinのなぜ
私は仕事を持つ女性、特にお母さん方を助けるために、日本でマミーケア株式会社を始めました。なぜ?
仕事と家庭を両立する女性の持つ問題というのは、私が持っているものよりもかなり大きいものです
今こそ、男と女が協力し、より良い社会を作るときなのです!
![Page 4: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/4.jpg)
head
body
html
meta
p コンテンツ黒い画面は怖いではない!
![Page 5: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/5.jpg)
Facebookのを開いてください
“Do you have facebook?”
![Page 6: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/6.jpg)
Chrome DevToolsの要素の検証
Step 1
右クリック(right click)
Step 2
要素の検証(inspect element)
![Page 7: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/7.jpg)
Chrome DevToolsの要素の検証
Step 1
右クリック(right click)
Step 2
要素の検証(inspect element)
HTML CSS
![Page 8: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/8.jpg)
(1)“pagelet_bluebar”を見つけてください
(2)<div></div>とは?
(BONUS)“_5lus"を動く
![Page 9: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/9.jpg)
CSSはスタイルです
head
body
html
meta
pコンテンツ
div =
diva
body { color: red; }
p { font-size: 4.0em; }
div { border-color: green; }
a {
font: "Times New Roman”;
color: blue;
padding-left: 10px;
}
CSS (スタイル)
![Page 10: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/10.jpg)
![Page 12: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/12.jpg)
Atom - HTML
Step 1: Save As
“index.html”
Step 2: Type
“html5”
Step 3: 「tab」
![Page 13: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/13.jpg)
Atom - CSS
Step 1: File New
File
Step 2: Save As
“style.css”
Step 3: Type body
{ color: red; }
Save both files
![Page 14: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/14.jpg)
(1) Hello, World!
(2) Hello, World! (in red)
(BONUS) http://getbootstrap.com/examples/theme/
Bootstrap Hello, World
(1)
(2)
![Page 15: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/15.jpg)
Important!!
Error Seen in Chrome DevTools “Network”
Tab
Tell HTML where to find .css file
<link rel=“stylesheet” href=“ ”>
Tell HTML where to find .js file
<script src=“ ”></script>
![Page 16: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/16.jpg)
クロスブラウザ?CSSバグ
めんどくさい
![Page 17: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/17.jpg)
Chrome60%
Internet Explorer
10%
Firefox24%
4%
2%
Chrome Internet Explorer Firefox Safari Opera
2014/09 Data: http://www.w3schools.com/browsers/browsers_chrome.asp
![Page 18: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/18.jpg)
クロスプラットフォーム?
http://gs.statcounter.com/press/mobile-internet-usage-soars-by-67-perc
![Page 19: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/19.jpg)
解決はBootstrapです
![Page 21: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/21.jpg)
Boostrap CDN (Content Delivery
Network)http://www.bootstrapcdn.com/
• Easy
• Website loads faster (globally)
• Requires internet connection
![Page 22: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/22.jpg)
Bootstrap CSSリファレンス
http://getbootstrap.com/css/#type
本家サイトのドキュメントです。CSSの各要素に関しての説明が載っており、一番見るところだと思います。
以外にはScaffoldingにRWDやレイアウトグリッドの説明、Componentsにコンポーネントの説明があり、サンプルもありコピペで簡単に作成できます。
![Page 23: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/23.jpg)
BootstrapスターターテンプレートExample templates in English (right
click, “View Source”, copy-paste)
http://getbootstrap.com/getting-
started/#examples
日本語のサンプルテンプレート配布サイトです。
http://php-
fan.org/sample_code_demo/bootstra
p.html
![Page 25: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/25.jpg)
ツール
http://bootswatch.com/
BootStrap用のカスタマイズCSS
を配布しています。
http://stylebootstrap.info/
BootStrap用のカスタマイズCSSを作成しています。
https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme
jQuery Mobileのテンプレートを提供しています。
https://jetstrap.com/
テンプレートをドラックアンドドロップで作成するWEBサービスです。
![Page 26: Introduction to Creating Websites](https://reader033.vdocuments.pub/reader033/viewer/2022060204/55a05d891a28ab372e8b4584/html5/thumbnails/26.jpg)
Last Challenge:
(1) Make a cool page
(BONUS) Add photos,
and a cat video.
clue: CSS3 background