#メイクの例は分かりやすいかも濃くも薄くもできるし腕の良さも関係するし -(We)-+('ll learn)+ (first), then +(worry about)+ (in later courses). / まず HTMLを

Size: px

Start display at page:

Download "#メイクの例は分かりやすいかも濃くも薄くもできるし腕の良さも関係するし -(We)-+('ll learn)+ @(HTML)@ (first), then +(worry about)+ @(CSS)@ (in later courses). / まず HTMLを "

くうしょうわたぬき
7 years ago
Views:

1 HTML and CSS -(HTML)- +(stands Markup / HTMLとはハイパーテキストマークアップ言語 (HyperText Markup Language)の頭字をとった略語のこと -(Hypertext)- with links in / ハイパーテキスト(Hypertext)とはリンクするテキスト/ 単語 / 文章という意味 (Any time -~you~- +~click+~ ((on a [word] {that brings you to a new webpage} )) ), -(you)-+('ve clicked)+ (on hypertext)! / 新しいWebページへ導くような単語をクリックしたときまさにその時あなたはハイパーテキストをクリックしたことになるの #any time ( 接続詞 ) のときはいつでも -(A markup language)- +(is)+ =(a programming language used to make text do more than just sit on a page)=:#つまり it can turn text into images, links, tables, lists, and much more. / マークアップ言語 (markup language)とは例えばただ単に紙に書いてある字以上のことができるプログラミング言語つまり単なる文字だけではなく画像 (image)を使ったり新しいページへのリンク(link)を張ったり表 (table)やリスト(list)を作ったりそれだけにとどまらずもっといろんなことができる言語なのです -(HTML)- +(is)+ =(the markup language we'll be learning)=. / そうですこれから私たちが覚えようとしている HTML はまさにそんな言語なの -(What)- =(pretty)=? / じゃあ Webページ(webpage)をさらにクール/ビューティフル/プリティーになるようにするための言語は? That's CSS Cascading Style Sheets. / それは CSS(CSS/Cascading Style Sheets/カスケーディングスタイルシート) +(Think (like skin and makeup that covers the bones of HTML). / HTMLが骨格だとしたら CSSは肉付けをするそれを覆ってきれいにするメイクをするそんな感じ 1/6 ページ

/ 新しいWebページへ導くような単語をクリックしたときまさにその時あなたはハイパーテキストをクリックしたことになるの #any time ( 接続詞 ) のときはいつでも -(A markup language)- +(is)+ =(a programming language used to make text do more than just sit on a

2 #メイクの例は分かりやすいかも濃くも薄くもできるし腕の良さも関係するし -(We)-+('ll learn)+ (first), then +(worry about)+ (in later courses). / まず HTMLを勉強しますそれからCSSを学習していくことにしましょう -(The first thing we should do)- +(is)+ =((to)set up the skeleton of the page)=. / まず私たちのすべきことは Webページの骨組みを作ることだから #つまり CSSを知らなくても Webページはできます例としてこのページの親ページ確かにクールでもビューティフルでもありませんね残念 (2013/12/31) (a) (Always) html>)@ (on the first line). -(This)- browser)@ 関係形容詞 language~@ -~it~-+~'s reading~+ )@(in this case, HTML). / (a) 必ず 1 には <!DOCTYPE html> を書いてくださいこれはブラウザ君にあなたがこれから読むコードは HTMLですよと教えていることになるわけ (b) (Always) (on the next line). -(This)- HTML document)@. / (b) 次にはいつも <html> を書きますこれを書くことによってあなたが作りたいと思っているWebページのコードが書き始められるというわけ (c) (Always) (on the last line). -(This)- HTML document)@. / (c) そして HTML 文書の最後にはいつも </html> が来ますこれを書かないことにはコードを書き終わったことにはなりません (a) (c)をまとめると <!DOCTYPE html> <html> あなたが書くいろいろなコード </html> // 1 // 2 // 最後の 2/6 ページ

/ まず私たちのすべきことは Webページの骨組みを作ることだから #つまり CSSを知らなくても Webページはできます例としてこのページの親ページ確かにクールでもビューティフルでもありませんね残念 (2013/12/31) (a) (Always) +(put)+ @(<!DOCTYPE html>)@ (on the first line).

3 Instructions: あなたへのミッション 1. Go ahead and three lines mentioned (into test.html), -(which)- +(is)+ (now) =(blank)=. / 1 では先ほど説明したHTML 文書に書くべき 3 をすぐ右側にある test.htmlタブの中に書いていただきます今の状態は何も書かれていない状態 #above ( 副詞 )[ 文章本などで] 前述の, 上記の, 先に [ジーニアス英和 ( 第 4 版 ) 和英 ( 第 3 版 ) 辞典 ](mentionedが省略される場合もある) #go ahead [ 命令で] ( 許可を表して)どうぞ;さあしなさい [ジーニアス英和 ( 第 4 版 ) 和英 ( 第 3 版 ) 辞典 ] 2. (In between the second and last line)(between the <html> and the </html>), +(feel free to message you like)@. / 2 そして 2 と最後のの間につまり <html>と</html>の間にあなたの好きなメッセージを何でもいいので書いてくださいヒント: (In HTML), -(the order you put things in)- +(matters)+! But -(formatting (i.e. empty space))- +(doesn't matter)+ (from a technical point of view). / HTMLにおいて <タグ>を置く/ 書く順番は重要です! しかしながら空白文字に関しては HTML 語のルールではかけにはほとんど関係ありません #i.e. すなわち言い換えれば #empty space 空白文字 // しかしこの問題は複雑で // 調べたところによると // 改タブ半スペースはいくつあってもつの半スペース // または無視の場合がある. // 全角空白文字はコンピュータの世界では空白文字ではなく // 普通の文字と同じ扱いですこれの意味するところは // 全スペースをれればそのまま Webページのかけに反映され // るということになります / しかし全角空白は注意するぐらに覚えておいて 3/6 ページ

して)どうぞ;さあしなさい [ジーニアス英和 ( 第 4 版 ) 和英 ( 第 3 版 ) 辞典 ] 2. (In between the second and last line)(between the <html> and the </html>), +(feel free to write)+ @(whatever message you like)@.

