Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Copyright © Asial Corporation. All Rights Reserved. HTMLxCSSで情報科の授業を行う意義  HTMLxCSSで情報科の授業を行う意義・まず、指導要領にWebという単語は40個あります・ HTMLとCSSは0個ですが・コンテンツの制作や『発信』が行えます・ Webは発信しやすい・学外からスマホでみられる・デザイン以外の領域にも関係します・インターネット/マルティメディア/Webシステムなど・ファイル・フォルダ・URLを教えることもできます 4

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Copyright © Asial Corporation. All Rights Reserved.  Monaca Educationのアップデートについて・ダッシュボードの更新と教材サポートの導線改良・コース機能（情報デザインは来年）・スマホでみる（Web公開機能の簡易版）・エディタパネル・タブの改良・フォルダ非表示機能・ツール（β）・お絵かき・録音など・クラウドデータベース容量UP(画像も頑張れば保存可) 6

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Copyright © Asial Corporation. All Rights Reserved. 1. Monaca Educationにログインする 2. サンプルプロジェクト「図鑑アプリ」をインポートする（読み込む） 3. Monaca Educationのダッシュボードで、「図鑑アプリ」プロジェクトを選び、「クラウドIDEで開く」をクリックする 24 ※プロジェクト名をクリックして選択すると、画面右に説明と「クラウドIDEで開く」ボタンが表示される

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Copyright © Asial Corporation. All Rights Reserved. リンクになっていて、クリックすると、前のページ（ボタンのあるページ）に戻る戻るそのページの内容を知らせている。他と比べて大きなサイズで表示見出し画像が表示されている画像説明文の部分を囲んでいる枠線。破線で表示説明文を囲む枠文章で書かれた、要素の説明説明文説明文が、どこから引用されたか出典 28 HTMLファイルの中に、これらの情報は書き込まれている。 CSSファイルの中に、これらの情報の表示方法が書き込まれている例： - 破線の枠

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

…

Slide 35

Slide 35 text

リンゴ

（りんごの説明）

（辞書の説明）

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Copyright © Asial Corporation. All Rights Reserved.  css/style.css 37 • buttonは、HTMLのタグを指している • background-color: green;によって、ボタンの緑色が指定されている • #jishoは、apple.htmlの中にある id=“jisho” を指している • border:dotted により、点線の枠線が描かれている

Slide 38

Slide 38 text

Slide 39

Slide 39 text

くだもの図鑑

を見つけ、その下の行にカーソルを合わせる 3.

私の図鑑

という行を入力する 4. ファイルを保存して、プレビューを表示する「私の図鑑」は、どのように表示されるだろうか？ 39

Slide 40

Slide 40 text

Slide 41

Slide 41 text

くだもの図鑑

・「くだもの図鑑」は、文書の中でも一番上の階層として扱う・いろいろな方法があるが、HTMLでは、<>を使う「タグ」でマークアップする 41

Slide 42

Slide 42 text

,

…見出し・数字が小さい方が上のレベル・例:  タグの使い方のポイント・タグは、開始タグと終了タグの組で出来ている・ h1タグの開始タグ:

・ h1タグの終了タグ:

・タグ名の前に”/”を付けると終了タグになる 42

私の図鑑

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Copyright © Asial Corporation. All Rights Reserved.  css/style.css 45 • buttonは、HTMLのタグを指している • background-color: green;によって、ボタンの緑色が指定されている • #jishoは、apple.htmlの中にある id=“jisho” を指している • border:dotted により、点線の枠線が描かれている

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Copyright © Asial Corporation. All Rights Reserved.  HTMLの要素の指定方法 47 • buttonは、HTMLのタグを指している • background-color: green;によって、ボタンの緑色が指定されている • #jishoは、apple.htmlの中にある id=“jisho”を指している • border:dotted により、点線の枠線が描かれている • タグを指定する button { … } • HTML要素のIDを指定する #jisho { … }

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Copyright © Asial Corporation. All Rights Reserved.  CSS ・要素を選ぶ（「セレクタ」）・セレクタの後ろに、{ } で囲って、色やサイズ、表示上の効果を設定する。これをプロパティと呼ぶ・プロパティ名 : プロパティ値・複数の属性を並べるときは、;（セミコロン）で区切る・ ※タグによって、設定できる属性が違う 50 background-color: green;

Slide 51

Slide 51 text

Copyright © Asial Corporation. All Rights Reserved.  試してみよう 1. ボタンの色を他の色に変えてみる 2. ボタンの上の文字の色を変えてみる・ヒント: color:white; 3. 枠線の太さを変えてみる・ヒント: border: solid 5px gray; 4. （応用）リンゴのボタンの色を赤、オレンジのボタンの色をオレンジ色にする・ヒント: ・ HTML: ・ CSS: #apple { background-color: red; } 51

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Copyright © Asial Corporation. All Rights Reserved.  新しいHTMLファイル orange.htmlを作ろう 1. 画面左で、apple.htmlを選んでクリックし、右クリックする 56 2. 「ファイルをコピー」を選んでクリックする 3. 表示される「ファイルをコピー」ウインドウで、「ファイル名」をorange.htmlに変え、OKボタンを押す

Slide 57

Slide 57 text

リンゴ

リンゴ（林檎、学名：Malus domestica, Malus pumila）は、バラ科リンゴ属の落葉高木、またはその果実のこと。出典: フリー百科事典『ウィキペディア（Wikipedia）』

Slide 58

Slide 58 text

リンゴ

オレンジ

Slide 59

Slide 59 text

Slide 60

Slide 60 text

オレンジ（甜橙、英名: orange、学名: Citrus sinensis）は、ミカン科ミカン属の常緑小高木、またはその果実（オレンジ (果実)（英語版））のこと

リンゴ（林檎、学名：Malus domestica, Malus pumila）は、バラ科リンゴ属の落葉高木、またはその果実のこと。