introduction to creating websites
TRANSCRIPT
<p>Intro to Creating Websites</p>
ウェブサイトを作成について入門
Brighter IT Career for Women
なぜ？
インターネットを愛してる成長のリミットがない無料自由猫の動画
me
cra
zyfocused
cool
Justinのなぜ
私は仕事を持つ女性、特にお母さん方を助けるために、日本でマミーケア株式会社を始めました。なぜ?
仕事と家庭を両立する女性の持つ問題というのは、私が持っているものよりもかなり大きいものです
今こそ、男と女が協力し、より良い社会を作るときなのです！
head
body
html
meta
p コンテンツ黒い画面は怖いではない！
Facebookのを開いてください
“Do you have facebook?”
Chrome DevToolsの要素の検証
Step 1
右クリック(right click)
Step 2
要素の検証(inspect element)
Chrome DevToolsの要素の検証
Step 1
右クリック(right click)
Step 2
要素の検証(inspect element)
HTML CSS
(1)“pagelet_bluebar”を見つけてください
(2)<div></div>とは?
(BONUS)“_5lus"を動く
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 (スタイル)
Atom - HTML
Step 1: Save As
“index.html”
Step 2: Type
“html5”
Step 3: 「tab」
Atom - CSS
Step 1: File New
File
Step 2: Save As
“style.css”
Step 3: Type body
{ color: red; }
Save both files
(1) Hello, World!
(2) Hello, World! (in red)
(BONUS) http://getbootstrap.com/examples/theme/
Bootstrap Hello, World
(1)
(2)
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>
クロスブラウザ？CSSバグ
めんどくさい
Chrome60%
Internet Explorer
10%
Firefox24%
4%
2%
Chrome Internet Explorer Firefox Safari Opera
2014/09 Data: http://www.w3schools.com/browsers/browsers_chrome.asp
クロスプラットフォーム？
http://gs.statcounter.com/press/mobile-internet-usage-soars-by-67-perc
解決はBootstrapです
Boostrap CDN (Content Delivery
Network)http://www.bootstrapcdn.com/
• Easy
• Website loads faster (globally)
• Requires internet connection
Bootstrap CSSリファレンス
http://getbootstrap.com/css/#type
本家サイトのドキュメントです。CSSの各要素に関しての説明が載っており、一番見るところだと思います。
以外にはScaffoldingにRWDやレイアウトグリッドの説明、Componentsにコンポーネントの説明があり、サンプルもありコピペで簡単に作成できます。
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
ツール
http://bootswatch.com/
BootStrap用のカスタマイズCSS
を配布しています。
http://stylebootstrap.info/
BootStrap用のカスタマイズCSSを作成しています。
https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme
jQuery Mobileのテンプレートを提供しています。
https://jetstrap.com/
テンプレートをドラックアンドドロップで作成するＷＥＢサービスです。
Last Challenge:
(1) Make a cool page
(BONUS) Add photos,
and a cat video.
clue: CSS3 background