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回かい目めを目安めやすにこれまでの知識ちしき問題もんだいを再さい掲載けいさいします
試験しけん場所ばしょオンライン
試験しけん内容ないよう選択せんたく式しきのテスト
試験しけん時間じかん50分
試験しけん範囲はんい授業中じゅぎょうちゅうに実施じっしした知識ちしき問題もんだいより

HTMLタグ

実際じっさいに使われているHTMLタグを学んでまなんでいきましょう。

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

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

  • 要素ようそ（HTMLタグ）に名前なまえをつける2種類しゅるいの方法ほうほう​
    • クラス属性ぞくせい（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="my_id">
  <h1>くだもの</h1>
</section>
  • クラス属性ぞくせい、ID属性ぞくせいともに、ほとんどの要素ようそ（HTMLタグ）に使用しようすることができます
  • クラス属性ぞくせいを使用しようするシーン
    • 同じおなじページにある複数ふくすうの要素ようそにデザインを適用てきようするとき
    • ユーザーのアクションなどで状態じょうたいを変化へんかさせたいとき　など
  • ID属性ぞくせいを使用しようするシーン
    • ページ内で唯一ゆいいつの特定とくていの要素ようそにデザインを適用てきようするとき
    • ページ内でその部分ぶぶんに直接ちょくせつリンクしたいとき　など

CSS（Cascading Style Sheet）

CSSは、Webサイトのデザインを調整ちょうせいすることができる言語げんごです。

  • Webサイト作成さくせいにおいて、HTMLでは情報じょうほう構造こうぞうを指定していすることができます
  • ​Webサイト作成さくせいにおいて、デザインは「CSS」で行いおこないます​
  • 情報じょうほう構造こうぞう（HTML）＋デザイン（CSS）​＝情報じょうほう構造こうぞうが指定していされ、デザインされたWebサイト​

CSSを書くかく場所ばしょ

  • CSSはhead要素ようその中になかにstyle要素ようそを設けもうけ、その中になかに書きます
  • 他ほかにも要素ようそに直接ちょくせつ書いたり、別べつファイルをの中になかに書いたりできます

HTMLタグ（スタイル）

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

CSSの使い方つかいかた

CSSを書くかくときはいつも、「どのHTML要素ようそに対してたいして？」「何をなにを？」「どうする？」と考えかんがえましょう。それぞれ「セレクタ」「プロパティ」「値あたい」と呼びます。

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

セレクタを指定していする3つの方法ほうほう

以下いかの3種類しゅるいの方法ほうほうでセレクタを指定していすることができます。

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

<style>
  /* HTML要素ようそを直接ちょくせつ指定していする */
  h1 {color: #666666;}

  /* クラス属性ぞくせいを使って指定していする */
  .my_class {width: 120px;}

  /* ID属性ぞくせいを使って指定していする */
  #my_id {background-color: #ff0000;} 
</style>
  • HTML要素ようそはそのまま書きます
  • クラス属性ぞくせいは「.（ドット）」をクラス名めいの前にまえにつけて書きます
  • ID属性ぞくせいは「#（ハッシュ、ナンバーサイン）」をID名めいの前にまえにつけて書きます

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

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

セレクタ＝body
プロパティ＝background-color
値あたい＝#eeeeee

<style>
  body {
    background-color: #eeeeee;
  }
</style>

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

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

セレクタ＝.box-ul
プロパティ＝color
値あたい＝#ff0000

<style>
  .box-ul {
    color: #ff0000;
  }
</style>

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

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

セレクタ＝#section-3
プロパティ＝font-size
値あたい＝24px

<style>
  #section-3 {
    font-size: 24px;
  }
</style>

CSSプロパティ

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

CSSプロパティ（文字もじの色いろ）

color文字もじの色いろを指定してい
color: 色いろを指定してい;

文字もじの色いろは、色いろの名前なまえ（red）やHEX（#ff0000）、rgba（255,0,0,0）などで指定していします

<style>
  h2 {
    color: #0000ff;
  }
</style>

CSSプロパティ（文字もじの大きさおおきさ）

font-size文字もじの大きさおおきさを指定してい
font-size: 文字もじの大きさおおきさを指定してい;

文字もじの大きさおおきさはピクセル（18px）などで指定していします

<style>
  .box-li {
    font-size: 18px;
  }
</style>

CSSプロパティ（背景色はいけいしょく）

background-color背景色はいけいしょくを指定してい
background-color: 色いろの指定してい;

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

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

CSSプロパティ（幅はば）

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

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

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

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

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

CampusApp

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

知識ちしき問題もんだい

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

CampusApp

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

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

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

Webサイト作成A
目次