Webサイト作成さくせいB（第だい02回かい）

CSSやJavaScriptを学ぶまなぶ

これまではHTMLだけを使ってWeb作成さくせいをしてきました。これから、Webサイト作成さくせいに便利べんりな言語げんごを2つ勉強べんきょうします。

• CSS：デザインのための言語げんご 
• JavaScript：動きうごきのための言語げんご 

この2つの言語げんごを使うつかうときに知っておくべき、HTMLタグとHTML属性ぞくせい（HTMLタグの追加ついか情報じょうほう）について勉強べんきょうします。

HTMLタグ

実際じっさいに使われているHTMLタグを学んでまなんでいきましょう。
いずれも＜body＞タグの中になかに記述きじゅつしていきます。

CampusAppから「web-b-02.zip」をダウンロードして展開てんかいし、「02.html」をVisual Studio Codeから開きひらきます。

HTMLタグ（グループ化する）

＜div＞	グループ化する

• divided（分割ぶんかつされた）
• ＜div＞は何なんにでも使えるつかえる「箱はこ」 
  • タグ自体じたいは意味いみを持ちません

<div>
  <h1>見出し1</h1>
  <p>段落</p>
</div>

練習れんしゅう：＜div＞でまとめましょう

＜h2＞、＜p＞、＜img＞の3つを＜div＞でまとめましょう。

HTMLタグ（範囲はんいを指定していする）

＜span＞	範囲はんいを指定していする

• span：範囲はんい
• ＜span＞は何なんにでも使えるつかえる「マーカー」 
  • タグ自体じたいは意味いみを持ちません

<p>私の名前は<span>山田太郎</span>です。</p>

練習れんしゅう：＜table＞内の次つぎの文字もじを＜span＞でマーキングしてみましょう

• 幅はば広いひろい場面ばめんで使われるつかわれる日本語にほんご
• 日常にちじょう的な日本語にほんご
• 基本的きほんてきな日本語にほんご

＜div＞と＜span＞の違いちがい

＜div＞と＜span＞はWebサイト作成さくせいでよく使うつかうタグですが、初めてはじめてHTMLを勉強するべんきょうする人ひとには違いちがいがわかりにくいです。

	＜div＞	＜span＞
イメージ	箱はこに入れるいれる	マーカーペンで線せんを引くひく
改行かいぎょう	入るはいる	入らない

練習れんしゅう：改行かいぎょうを確認かくにんしてみましょう

「基本的きほんてきな日本語にほんご」につけた＜span＞を＜div＞に変更へんこうして、どのように見た目めが変わるかわるかを確認かくにんしましょう

HTML属性ぞくせい

HTMLタグに名前なまえをつける

HTMLタグに名前なまえをつける方法ほうほうを勉強べんきょうします。
HTMLタグに名前なまえをつけると、同じおなじ種類しゅるいのHTMLタグでもデザインや動きうごきを変えられかえられます。 

クラス属性ぞくせい

/* li要素ようそに「fc-red」というクラス名めいをつける */

<ul>
　<li class="fc-red">りんご</li>
　<li>ぶどう</li>
　<li>もも</li>
　<li class="fc-red">いちご</li>
</ul>

• クラス属性ぞくせいはほとんどの要素ようそ（HTMLタグ）に使用しようすることができます
• クラス属性ぞくせいを使用しようする理由りゆう
  • 同じおなじページにある複数ふくすうの要素ようそを同じおなじデザインにしたい 
  • ユーザーのアクションなどで状態じょうたいを変化へんかさせたい 
• クラス属性ぞくせいの使い方つかいかた
  • HTMLタグの山やま括弧かっこの中になかに、半角はんかくスペースを空けあけて書くかく
  • 「class=””」のダブルコーテーションの中になかに書くかく
  • 「class=”class_name”」を段落だんらくタグに手て書きしてみましょう 

練習れんしゅう：いくつかのHTMLタグにクラス属性ぞくせいをつけてみましょう

以下いかのHTMLタグに「fc-red」というクラス名めいをつけてください。

• ＜li＞言語げんご知識ちしき＜/li＞
• ＜dt＞進学しんがく＜/dt＞
• ＜th＞N3＜/th＞

課題かだいの提出ていしゅつ

課題かだいを提出ていしゅつしましょう。

CampusApp

• 「出欠しゅっけつ・課題かだい」から提出ていしゅつしましょう
• 課題かだいセクションにある今日きょうの授業じゅぎょうの欄らんから提出ていしゅつできます

知識ちしき問題もんだい

今日きょうの授業じゅぎょう内容ないようを知識ちしき問題もんだいで復習ふくしゅうしましょう。

CampusApp

• CampusAppの「CBT（知識ちしき問題もんだい）」から、知識ちしき問題もんだいにチャレンジしましょう
• 100点てんが取れるとれるまで、繰り返しくりかえし挑戦ちょうせんしましょう
• 期末きまつの定期ていき試験しけんは知識ちしき問題もんだいの中からなかから出題しゅつだいします

パソコンの再起動さいきどう／シャットダウン

授業じゅぎょうの終わりおわりに必ずかならずパソコンを再起動さいきどう（次つぎに他のほかの授業じゅぎょうがある場合ばあい）、またはシャットダウン（次つぎに他のほかの授業じゅぎょうがない場合ばあい）してください。