MENU
日本経済大学
  1. ホーム
  2. Webサイト作成A
  3. Webサイト作成A（第10回）

Webサイト作成A（第10回）

Webサイト作成A
目次

授業じゅぎょうの準備じゅんび

Microsoft Teamsにログインし、授業じゅぎょうの会議かいぎに参加さんかしてください。

前ぜん回かいの復習ふくしゅう

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

前ぜん回かいの知識ちしき問題もんだい

  • 画が面めんで色いろを表現ひょうげんするのに用いるもちいる方法ほうほうはどれですか
    • RGB
    • CMYK
    • HTML
    • PPI
    • IMG
  • 印刷いんさつで色いろを表現ひょうげんするのに用いるもちいる方法ほうほうはどれですか
    • CMYK
    • RGB
    • HTML
    • PPI
    • IMG
  • RGBでは何なに種類しゅるいの色いろを表現ひょうげんすることができますか
    • 約やく1,670万まん色いろ
    • 約やく1,670色いろ
    • 約やく167万まん色いろ
    • 255色いろ
    • 167色いろ
  • 「Rが0、Gが255、Bが0」では何なに色いろになりますか
    • 緑みどり色いろ
    • 赤あか色いろ
    • 青あお色いろ
    • 黒くろ色いろ
    • 白しろ色いろ
  • 画像がぞうを表示ひょうじするHTMLタグはどれですか
    • img
    • alt
    • src
    • image
    • rgb

実じつ技わざテストと定期ていき試験しけんについて

実じつ技わざテスト

  • 15回かい目めの授業じゅぎょうで実じつ技わざテストを行いきいます
    • 14回かい目めは試験しけん勉強きょうの時間じかんとします
試験しけん場所ばしょITリテラシー教室きょうしつ
試験しけん内容ないようHTMLとCSS
試験しけん時間じかん60分
試験しけん範囲はんい13回かい目めの授業じゅぎょうまでに学がくんだ内容ないよう
禁止きんし事項じこうなど教科書きょうかしょの持ち込み、パソコンで調べるしらべる、AIに質問しつもんするなどは認めみとめますが、スマホの使用しようは禁止きんしです。また、試験しけん中ちゅうの私語しご（友達ともだちと話はなしをすること）も禁止きんしです。禁止きんしした行動こうどうを確認かくにんした場合ばあい、退室たいしつを命じるめいじることがあります。

定期ていき試験しけん

  • 16回かい目めの授業じゅぎょうで定期ていき試験しけんを行いきいます
    • 事前じぜんに勉強きょうしてほしいので、14回かい目めを目安めやすにこれまでの知識ちしき問題もんだいを再さい掲載けいさいします
試験しけん場所ばしょオンライン
試験しけん内容ないよう授業じゅぎょう資料しりょうから
試験しけん時間じかん60分
試験しけん範囲はんい授業中じゅぎょうちゅうに実施じっしした知識ちしき問題もんだいより

HTMLタグ

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

「index_10.html」をダウンロードして、Visual Studio Codeから開きます。

HTMLタグ（クラス属性せいとID属性せい）

  • 要素ようそ（HTMLタグ）に名前なまえをつける方法ほうほう​
  • class：クラス属性せいはページ内で同じおなじ名前なまえを何なに度たびでも使える名前なまえのつけ方かた​です
  • id：ID属性せいはページ内で同じおなじ名前なまえを一度いちどしか使えない名前なまえのつけ方かた​です
//li要素ようそに「my_class」というクラス名めいをつける

<ul>
  <li class="my_class">りんご</li>
  <li class="my_class">ぶどう</li>
  <li class="my_class">もも</li>
</ul>

//section要素ようそに「my_id」というID名めいをつける

＜section id="ID名めい"＞
  <p>段落だんらくの内容ないようです。</p>