4 / かけが分の思ったとおりでなかったら調べればいいや / ぐらいの気持ちで十分でしょう / 逆に空白を入れたいときは全角の空白を使えばいいわけ / 上の章の理由は英語の場合全字ってのは / ほとんど使わないのでそこまで考える必要がないから #formatting 書式設定ここではWebページでのえ. -(You)- +(will (there) +~'s~+ =~a pattern~= ((in(the way)how we indent each line of HTML)) )@, (though# 確認の気持ち). / あなたなら HTML 言語のインデント/ 字下げ(indent) にあるパーターンがあるなということに気づかれたでしょう -(This)- +(is)+ =(to aid readability and help us catch mistakes)=. / あなたのおっしゃる通りインデントによって読みやすくなりさらにコードの間違いにも気付きやすくなるの -(We)-+('ll talk)+ (more) (about indentation) (later)! / そのことについては後からお話ししましょうまとめ HTML and CSS HTMLとはハイパーテキストマークアップ言語 (HyperText Markup Language)の頭字をとった略語のことハイパーテキスト(Hypertext)とはリンクするテキスト/ 単語 / 文章という意味新しいWebページへ導くような単語をクリックしたときまさにその時あなたはハイパーテキストをクリックしたことになるのマークアップ言語 (markup language)とは例えばただ単に紙に書いてある字以上のことができるプログラミング言語つまり単なる文字だけではなく画像 (image)を使ったり新しいページへのリンク(link)を張ったり表 (table)やリスト(list)を作ったりそれだけにとどまらずもっといろんなことができる言語なのですそうですこれから私たちが覚えようとしている HTML はまさにそんな言語なの 4/6 ページ

/ あなたなら HTML 言語のインデント/ 字下げ(indent) にあるパーターンがあるなということに気づかれたでしょう -(This)- +(is)+ =(to aid readability and help us catch mistakes)=.

