ripps bootcamp 02
TRANSCRIPT
Ripps BootCamp02. HTML, CSSでデザインを作ろう
Agenda
• Webって？
• Webサイトの作り方
• HTMLを書いてみよう
• CSSを書いてみよう
Webって？
どうやってできてるの？
例えばTwitterの中身
大丈夫、書けるようになる
Webサイトの作り方
文章を書く スタイルを決める
HTMLとは？
• Hyper Text Markup Langageの略
• Webページに文章を書くための言語
• アプリ制作の基礎中の基礎
CSSとは？
• Cascading Style Sheets の略
• Webページの見た目を決めるための言語
• HTMLとセットで覚えよう
準備しよう• 次から実際にコードを書いていきます。
• デスクトップを開いてください。
• 「RBC02」というディレクトリを作ってください。
• 今日はこのディレクトリで作業します。
HTMLを書いてみよう
HTMLファイルを作ろう RBC02 >> index.html
とりあえず書いてみよう
<!DOCTYPE html><html><head> <meta charset=“utf-8”> <title>ウェブサイト</title></head><body> <h1>こんにちは！</h1> <p>私のウェブサイトへようこそ！</p></body></html>
<tag>基本はこれ</tag>
基本的なタグ v1
• <!DOCTYPE html>
• <html></html>
• <head></head>
• <body></body>
基本的なタグ v2
• <h1>見出しタグ</h1>
• <p>文章を入れるタグ</p>
• <div>箱のようなタグ</div>
他にも約100種類のタグがあります!!
CSSを書いてみよう
CSSファイルを作ろう RBC02 >> app.css
とりあえず書いてみよう
body { background-color: grey;}
h1 { color: red;}
p { color: blue;}
基本的な文法
このタグの { 何を: どうする;}
見出しタグの { 色を: 赤に}
h1 { color: red;}
HTMLにCSSを読み込ませよう
<!DOCTYPE html><html><head> <meta charset=“utf-8”> <title>ウェブサイト</title> <link rel=“stylesheet” href=“app.css”> <!— この行を追加 —></head><body> <h1>こんにちは！</h1> <p>私のウェブサイトへようこそ！</p></body></html>
まとめ
• WebサイトはHTMLとCSSで作れる
• HTMLは<tag></tag>の形式で書いていく
• CSSは「どのタグの,何を,どうする」の形式で書いていく