</section>
  • クラス属性せい、ID属性せいともに、ほとんどの要素ようそ（HTMLタグ）に使用しようすることができます
  • クラス属性せいの使用しよう目的もくてき
    • 複数ふくすうの要素ようそにデザインを適用てきようするとき
    • ユーザーのアクションなどで状態じょうたいを変化へんかさせたいとき　など
  • ID属性せいの使用しよう目的もくてき
    • 特定とくていの要素ようそにデザインを適用てきようするとき
    • ページ内でその部分ぶぶんに直接ちょくせつリンクしたいとき　など

CSS（Cascading Style Sheet）

  • 確認かくにんしましょう：HTMLでは情報じょうほう構造こうぞうを指定していすることができます
  • ​HTMLのデザインは「CSS」で行いきいます​
  • 情報じょうほう構造こうぞう（HTML）＋デザイン（CSS）​＝デザインされたWebサイト​

CSSを書くかく場所ばしょ

<head>
  <style>
    ここにCSSを記述きじゅつします
  </style>
</head>

CSSの使い方かた

  • HTML要素ようそ（タグ）を直接ちょくせつ指定していして、デザインを適用てきようできます
  • クラス属性せいを使ってHTML要素ようそ（タグ）を指定していして、デザインを適用てきようできます
  • ID属性せいを使ってHTML要素ようそ（タグ）を指定していして、デザインを適用てきようできます
どのHTML要素ようそに対たいして？セレクタ
何なにを？プロパティ
どうする？値ね
どのHTML要素ようそに対たいして {何なにを: どうする;}
セレクタ {プロパティ: 値ね;}

<style>
  h1 {color: #666666;}

  .my_class {width: 120px;}

  #my_id {background: #ff0000;} 
</style>
  • HTML要素ようそはそのまま書きます
  • クラス属性せいは「.」をクラス名めいの前ぜんにつけて書きます
  • ID属性せいは「#」をID名めいの前ぜんにつけて書きます

CSS（HTML要素ようそを直接ちょくせつ指定していする）

どのHTML要素ようそに対たいして {何なにを: どうする;}
セレクタ {プロパティ: 値ね;}

セレクタ＝body
プロパティ＝background
値ね＝#ff0000

<style>
  body {
    background: #ff0000;
  }
</style>

CSS（クラス属性せいを使ってHTML要素ようそを指定していする）

どのHTML要素ようそに対たいして {何なにを: どうする;}
セレクタ {プロパティ: 値ね;}

セレクタ＝.my_class
プロパティ＝background
値ね＝#00ff00

<style>
  .my_class {
    background: #00ff00;
  }
</style>

CSS（ID属性せいを使ってHTML要素ようそを指定していする）

どのHTML要素ようそに対たいして {何なにを: どうする;}
セレクタ {プロパティ: 値ね;}

セレクタ＝#my_id
プロパティ＝background-color
値ね＝#ff0000

<style>
  #my_id {
    background-color: #ff0000;
  }
</style>

CSSプロパティ

実際じっさいに使われているCSSプロパティを学んでまなんでいきましょう。
いずれもstyleタグの中になかに記述きじゅつしていきます。

文字もじの色いろ

color: 色いろを指定してい;

色いろは色いろの名前なまえ（red）やHEX（#ff0000）などで指定していします

<style>
  h1 {
    color: #ff0000;
  }
</style>

文字もじの大きさおおきさ

font-size: 文字もじのサイズを指定してい;

文字もじのサイズはピクセル（18px）などで指定していします

<style>
  h1 {
    font-size: 18px;
  }
</style>

背景色はいけいしょく

background-color: 色いろの指定してい;

背景色はいけいしょくは色いろの名前なまえ（red）やHEX（#ff0000）などで指定していします

<style>
  h1 {
    background-color: #cccccc;
  }
</style>

幅はば

width: 幅はばを指定してい;

幅はばはピクセル（320px）などで指定していします

<style>
  h1 {
    width: 320px;
  }
</style>

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

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

CampusApp

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

知識ちしき問題もんだい

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

CampusApp

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

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

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

Webサイト作成A
目次