5 じゃあ Webページ(webpage)をさらにクール/ビューティフル/プリティーになるようにするための言語は? それは CSS(CSS/Cascading Style Sheets/カスケーディングスタイルシート) HTMLが骨格だとしたら CSSは肉付けをするそれを覆ってきれいにするメイクをするそんな感じ #メイクの例は分かりやすいかも濃くも薄くもできるし腕の良さも関係するしまず HTMLを勉強しますそれからCSSを学習していくことにしましょうまず私たちのすべきことは Webページの骨組みを作ることだから #つまり CSSを知らなくても Webページはできます例としてこのページの親ページ確かにクールでもビューティフルでもありませんね残念 (2013/12/31) (a) 必ず 1 には <!DOCTYPE html> を書いてくださいこれはブラウザ君にあなたがこれから読むコードは HTMLですよと教えていることになるわけ (b) 次にはいつも <html> を書きますこれを書くことによってあなたが作りたいと思っているWebページのコードが書き始められるというわけ (c) そして HTML 文書の最後にはいつも </html> が来ますこれを書かないことにはコードを書き終わったことにはなりません (a) (c)をまとめると <!DOCTYPE html> // 1 <html> // 2 あなたが書くいろいろなコード </html> // 最後の Instructions: あなたへのミッション 1 では先ほど説明したHTML 文書に書くべき 3 をすぐ右側にある test.htmlタブの中に書いていただきます今の状態は何も書かれていない状態 5/6 ページ

していくことにしましょうまず私たちのすべきことは Webページの骨組みを作ることだから #つまり CSSを知らなくても Webページはできます例としてこのページの親ページ確かにクールでもビューティフルでもありませんね残念 (2013/12/31) (a) 必ず 1 には <!

6 2 そして 2 と最後のの間につまり <html>と</html>の間にあなたの好きなメッセージを何でもいいので書いてくださいヒント: HTMLにおいて <タグ>を置く/ 書く順番は重要です! しかしながら空白文字に関しては HTML 語のルールではかけにはほとんど関係ありません #empty space 空白文字 // しかしこの問題は複雑で // 調べたところによると // 改タブ半スペースはいくつあってもつの半スペース // または無視の場合がある. // 全角空白文字はコンピュータの世界では空白文字ではなく // 普通の文字と同じ扱いですこれの意味するところは // 全スペースをれればそのまま Webページのかけに反映され // るということになります / しかし全角空白は注意するぐらに覚えておいて / かけが分の思ったとおりでなかったら調べればいいや / ぐらいの気持ちで十分でしょう / 逆に空白を入れたいときは全角の空白を使えばいいわけ / 上の章の理由は英語の場合全字ってのは / ほとんど使わないのでそこまで考える必要がないからあなたなら HTML 言語のインデント/ 字下げ(indent) にあるパーターンがあるなということに気づかれたでしょうあなたのおっしゃる通りインデントによって読みやすくなりさらにコードの間違いにも気付きやすくなるのそのことについては後からお話ししましょう 6/6 ページ

// 全角空白文字はコンピュータの世界では空白文字ではなく // 普通の文字と同じ扱いですこれの意味するところは // 全スペースをれればそのまま Webページのかけに反映され // るということになります / しかし全角空白は注意するぐらに覚えておいて / かけが分の思ったとおりでなかったら調

/ [Save & Submit Code]ボタンが下部やや左にありますがこのボタンを押すと右上の小さいウィンドウ(the results tab) が本物のブラウザのようにアクションします (ブラウザの例 : Chrome(グーグルクロム) Firefox(

/ [Save & Submit Code]ボタンが下部やや左にありますがこのボタンを押すと右上の小さいウィンドウ(the results tab) が本物のブラウザのようにアクションします (ブラウザの例 : Chrome(グーグルクロム) Firefox( (Why) -((we))- +(learn)+ @(HTML)@? / どうしてHTMLを覚えるのか? -(Every webpage you look at)- +(is written)+ (in a language called HTML). / Webページはどのページであれ HTML 言語を使って書かれています -(You)- +(can think of)+ @(HTML)@

#メイクの 例 は 分 かりやすいかも 濃 くも 薄 くもできるし 腕 の 良 さも 関 係 する し -(We)-+('ll learn)+ (first), then +(worry about)+ (in later courses). / まず HTMLを

#メイクの例は分かりやすいかも濃くも薄くもできるし腕の良さも関係するし -(We)-+('ll learn)+ (first), then +(worry about)+ (in later courses). / まず HTMLを