HTML and CSS -(HTML)- +(stands for)+ @(HyperText Markup Language)@. / HTMLとは ハイパーテキスト マークアップ 言 語 (HyperText Markup Language)の 頭 字 をとった 略 語 のこと -(Hypertext)- +(means)+ @("text with links in it.")@ / ハイパーテキスト(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)- +(makes)+ @(webpages)@ =(pretty)=? / じゃあ Webページ(webpage)を さらに クール/ビューティフル/プリティー になる ようにするための 言 語 は? That's CSS Cascading Style Sheets. / それは CSS(CSS/Cascading Style Sheets/カスケーディング スタイル シート) +(Think of)+ @(it)@ (like skin and makeup that covers the bones of HTML). / HTMLが 骨 格 だとしたら CSSは 肉 付 けをする それを 覆 ってきれいにする メイ クをする そんな 感 じ 1/6 ページ
#メイクの 例 は 分 かりやすいかも 濃 くも 薄 くもできるし 腕 の 良 さも 関 係 する し -(We)-+('ll learn)+ @(HTML)@ (first), then +(worry about)+ @(CSS)@ (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) +(put)+ @(<!DOCTYPE html>)@ (on the first line). -(This)- +(tells)+ @(the browser)@ @( @~what# 関 係 形 容 詞 language~@ -~it~-+~'s reading~+ )@(in this case, HTML). / (a) 必 ず 1 には <!DOCTYPE html> を 書 いてください これは ブラウザ 君 に あなたがこれから 読 むコードは HTMLですよと 教 えていることになる わけ (b) (Always) +(put)+ @(<html>)@ (on the next line). -(This)- +(starts)+ @(the HTML document)@. / (b) 次 には いつも <html> を 書 きます これを 書 くことによって あなたが 作 り たいと 思 っているWebページのコードが 書 き 始 められるというわけ (c) (Always) +(put)+ @(</html>)@ (on the last line). -(This)- +(ends)+ @(the HTML document)@. / (c) そして HTML 文 書 の 最 後 にはいつも </html> が 来 ます これを 書 かないことには コードを 書 き 終 わったことにはなりません (a) (c)をまとめると <!DOCTYPE html> <html> あなたが 書 くいろいろなコード </html> // 1 // 2 // 最 後 の 2/6 ページ
Instructions: あなたへのミッション 1. Go ahead and +(put)+ @(the three lines mentioned above)@ (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 write)+ @(whatever 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 ページ
/ かけが 分 の 思 ったとおりでなかったら 調 べればいいや / ぐらいの 気 持 ちで 十 分 でしょう / 逆 に 空 白 を 入 れたいときは 全 角 の 空 白 を 使 えばいいわけ / 上 の 章 の 理 由 は 英 語 の 場 合 全 字 ってのは / ほとんど 使 わないので そこまで 考 える 必 要 がないから #formatting 書 式 設 定 ここではWebページでの え. -(You)- +(will notice)+ @( (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 ページ
じゃあ 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 ページ
2 そして 2 と 最 後 の の 間 に つまり <html>と</html>の 間 に あ なたの 好 きなメッセージを 何 でもいいので 書 いてください ヒント: HTMLにおいて <タグ>を 置 く/ 書 く 順 番 は 重 要 です! しかしながら 空 白 文 字 に 関 しては HTML 語 のルールでは かけには ほとんど 関 係 ありません #empty space 空 白 文 字 // しかし この 問 題 は 複 雑 で // 調 べたところによると // 改 タブ 半 スペース は いくつあっても つの 半 スペース // または 無 視 の 場 合 がある. // 全 角 空 白 文 字 は コンピュータの 世 界 では 空 白 文 字 ではなく // 普 通 の 文 字 と 同 じ 扱 いです これの 意 味 するところは // 全 スペースを れれば そのまま Webページの かけに 反 映 され // るということになります / しかし 全 角 空 白 は 注 意 するぐらに 覚 えておいて / かけが 分 の 思 ったとおりでなかったら 調 べればいいや / ぐらいの 気 持 ちで 十 分 でしょう / 逆 に 空 白 を 入 れたいときは 全 角 の 空 白 を 使 えばいいわけ / 上 の 章 の 理 由 は 英 語 の 場 合 全 字 ってのは / ほとんど 使 わないので そこまで 考 える 必 要 がないから あなたなら HTML 言 語 の インデント/ 字 下 げ(indent) に あるパーターンがある な ということに 気 づかれたでしょう あなたのおっしゃる 通 り インデントによって 読 みやすくなり さらに コードの 間 違 い にも 気 付 きやすくなるの そのことについては 後 からお 話 ししましょう 6/6 ページ