Ripps BootCamp 02

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は「どのタグの,何を,どうする」の形式で書いていく

Ripps BootCamp 02

Technology